Test Subscription
eMail Signup
join our mailing list
* indicates required

CSS versus Tables For Layout

A common problem with table based layout is broken tables. By this, I mean that the table is missing a closing </td> data cell, or </tr> table row tag. The layout might present OK on the screen… Until you add one more piece of data. Then the entire layout self destructs in front of you. I’ve had several sites that I’ve agreed to do on-page SEO work on. The net result was that it took more than twice as long as it should have. I’m no stranger to tables – I’ve been building table based layout since 1995.

Industry Best Practice today calls for the separation of “Content”, “Presentation”, and “Behavior”. This is accomplished by utilizing HTML to label content, Cascading Style Sheets (CSS) to control the look and feel of the site, and Javascript to control client side behavior. Here are some concrete reasons behind this separation of duties.

1. Faster Page Loading
2. Lowered hosting costs
3. Redesigns are more efficient
4. Redesigns are less expensive
5. Visual consistency maintained throughout the site
6. Better for SEO
7. Accessibility
8. Quick web site updates
9. Increased usability
10. More complex layouts and designs

1. It’s not uncommon for table based layout pages to contain up to five times the amount of code and page overhead than a similar page laid out with CSS. This can lead to individual page load times that are 2.5 times longer.

2. Many hosting plans have a monthly Bandwidth limit. If your bandwidth limit was 1 Gig, your could deliver approximately 65,000 page views of an average table based page. Under CSS, you could deliver approximately 135,000 page views before hitting that 1 Gig limit.

3. Redesigning a tables based layout is significantly more time consuming than a page laid out with CSS.

4. Time is money.

5. Since the entire presentation is controlled with a small set of CSS files, you change change the font size and color of every heading by changing one line in one file. Consistency is easily maintained.

6. Small file size, less junk and overhead, and structural organization all make for Search Engine Optimization.

7. Accessibility to support the Americans With Disabilities Act. If you need to support this at all, CSS is the only way to do it.

8. Need a quick little update? Enter CSS. I’ve seen many times that a single image needs to be added to a page. With tables, these changes could take an hour. With CSS, it’s more like 15 minutes.

9. CSS layouts can have a totally different look and feel when printing, viewing on screen, displayed on a mobile device… All by referencing a CSS file for that purpose. CSS files are held in cache so pages load quicker. Browsers parse every table twice before displaying it.

10. More complex layouts are achievable using CSS. Tables are a fixed position layout with no flexibility. CSS can handle layouts with layers and elements positioned outside of the margins.

Be Sociable, Share!

Leave a Reply

Overnight Prints
Catalyst/ Dynamik
Catalyst Theme - WordPress Accelerated