1. Technology
Send to a Friend via Email

Change is Good - It's Time to Give Up Your Table-Based Designs

Why You Should Give Up on Tables for Layout

By

Why are You Still Using Tables for Layout?

I've been pushing CSS for layout and tables for tabular data for a few years now, and yet every time I bring up the subject, there is controversy. There are a lot of people out there who refuse to give up their tables. It's as if HTML tables were physically attached to them and I were asking them to cut off their arm. Why are tables so popular still, while other design techniques have been put to bed? I mean, you hardly ever see a rainbow horizontal rule or animated "under construction" graphic any more...

So I decided to look at some of the reasons people have given for why they aren't willing to give up their table layouts.

Browser Support and Browser Compliance

"I like CSS, but until there’s better browser compliance CSS sites will face resistance"
 -- Guy on December 11, 2006
"My customer dont care if the website is layed out in tables or CSS. The end product is that the page can be seen in all browser correctly."
 -- MIke on September 21, 2006
"I am a newbee to web development, I have only taken one HTML class. The instructor, who works in web design, said that CSS is very handy but he could not use it because older browsers would not display CSS properly."
 -- Pete Pielow on August 30, 2006

This is, by far, the most common reason people cite for why they won't give up table-based layouts. But how accurate is it? I have been building free CSS templates for over two years now, and I test my designs in the modern browsers as well as older ones (using Browsercam among other things).

But why believe me, let's look at the stats. I went to three browser statistics sites (W3Schools, Browser News, and the Counter.com) and they all indiate that 90-96% of people are browsing with CSS compliant browsers (by which I mean IE 6+, Firefox 1+, Mozilla 1+, Opera 8+, or Safari 1+). And they all indicate between 27 and 40% of people are using standards-compliant browsers (meaning all of the above except IE6).

If you're following the 80-20 rule (Pareto's Principle) you'll be focused on the 20% of browsers that matter. In other words, just because 10% of the browsers out there may not support CSS doesn't mean you should throw that tool out. 90% do, and if you focus on wriing standards-based designs, you'll have pages that are usable for the renegade 10%.

There are Too Many Standards

"there seems to be so many standards to choose from."
 -- Dwight Blubaugh on September 21, 2006

There is only one standard - that set by the W3C. To write CSS layout Web pages you need to know two languages: XHTML or HTML and CSS. Both have been standardized by the W3C.

CSS Changes Too Often

"My objective is to get the content out there; not to keep up with ever-changing standards."
 -- Philip Sidel on November 3, 2006

This complaint is just wrong. CSS came out 10 years ago and we are only on version 2. There have been at least four new Microsoft operating systems in that same time period, and Apple releases a new version of their OS almost every year. If anything the standards change too slowly.

However, if you mean browsers, then yes, there are a lot to keep track of. In that ten year period we've seen browsers like NETCOMplete and the AOL browser come and go as well as the birth of Firefox and Safari and the wider use of Opera. But this is always going to be the case - it's one of the aspects of the Web design job. If you're not willing to keep up with how your pages display, then you might want to consider another profession.

CSS Requires Hacks to Work

"It’s good to use divs when possible, but sometimes it’s just not feasible to write lines and lines of code and 'hacks' just to do something you could have done had you wrote 2 lines of code to make a table."
 -- Brian on November 3, 2006

First of all, if Brian or anyone else can show me a "two line" table that builds a complete site layout, I'll be amazed. In general, CSS layouts are lighter in code and download time than table layouts.

Yes, there are a lot of "hacks" in CSS, but there are also hacks in table layouts. I don't recommend using hacks in either. When you use a hack, you are using an aspect of the browser that is not compliant with the standards. This means, that when the browser does get updated to be compliant you will need to modify your CSS to support it.

Instead, what I recommend you do is first design your pages for Firefox or other standards-compliant browser. Then view the page in IE 6. If it looks good, you're done. If it doesn't, then you need to figure out what is breaking. Usually it will be the margins, padding, or width on boxes. Then use the tips in my article Designing for IE to correct for Internet Explorer.

CSS Pages aren't Accessible

"the biggest problem with CSS deisgn is that to make a page compliant to the American disabilities act standards the page must be fully functional if the user has CSS turned off on their browsers"
 -- Brian Schoenfeld on December 12, 2006

This argument is also incorrect. The ADA says the site must be functional if CSS is turned off. CSS affects the look and feel of a site, not the function. So a site that is designed with CSS will often be more usable and accessible for someone with disabilities. This is because you can place things like links to the body at the top of the page and then hide them for visual browsers. You can put the relevant content first in the HTML code, even if it's displayed in the second or third column over.

CSS is Hard

"Using XHTML and CSS is still a struggle sometimes"
 -- Chas Grundy on October 31, 2006

Now, that is very true. CSS can be a challenge even for me. But it's a worthwhile challenge.

"but it’s made my work faster and better. And that means happier clients (as well as being able to charge more for my work)."
 -- Chas Grundy in the end of his quote on October 31, 2006

Chas has the right idea, if you learn CSS, you'll be more marketable and be able to charge more or get a higher salary. I insisted that my entire Web team learn CSS layout a year and a half ago, and I don't think they regret learning it.

But wait, there's more... I Just Don't Like Change ...Keep reading the rest of the reasons people won't switch.

  1. About.com
  2. Technology
  3. Web Design / HTML
  4. Web Design
  5. Principles of Design
  6. Layout
  7. Why You Should Give Up on Tables for Design - Embrace the Present - Use CSS

©2014 About.com. All rights reserved.