CSS vs. Table Layouts

While surfing for information about styling tables using CSS, I came across “css vs. tables”, on which one very anti-CSS layout web designer argues in favor of using tables to control page layout.

I’m sympathetic to his argument … up to a point. When I re-designed Nuketown last year, I went to a CSS-only layout and I regret it; while the design works for the most part, there’s really no way to make sure all three columns are automatically the same length (as is the case with tables). I have to resort to hacks, which is pretty damn annoying for a standard that’s supposed to be the cure-all for developer blues. Next time around, I’ll be going back to tables.

That said, I think CSS is useful for more than just fonts, which is about all that the author of “css vs. tables” is willing to give the standard credit for. Within the confines of a table-based layout, CSS can be very useful in positioning content *within* the table’s cells, and I think a hybrid approach that uses a single light table to structure the site, and CSS to throw the flesh on its bones, is the way to go.

I do think excessively “heavy” table-based sites (those with several layers of nested tables) can be just as troublesome as your CSS-only sites. Although the author ignores it, part of the argument against tables isn’t just the time it takes for the table-based HTML code to download; it’s also how long it takes for the browser to render it. Anyone who’s sat around and had to wait to for a table-heavy site to fully render, can appreciate that headaches this causes. Using tables for general layout, and CSS for the fine touches, givess you the best of both techniques.

This is the technique I used when I re-did The Griffin’s Crier web site for my D&D campaign, and I’m very pleased with the results.