Why you should trade in your table based website for css
Written by Joe on Wednesday, June 23, 2010
This is an old topic, but too many websites are still table based
Looking at many websites, you can see that too many designers and developers still use tables for their page layouts. Tables should only be used to display tabular data, which is data that can be inputted to a spread sheet style format, not your main page content.
How do you know if your website is table based?
Open your favorite web browser and go to your home page. Right click on the background and select "view source" or "view page source". Search for "<table". If you see all of the content of your website inside of a <table> tag, your website is probably table base. If you need help figuring out if your website is table based, contact us and we would be glad to help.
This is the number one reason to use a CSS page layout. If you use tables for layout, you are writing invalid XHTML. Tables are only valid in XHTML when displaying tabular data. Using CSS to position and layout your pages instead of tables is the only valid way to code HTML page layouts.
Tables can be hard to understand, update, and change
Tables coded incorrectly could make your web page be a plain white screen. Unprofessional website designers and developers make this error by using tables that are created incorrectly and either missing tags or excluding closing tags. Even if the code is correct, nested tables can be very difficult to follow if the code is not neat. And if your website was coded using tables, we can assume it won't be the neatest.
CSS makes your website easy to maintain and change. Changing the look of your website can be as easy as changing a few items in your style sheet, rather than having to recode tables from the ground up. Professional website designers use css over tables to make restyling your website a much easier task.
Tables are inflexible
It as possible to design percentage based tables, but they almost always end up looking very rigid and not dynamic. They also will slow down you page loading time which is not very good for search engine optimization. CSS gives you the ability to make flexible layouts that can change based on the resolution the user is on.
Nested table load slowly and are hard to work with
Nested tables will cause your page to load slowly because it takes the browser longer to render the nested tables. Nested tables can also be very difficult to update. As I mentioned earlier in this article, 1 missed tag and your website will turn into a blank white page or a complete mess.
CSS loads much faster because you use less code. CSS page layouts are easier to maintain because everyting is kept inside <div></div> tags. If you miss 1 it is usually easy to find and wont cause your page to not load or display a white screen.
Tables hurt search engine optmization
The most common table created layout has a navigation bar on the left side of the page and the main content on the right. When using tables, this (generally) requires that the first content that displays in the HTML is the left-hand navigation bar. Search engines categorize pages based upon the content, and many engines determine that content displayed at the top of the page is more important than other content. So, a page with left-hand navigation first, will appear to have content that is less important than the navigation.
Tables aren't as accessible
Just like search engines, most screen readers read Web pages in the order that they are displayed in the HTML. If a screen reader were to read the same page described above, it is possible that the customer would hit the back button before the reader had even read through all the navigation.
With CSS, you can define a section as belonging on the left side of the page, but place it last in the HTML. Then screen readers and search engines alike will read the important parts (the content) first and the less important parts (navigation) last.
Tables don't print well
If you've ever tried to print a web page, you know that they don't always print well. Sometimes pages look decent and sometimes you will be missing content or the content will be on another page. Tables just don't work well with printing.
With CSS you can create a separate style sheet just for printing. 1 simple step and your website will print with almost no problems.
Is you website still table based?
The reasons above should be more than enough to convince you to get rid of your table based website. Converting a table based layout to CSS can be a pretty tricky task, but we can help you. Contact us today and let us know you want to get rid of your table based website layout and we would be glad to help you.
Like what you’ve read? Share with your friends!
Link back to us.
OR Join Our Mailing List
Want to drive more traffic to your website?
Our results driven search engine optimization services will get you the results you want.Contact Us Today
Post A Comment
Request A Quote
Home Tek Siding & Windows: My partner and I are very happy with the website that Joe designed for us. He made it easy from start to finish. He was patient and professional... Read More »
ASM Communicates: I'm liking how easy this is...I've never had a web site project go so smoothly. Thank you for that and I do look forward to a long relationship... Read More »
WheyGood Nutrition: Wow! The website looks Great! Thanks Joe. I'm very happy with Revolution Unlimited & I am going to recommend you to all of my friends !... Read More »
A Sharma Law Firm: It is my pleasure to recommend Mr. Joe Brown whose native intelligence for web designing is great. Joe's dedication to the A... Read More »
The Ale House Tavern & Tap: We at The Ale House Tavern & Tap, based out of Sayreville, are very pleased with the work that PixelProgression and Revolution Unlimited put... Read More »
Self Empowerment Coaching, LLC: I had the great fortune of connecting with PixelProgression and Revolution Unlimited when I decided there was need for a new website. This website... Read More »
Foster and Adoptive Family Services Foundation: As a nonprofit organization, we needed the assistance of a website designer who was knowledgeable, affordable, easily accessible, patient and,... Read More »
Pennsylvania Dutch Design: Pennsylvania Dutch Design would like to commend Jason of Pixel Progression and Joe of Revolution Unlimited. With their extensive knowledge... Read More »