Complex Table HTML Example

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.

Color Names in Multiple Languages (Romance vs Celtic)
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">Family</th>
<th id="rmc" colspan="2">Romance Lang</th>
<th id="cel" colspan="2">Celtic</th>
</tr>
<tr>
<th headers="hue">Color</th>
<th headers="romance" id="es">Spanish</th>
<th headers="romance" id="fr">French</th>
<th headers="celtic" id="ga">Irish</th>
<th headers="celtic" id="cy">Welsh</th>
</tr>
</thead>
<tbody>
<tr>
<th headers="hue" id="green">Green</th>
<td lang="es" headers="romance-es-green">verde</td>
<td lang="fr" headers="romance-fr-green">vert</td>
<td lang="ga" headers="celtic-ga-green">glas</td>
<td lang="cy" headers="celtiv-cy-green">gwyrdd</td>
</tr>
...
</tbody></table>

Top of Page