Tables with One Header

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.

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.

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.