David Baron's weblog: November 2003

Friends & Colleagues

Wednesday 2003-11-26

Don't run away from tables (17:17 -0800)

Some leading web authors advocate the replacement of tables for layout with CSS floats and positioning. There are good reasons for avoiding tables. Using tables today requires using HTML's table elements (rather than CSS's table display types), which prevents the document from being meaningful semantic markup. Furthermore, tables have rather complicated sizing rules that make loading web pages with tables slower.

However, if you want to make a web page in the style popular today, tables do have a big advantage. (I question whether this style is a good thing, since it often bombards the user with information in disconnected areas of the page and makes it unclear where to look for what the user wants.) It's relatively easy to use tables to create pages that scale well to different window sizes and different user default font sizes within the common ranges of these values. It's easy, but it doesn't happen automatically, so many pages on the web are still quite broken. It's possible to do this with a layout that uses floats and positioning, but it's more complicated, farther from the obvious path to take, and very hard to do in a way that's compatible with the bugs in major browsers. Furthermore, the layout primitives used certainly weren't designed for this type of use. I still haven't found a way to make the new mozilla.org website's toolbar scale in response to font size changes in a way that doesn't break the page in IE/Windows. (And even the current layout is complicated enough that IE/Windows won't display a large chunk of the page if it has line-height: normal rather than a scaling factor line-height.)

Hopefully CSS3 will have new layout primitives that make this type of layout easier to do well than it is with tables, and solve many common author complaints (such as inability to position or size elements vertically). Considering how much proposed layout primitives lead to pages that scale well to different devices, window sizes, and preferences should be one of the main considerations when designing specifications for web layout (including the details).