HTML & CSS: The Good Parts

Chapter 10. (Data) Tables

If you’ve been doing web design for a few years, chances are good that you own a book that recommends the use of table elements for layout. Once upon a time, this was the only reliable page layout mechanism that web browsers offered—and as the discussion of multicolumn layouts suggested (see the section Implementing Multicolumn Layouts), layout tables are comparatively easy to implement.

But in a word, don’t.

The Disadvantages of Layout Tables

Layout tables offer few unpleasant surprises on launch day, but using them means surrendering opportunities to make your sites more usable and maintainable. Table-based layout might be easier to develop when you first build a new site, but maintenance and extension quickly become major headaches.

Source Order: Square Peg, Round Hole

When you use tables for page layout, you’re forced to implement your entire site around the table-rendering algorithm. This algorithm was always intended to display data, and as a result calls for content structure that’s better suited to spreadsheets than to documents containing text passages. (Would you write a school paper or an interoffice memo in Microsoft Excel? Didn’t think so.)

The first class of users disadvantaged by such an outcome are users of assistive technology, who rely on their tools to make sense of the Web. Since the creators of assistive software cannot read web designers’ minds in aggregate, much less singly, table content is displayed in source order. One ...