Using table headers

Only a fraction of data tables on the Web make use of table headers, even though the
majority of tables include cell data that would be better placed within headers. The table
header cell element (<th></th>) performs a similar function to the standard table cell, but
is useful with regard to accessibility. Imagine a long data table comprised solely of standard
cells. The first row likely contains the headers, but because they’re not differentiated,
a screen reader might treat them as normal cells, read them once, and then continue reading
the remainder of the data. (If it doesn’t do this, it still has to assume which cells are
headers, and it might guess wrong.) When using table headers, the data is usually read in
context (header/data, header/data, and so on), enabling the user to make sense of everything.
Things can be sped up slightly by using the abbr attribute—long table headers can
be cut down, reducing what needs to be repeated when a table’s data is being read out.
An example of table header cells and a row of data cells follows:
<th>Country</th><th abbr="Capital">Capital city</th>
<td>France</td><td>Paris</td>
In this case, a screen reader should read the headers and then provide them with the data
of each cell (Country: France, Capital: Paris, etc.). But even with screen-based browsers, the
inclusion of headers proves beneficial for users, because table header cell content by
default is styled differently from data cell content, meaning the two cell types can be
easily differentiated.
Although headers are often at the top of a table, they may also be aligned down the lefthand
side. Therefore, you also need to specify whether the header provides header information
for the remainder of the row, column, row group, or column group that contains
it. This can be done with the scope attribute, which is added to the table header start tag
and given the relevant value (row, col, rowgroup, or colgroup). It’s also possible to use the
headers attribute in conjunction with id values. See the following “Scope and headers”
section for more information.