Implementing Rule H
§ 1194.22 Web-based intranet and internet information and applications.
(h) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.
One Large Table or Many Smaller Tables?
Complex tables can be marked up as is, as described elsewhere on this page. However,
a good question to ask is: should the table even be that complex in the first place?
- A more complex table may be more difficult to understand.
- A larger table requires more time for the browser to calculate the size and then to render.
The complex table could be broken down into smaller tables.
Comparative summary tables can be created to go along with the data.
Methods for Marking Up Complex Tables
The scope, headers, and id attributes of table
columns can be used to associate header cells with data cells. In a fairly
straightforward table, these are not needed. In a complex table, they can be useful
to help linear browsers read aloud the headers so the cell data has meaning.
The example below uses two header rows; two of the columns in the first row each span two columns in the second row.
| Species Name | Initial Observations | Final Observations | ||
|---|---|---|---|---|
| Number of Leaves | Height | Number of Leaves | Height | |
| Pothos | 1 | 6 | 5 | 12 |
| Coleus | 2 | 3 | 28 | 18 |
All header columns are coded with the <th> tags and the scope="col" attribute.
The species name data cells are coded with the scope="row" attribute.
Note that some versions of Web site design packages (e.g., Dreamweaver MX 6.1, Homesite+ 5.2)
do not recognize the scope attribute.
At the heart of the issues involving marking up complex (or even ordinary) tables is how screen readers should allow navigation through the table for maximum efficiency. In the above table, suppose one wants to read the final height for each plant, by tabbing down the column. Then the plant name functionally serves as a row header, even though "species" is the column header. For that reason, you want to mark up certain column data elements as header elements.
If the reader wants to read across the row, then the species name can be toggled to be read once, and the remaining column headers read with their data.
Skip links to other Section 508 Rules and return to main content