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.

Valid XHTML

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.

Tags: Css, Css Layout, Css Page Layout, Search Engine Optimization, Website Design, Web Design, Website Development, Web Development