Data Tables
Use table markup for data

Before styles were implemented and supported by client software, Web designers had no tools for laying out Web pages. HTML is not a tool for design and page layout; it is for defining document structure. As such, it is composed almost entirely of structural elements, with very few tags to describe visual properties. With the early versions of HTML, visual representation of structure was defined largely by the client software: for example, headings big and bold, quotations indented, and paragraphs separated by a blank line. Following strict HTML coding meant that Web designers really had very little chance to design their pages. With few options and little control, Web designers began to be creative in their use of HTML structures.

For example, no structural element exists to mark a banner or navigation bar. Yet these elements are commonly used on Web sites to establish site identity and to offer navigation links to other pages in the site. One common approach to producing this familiar layout is to use table markup to divide the page into different areas (Figure 5.1).

Figure 5.1: Bronx Zoo screenshot: with tables outlined

Figure 5.1: The Bronx Zoo pages are divided into sections—a site banner and site navigation across the top of the page, section navigation links in the left column, and the main content in the right column—using a layout table. www.bronxzoo.com

The trouble with this practice is that semantic markup, such as the tags used to describe tables, is intended to describe the function of elements. When these tags are misused, documents are no longer machine-readable in a way that is accurate and meaningful. Software cannot distinguish "real" tables from layout tables and will try to make sense of content that is within a table.

Before CSS, table markup was the only option for laying out Web pages; this is no longer the case. Style sheet positioning is widely supported by client software and is a far better tool for Web page layout (Figure 5.2).

Figure 5.2: NPR screenshot

Figure 5.2: NPR uses CSS to design its multicolumn layouts. www.npr.org