Tables vs CSS

I recently had the opportunity to catch Sandy Clark speak on the topic of CSS and the mis-use of tables. Before I get any farther, don't believe for a second that tables are always bad. Using tables to present tabular data – such as a ToDo List – simply makes sense. Using tables to determine layout is where it makes no sense. Many of the ideas here are directly from or directly inspired by her presentation. I don't claim anything other than trying to get the word out.

If you use a table for layout, you are entirely at the mercy of the browser, the user, and every developer who has ever touched the code. Admit it, you have all been there. You have coded cell widths, cut images into numerous pieces, and have lots of colspans and rowspans lurking around. What happens when you add one more field? What happens when someone wants to change the image on the site? What happens when a vision impaired user makes the text bigger? What happens when someone uses IE instead of Firefox?

It looks like crap. You know it. You hate it. It's up to use to do something better.

First of all, go back and review the HTML spec. Most of you – and me admittedly – haven't looked at it since HTML 3.0 Between HTML 4.0/4.1 and XHTML 1.0, there have been a huge number of things newly implemented and huge number of things newly deprecated. Do you still use the width attribute on a table cell? Do you still use colspan/rowspan, bgcolor? Stop it. Learn to use colgroup, rowgroup, and id's.

Next, separate the content and the style. Get rid attributes and tags like bgcolor, font, and style and move this into CSS. It is the easiest thing to fix and will have the single biggest impact on style. More than anything, when someone requests a color change from red to blue, it becomes trivial to implement because it's in a single place as opposed to scattered throughout html/asp/php/jsp/cfm files.

Finally, set defaults for your site backgrounds, table backgrounds, etc. A few weeks back, a great user pointed out to us that our main site – – did not set a default background. Instead it simply went with the browser default. Since the vast majority of users never change this, no one had ever noticed it. For those who had adjusted their site – often due to vision impairment – the site looked terrible. Once we were notified, it was fixed in a matter of minutes across the entire site with a single edit. Nifty, huh?

Now, if you follow these rules, your site will NOT be the CSS Zen Garden. That takes a bit more work, but these are simple steps that can be taken to improve the layout of your sites, simplify the re-theming of your sites, and make it easier for graphics people to make cosmetic changes without touching your code.

What are you waiting for?