CSS or Tables for Page Layout?

If you search for “CSS vs. Tables” on Google, you will likely find a number of flame wars going on. I thought I’d post briefly on that whole scene.

There are two camps. One insists that tables were never meant for page layout, only for presenting tabular information. Page layouts, so the argument goes, should be done with CSS. The other side of the argument basically goes like this: creating page layouts with CSS is a royal pain, and tables work just fine, thank you very much, so cram that in your curly brackets and smoke it.

I’m going to pull a slight Switzerland on the subject. I recently tried to make an entire page layout via CSS, and I’d draw the line like so:

Use CSS for page layout if -

It is a site you will need to change the look and feel of over time, and/or
Your customer or boss isnt’ breathing down your neck, as it will take a bit more time.

Given enough time, I’d do all layouts in CSS, but even if you know CSS, making a complex page layout in CSS will probably take significantly more time than making the same page with HTML tables. Why do it then? Here are the big advantages of CSS for page layout:

Making Layout Changes
If your site is worth its weight in kilobytes, you can almost guarantee it will get redesigned several times over its live span. Using HTML tables for layout, you will be screwed to one degree or another. Tables are not terribly flexible constructs, and if the site design is changing a lot, you will probably be opening up a blank HTML page and copying bits and pieces of it over as you essentially recreate the whole thing.

Not so with CSS. With a page layout using CSS, changing the layout is a snap. One of the best examples of this is the Zen Garden. Start flipping through the various design links and they look like radically different web pages. The trick is, the HTML is exactly the same for each page. Only the CSS file changes.

Speed
Generally speaking, you are saving bandwidth by using CSS for layout. That’s an everybody-wins proposition: your server works less, you take up less bandwidth, and your customer gets the page faster. Most browsers in general also render tables pretty slowly, so your customers will see the page render faster with CSS. A single CSS file is cached once by the browser and can then be used for multiple pages on a web site.

Accessibility
As layout and content is separate, CSS layouts generally make the content more accessible to screen readers and other software used by the disabled.

I would only knock CSS for two things, one of which isn’t CSS’s fault. Some things are harder in CSS than they should be. Making a form layout with lots of buttons and text boxes, for example, can be a major pain to justify correctly. It takes a bit more time, and the sad fact is your customer probably doesn’t care how the page is put together, they just want it done. The second thing is not all browsers render CSS the same way (I’m looking at you Internet Explorer). That means you might have to put in some CSS hacks to get some browsers to work correctly. This has gotten much better of the past couple of years, but cross-browser testing is still necessary on your sites.

For a good basic tutorial on CSS layout, check out this article at A List Apart.