Multi-directional Tables
When a table is more complex or the direction of its headers is not easy to distinguish, it is necessary to mark up the table headers using the <th>
element and use the scope
attribute to declare the direction of each header. Use the values of row
or col
of the scope
attribute 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 “tables mode” where they can navigate from table to table. The Caption & Summary page provides more background and guidance on the using <caption>
element.
Table with ambiguous data
In this example the first and last names and cities can’t be distinguished from one another without the appropriate header information. By using the scope
element with the value col
, the data cells are clearly associated with their header cells “Last Name”, “First Name” and “City”.
Last Name | First Name | City |
---|---|---|
Phoenix | Imari | Henry |
Zeki | Rome | Min |
Apirka | Kelly | Brynn |
Table with header cells in one column only
The following tables of countries and their capital cities has the first column with the country names marked up as <th>
cells. It needs the scope
attribute with the value of row
to declare the applicability of each header cell. Otherwise some screen readers will associate header cells with other header cells because they are in the same column. For example in the cell marked “Holland” some screen readers will read “Belgium – France – Holland” if the scope
attribute is not provided.
Belgium | Brussels |
---|---|
France | Paris |
Holland | Amsterdam |
Luxembourg | Luxembourg |
Spain | Madrid |
UK | London |
Further improvement
Building on the example above, adding a header row can help to make the table even clearer and describe the content of the data cells better.
Country | Capital city |
---|---|
Belgium | Brussels |
France | Paris |
Holland | Amsterdam |
Luxembourg | Luxembourg |
Spain | Madrid |
UK | London |
Full code Example “Table with header cells in one column only”
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.
Delivery slots:
Monday | Tuesday | Wednesday | Thursday | Friday | |
---|---|---|---|---|---|
09:00 - 11:00 | Closed | Open | Open | Closed | Closed |
11:00 - 13:00 | Open | Open | Closed | Closed | Closed |
13:00 - 15:00 | Open | Open | Open | Closed | Closed |
15:00 - 17:00 | Closed | Closed | Closed | Open | Open |
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 very 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 data cells on the left and the right of the individual header cell.
ID | Name | July | August | September | October | November | December |
---|---|---|---|---|---|---|---|
215 | Abel | 5 | 2 | 0 | 0 | 0 | 3 |
231 | Annette | 0 | 5 | 3 | 0 | 0 | 6 |
173 | Bernard | 2 | 0 | 0 | 5 | 0 | 0 |
141 | Gerald | 0 | 10 | 0 | 0 | 0 | 8 |
99 | Michael | 8 | 8 | 8 | 8 | 0 | 4 |
Full code for “Table with an offset column of header cells”
Related WCAG2.0 resources
Techniques: