WAI Example: 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.

Date Event Venue
12 February Waltz with Strauss Main Hall
24 March The Obelisks West Wing
14 April The What Main Hall

WAI Example: 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