CSS Layout vs. Tables

Following are thoughts on doing table-less layouts using CSS, from the perspective of a coder who has been watching web technologies come and go as long as there has been a web. These are just highlights. For more on the topic, Google.

CSS is good

CSS has three big strengths: classes, external style sheets, and absolute positioning. Class-use requires less code than inline formatting, and makes global changes easier. External style sheets get cached by the browser, so web pages (theoretically) download faster. Absolute positioning lets one separate content from presentation (mostly; more on that later.)

Tables are good

Tables are hard to beat when you need a grid-like layout. Especially if the dimensions of your grid "cells" are unpredictable.

Tables and CSS are on the same team

Plenty of commentators make the case for CSS by listing reasons tables are bad. When reading such comments, beware of spurious assertions ("tables always require inline styles", "table HTML is always hard to read.") CSS and tables can work together gracefully. It's just that with CSS2 one does not always need tables for layout.

CSS is limited

CSS goes a long way toward separating content from presentation. On this page (at the time of this writing) the code for the left nav is near the bottom of the HTML code, but it displays high on the of the page. That's good for people who are experiencing the site through audio readers, because they don't have to listen to the navigation before they hear the page content. It also improves how this web page works with search engines.

It would be nice if that support went further. HTML pages are still quite full of layout information (hierarchies of DIVs, mostly.) For information that doesn't change from page to page, it would be nice if instructions regarding doctype and div hierarchies could be stored in the stylesheet. Then web pages could truly just be content (chunks of text flagged "body", "pullquote", etc.) with a pointer to the layout file.

The only options for doing that now are a very limited layout, or go to AJAX. Browser bookmarking issues keep me from the latter, and the former wouldn't satisfy me.

Knowing is half the battle

Web sites rarely need tables for layout. CSS is usually good, whether you use tables or not. There are web sites which should use tables for layout.

If you find yourself avoiding a technique, make sure you're not doing it out of ignorance. Become proficient with everything.

My Conclusion

Now that the most popular browsers have good CSS2 support, I create table-less web sites by default. I only go back to tables when there is a specific need to do so.