Layout Tables
Use tables for layout only when necessary

Before the advent of style sheets, tables were a Web designer’s only means for page layout. Without tables, only the simplest page layouts were possible. Elements could not be placed in different locations on the page, only displayed in a vertical sequence down the page.

In casting about for options, designers discovered that the structural element TABLE could be used for layout by setting its BORDER attribute to zero (<table border="0">), thereby rendering the table invisible. By putting page content into different table cells, pages could be divided into sections with elements positioned on different areas of the page. Table layout changed the basic character of the Web; in fact, this workaround proved so successful that most Web sites are designed using tables (Figure 6.2).

Figure 6.2: Amazon, eBay, CNN, and Atlantic Online screenshots

Figure 6.2: On today’s Web, table layout is the most common method for designing Web pages. Indeed, most popular Web sites use tables for layout. www.amazon.com, www.ebay.com, www.cnn.com, www.theatlantic.com

However, when structural elements are used incorrectly, the utility of the Web is compromised. While the visual aspects of the Web tend to take center stage, much of its utility lies in what goes on behind the curtain. The Web is a web because its documents are structured—they are not simply text, but rather text with meaning applied through HTML markup. Structured documents can be read and their meaning derived by software. The most obvious benefit of structured documents is their ability to be indexed—and consequently discovered—using search engine software. However, this benefit is undermined when documents do not contain structural markup, or contain structural markup that is applied incorrectly.

When tables are used for page layout, software that reads Web pages encounters table markup and attempts to interpret the page within a table context. In the case of a screen reader, the software announces the presence of a table on the page and describes its attributes, which might sound something like "table with four columns and two rows." The software has no way of knowing that the table is not really a table—that its purpose is visual layout, not data presentation—and is largely irrelevant to the nonvisual user.

Broadly speaking, whenever markup is used improperly on Web pages, the Web is weakened. Since structured documents are its basis, the Web is less robust—less effective—when structures are misused. On the other hand, pages that are coded properly strengthen the Web. The Web is at its best when structural markup is used to mark up page elements and CSS is used to position the elements on the page.

Implementing a layout using CSS can be difficult, particularly for complex, multicolumn designs. CSS support is inconsistent across browsers, so a layout that works perfectly in one browser may look a mess in another. Older browsers do not offer sufficient CSS support to accurately reproduce CSS layouts. To use CSS for page layout, designers must create designs that can withstand a degree of variation among browsers and accept that pages will look unstyled in older browsers (Figure 6.3).

Figure 6.3: Wired screenshot: standard and using Netscape 4.7

Figure 6.3: Layouts designed using style sheets do not always fare well in older browsers. Here, the Wired page displays without styling on Netscape 4.7 on the Macintosh. In some cases, CSS-based designs break when viewed in older browsers. www.wired.com

It may be that project requirements do not allow for the level of compromise that comes with CSS layout. For example, if a large percentage of the audience uses older, noncompliant browsers, CSS layout may not be an option. When consistency and backward compatibility are required, layout tables may be the only remedy. In these cases, minimize the affect of table layout by following the guidelines below.