Tables with Two Headers

This page covers tables that have a simple row header and a simple column header. In such tables, the relationship between the headers and data cells becomes quickly ambiguous. For such tables, use the <th> element to identify the header cells and the scope attribute to declare the direction of each header. The scope attribute can be set to row or col to denote that a header applies to the entire row or column, respectively.

Additionally, you can use the <caption> element to identify the table in a document. This is particularly useful for screen-reader users browsing the web page in “table mode” where they can navigate from table to table. More background and guidance on the using <caption> element is provided on the Caption & Summary page.

Table with header cells in the top row and first column

The following table of opening times has header information in both the top row and the first column. All header cells are marked up as <th> cells with scope attributes added.

In the header row, the col value for scope associates each header cell with the data cells in the column. In the header column, the row value associates the individual headers with their rows. Without this information, some users would not easily understand the relationship between header and data cells. In the example below, the “Open” and “Closed” labels are only useful if they can be assigned to a particular day and time.

Full code for “Table with header cells in the top row and first column”

Table with an offset column of header cells

In this table, the row header cells are in the second rather than in the first column. The approach is similar to the examples above: The scope of the header cells in the top row is set to col. By using the row value for scope assigns the header cells in the second column to the data cells on the left and the right of the individual header cell.

Full code for “Table with an offset column of header cells”