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.