| Male | Female | ||||||
|---|---|---|---|---|---|---|---|
| 18-39 yrs. | 40-65 yrs | 18-39 yrs | 40-65 yrs | ||||
| Bayern | Hessen | Bayern | Hessen | Bayern | Hessen | Bayern | Hessen |
| 37.5% | 48.9% | 32.5% | 42.8% | 32.5% | 29.7% | 42.8% | 34.8% |
As the scope="col" would fail in this example (regarding the different levels of headers we are having here, 3 rows, each of them spanning a different number of columns),
I used the example to show the other way HTML provides to associate headers and cells.
Just take a look at the source-code below to see what has happened here. Each data cell refers to its corresponding headers via the headers
attribute.
Each header cell is identified with a unique id. Now each data cell is marked up with the headers attribute where you have to list
every header id that applies to this cell, starting with the topmost first. Seperate the different ids with a space.
It is a lot of work to do for each row of data, and at time of this writing no user agent/adaptive technology really supports this method of header-cell association.
This is the markup I used:
<table summary="Here goes the description of the table's purpose and structure, mainly for non-visual media" frame="box">
<caption>Demographical values about (...whatever) </caption>
<thead>
<tr>
<th colspan="4" id="male">Male</th>
<th colspan="4" id="female">Female</th>
</tr>
<tr>
<th colspan="2" id="male-young">18-39 <abbr title="Years">yrs.</abbr></th>
<th colspan="2" id="male-old">40-65 yrs</th>
<th colspan="2" id="female-young">18-39 yrs</th>
<th colspan="2" id="female-old">40-65 yrs</th>
</tr>
<tr>
<th id="male-young-bay">Bayern</th>
<th id="male-young-hess">Hessen</th>
<th id="male-old-bay">Bayern</th>
<th id="male-old-hess">Hessen</th>
<th id="female-young-bay">Bayern</th>
<th id="female-young-hess">Hessen</th>
<th id="female-old-bay">Bayern</th>
<th id="female-old-hess">Hessen</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="male male-young male-young-bay">37.5%</td>
<td headers="male male-young male-young-hess">48.9%</td>
<td headers="male male-old male-old-bay">32.5%</td>
<td headers="male male-old male-old-hess">42.8%</td>
<td headers="female female-young female-young-bay">32.5%</td>
<td headers="female female-young female-young-hess">29.7%</td>
<td headers="female female-old female-old-bay">42.8%</td>
<td headers="female female-old female-old-hess">34.8%</td>
</tr>
</tbody>
</table>