This is a code example of a complex table with a two-row marked up for accessibility in terms of HEADERS and ID. This is useful for tables with two header rows, but requires that each cell in the table be indexed. Since this mechanism is only supported by a few screen readers, many experts recommend the use of multiple simple tables to display this information.
Example Complex Table
In the table below, color names in four languages are given, but the first row (which includes merged cells) indicates whether the language is the Romance language or the Celtic language family. This type of table might be used in a course discussing the difference between the two language families.
| Family | Romance Lang | Celtic | ||
|---|---|---|---|---|
| Color | Spanish | French | Irish | Welsh |
| Green | verde | vert | glas | gwyrdd |
| Blue | azul | bleu | gorm | glas |
| Black | negro | noir | dubh | du |
About the Tags
The following tags are used to mark the header and data cells.
- Header cells are marked with the TH tag with the ID attribute giving a header name.
- Header rows are enclosed within the THEAD tag
- Data cells are contained in TD cells with a header attribute which locates the row and column of the cell
- Data rows are enclosed within the TBODY tag
- And finally…the cells in the second row have both an ID attribute and a HEADER attribute.
How it works
To understand how this works, consider a data cell such as verde, the Spanish word for green. The position of the cell is in the Spanish column (which is in the Romance language column) and the the Green row. In terms of the table, the word is associated with "Spanish-Romance-green" properties. This is indicated with the headers="" attribute as follows.
<tr>...<td headers="spanish-romance-green">verde</td>...</tr> Each element separated by a dash refers to an ID in a TH cell. Some examples are given below.
<tr>...<th id="romance">Romance Language</th>...</tr>
<tr>...<th id="spanish" headers="romance">Spanish</th>...</tr><tr>...<th id="green">Green</th>...</tr>Putting them all together, this would be the code for the first three rows of the table above
View the Code
<table cellspacing="0" summary="Color names for black, white, red, blue, green, yellow in multiple languages, grouped by language family" class="chart">
<caption>
Color Names in Multiple Languages (Romance vs Celtic)
</caption>
<thead>
<tr>
<th id="fam" class="toplevel">Family</th>
<th id="rmc" class="toplevel" colspan="2">Romance Lang</th>
<th id="cel" class="toplevel" colspan="2">Celtic</th>
</tr>
<tr>
<th headers="hue">Color</th>
<th headers="rmc" id="es">Spanish</th>
<th headers="rmc" id="fr">French</th>
<th headers="cel" id="ga">Irish</th>
<th headers="cel" id="cy">Welsh</th>
</tr>
</thead>
<tbody>
<tr>
<th headers="hue" id="green">Green</th>
<td lang="es" headers="rmc es green">verde</td>
<td lang="fr" headers="rmc fr green">vert</td>
<td lang="ga" headers="cel ga green">glas</td>
<td lang="cy" headers="cel cy green">gwyrdd</td>
</tr>
...
</tbody></table>