This page covers tables that have one simple header for rows or one simple header for columns. Data in such tables is descriptive on its own and unambiguous.
If the table content is ambiguous or has both column and row headings, the
scope attribute should be used to avoid confusion. For more guidance on such tables, see tables with two headers.
Table with header cells in the top row only
The following table of concerts has the cells in the first row marked up using the
<th> element. This is only acceptable because it is such a small table and the data itself is distinctly different in each column so that the relationship between the header and data cells is evident.
Note: Some screen readers will read “Date – Event – Venue” in the “Venue” cell because the direction of the
<th> elements is ambiguous.
|12 February||Waltz with Strauss||Main Hall|
|24 March||The Obelisks||West Wing|
|14 April||The What||Main Hall|
Table with header cells in the first column only
In the following table, the data from the previous example is laid out with the header column on the left. Also in this situation, it is only acceptable to use this code because it is such a small and straightforward table. The next pages in this tutorial explain how to code more complex tables.
|Date||12 February||24 March||14 April|
|Event||Waltz with Strauss||The Obelisks||The What|
|Venue||Main Hall||West Wing||Main Hall|
Table with ambiguous data
In this example, the data (first name, last name, and city) can’t be distinguished from one another without knowing which header each corresponds to. The
scope attribute with the value
col defines the direction of the header cells and associates them with the corresponding data cells. The
scope attribute is also needed for larger tables with one header row or column.
|Last Name||First Name||City|
Related WCAG resources
These tutorials provide best-practice guidance on implementing accessibility in different situations. This page combined the following WCAG success criteria and techniques from different conformance levels: