For instance, to create the table below correctly, we must set up three column groups and set scope="colgroup" on the headers that span two columns (using colspan):
| Winter | Summer | |||
|---|---|---|---|---|
| Morning | Afternoon | Morning | Afternoon | |
| Wilma | 9-11 | 12-6 | 7-11 | 12-3 |
| Fred | 10-11 | 12-6 | 9-11 | 12-5 |
The code would look like this:
<table align="center" border="1" cellspacing="0" cellpadding="5">
<colgroup></colgroup>
<colgroup span="2"></colgroup>
<colgroup span="2"></colgroup>
<tr>
<td rowspan="2"> </td>
<th colspan="2" scope="colgroup">Winter</th>
<th colspan="2" scope="colgroup">Summer</th>
</tr>
<tr>
<th scope="col">Morning</th>
<th scope="col">Afternoon</th>
<th scope="col">Morning</th>
<th scope="col">Afternoon</th>
</tr>
<tr>
<td scope="row">Wilma</td>
<td>9-11</td>
<td>12-6</td>
<td>7-11</td>
<td>12-3</td>
</tr>
<tr>
<td scope="row">Fred</td>
<td>10-11</td>
<td>12-6</td>
<td>9-11</td>
<td>12-5</td>
</tr>
</table>
First, we have three <colgroup> tags, one group holding the data headers on the left (Fred and Wilma), the next holding two columns (headed by Winter), and the third group containing the last two columns (Summer). Under the main headings at the top we have further headings, whose scope is just the column underneath them.
So, if a capable browser looks at, say, the cell with 7-11 in it, it can tell the user that this cell pertains to Wilma and is headed by Summer and Morning.
Referenced by: Tables Accessibility.