Data Tables
Simplify data table layouts

One of the more cumbersome aspects of Web documents is the scroll. With longer documents, users have no means of viewing a complete document, short of printing. Instead, pages must be viewed in segments. When documents are divided in this way, users may find it difficult to keep track of context, and may have to resort to scrolling up and down between sections (the equivalent of flipping between pages) to get a complete picture of the information.

When getting information from a table of data, context is essential. A cell of information has little meaning without the column and row headings that describe it. When we work with tables printed from spreadsheet or word-processing applications, these essential elements can be printed on each page. On a Web page, complex or lengthy tables will sometimes display with headings offscreen, or print with headings on a separate page.

When accessing tabular information, nonvisual users rely on software to provide context. A properly coded table enables software to announce the column and row headings that are associated with a table cell. However, a complex table with multiple dimensions and spanned columns or rows can be difficult for software to interpret effectively.

In general, the best way to design tables for visual and nonvisual users is to simplify the layout as much as possible. A simple table will be easier to scan, and easier for software to interpret. Rather than represent many information layers in one table, break the information into separate tables with a maximum of two dimensions (one row of column headings, one column of row headings) in each table (Figure 5.3).

Figure 5.3: W3Schools screenshot

Figure 5.3: W3Schools uses tables to provide details in its Web tutorials. On this page, rather than present all XHTML standard attributes as one complex, multidimensional table, the attributes are broken down into categories and presented in simple tables.