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|
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|