Scope and headers of tables

Although table header cells provide a means of differentiating headers and other data, a
direct means of associating one with the other can be added via the use of various attributes.
For simple data tables, the scope attribute, added to table headers, provides an indication
of which data a heading refers to. For example, in the previous code block, the
table is oriented in columns—the headers are above their associated data. Therefore,
adding a scope attribute to the header cells, with a value of col, clearly defines this relationship—
and this is something that comes in handy for screen readers.
<th scope="col">Country</th><th scope="col">Capital city</th>
<td>France</td><td>Paris</td>
If the alignment of the table were changed, with the headers at the left, the row value
would instead be used.
<th scope="row">Country</th><td>France</td>
<th scope="row">Capital city</th><td>Paris</td>
Note that if a table header contains colspan or rowspan attributes—for example, if a
header, such as food, spanned two columns (thereby having the attribute/value pair
colspan="2") and had underneath two further headings, such as fruit and vegetables—
you could set scope="colgroup" in the table header start tag. The equivalent is true for
headers with a rowspan attribute, whereupon the scope value changes to rowgroup. In
such cases, you also need to use the colgroup/rowgroup elements.
These are positioned between the caption and thead of the table (see the following code,
and see the following section for an overview of the various structural elements of tables
combined).
<colgroup span="2">
<colgroup span="2">
<thead>
<tr>
<th scope="colgroup" colspan="2">Fruit</th>
<th scope="colgroup" colspan="2">Vegetable</th>
</tr>
<tr>
<th scope="col">Citrus</th>
<th scope="col">Berry</th>
<th scope="col">Root</th>
<th scope="col">Legume</th>
</tr>
</thead>
For more complex tables that have intricate structures, using many colspans or rowspans,
where it wouldn’t be immediately obvious where the relationship lies between a data
cell and a header, you can use id values and the headers element. Each table header cell
should be assigned a unique id value. Each table data cell that refers to one or more headers
requires a headers element. The value of the headers element is the id or ids that the
cell data refers to. Even for simpler data tables, this method can work well—see the following
code block for how our fruit and vegetables table snippet works with id and
headers.
<thead>
<tr>
<th id="fruit" colspan="2">Fruit</th>
<th id="vegetables" colspan="2">Vegetable</th>
</tr>
<tr>
<th id="citrus">Citrus</th>
<th id="berry" >Berry</th>
<th id="root" >Root</th>
<th id="legume" >Legume</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="fruit citrus">Lemon</td>
<td headers="fruit berry">Blueberry</td>
<td headers="vegetable root">Potato</td>
<td headers="vegetable legume">Pea</td>
</tr>
</tbody>
Note that the code blocks in this section are here to highlight the attributes and elements
being discussed—they should not be seen as examples of complete tables.

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.