| Männlich | Weiblich | ||||||
|---|---|---|---|---|---|---|---|
| 18-39 J. | 40-65 J. | 18-39 J. | 40-65 J. | ||||
| Bayern | Hessen | Bayern | Hessen | Bayern | Hessen | Bayern | Hessen |
| 37.5% | 48.9% | 32.5% | 42.8% | 32.5% | 29.7% | 42.8% | 34.8% |
Die Verwendung von scope="col" würde in diesem Beispiel nicht funktionieren, da wir verschiedene Ebenen von Überschriften haben,
die sich über eine unterschiedliche Anzahl an Spalten erstrecken (3 Zeilen , die sich auf 4 (Geschlechtsangabe), 2 (Altersangabe) und 1 Spalte (Bundesland) beziehen).
Also habe ich hier auf eine andere Möglichkeit zur Herstellung der Beziehungen zwischen Überschriften und Datenzellen zurückgegriffen.
Im Quelltext wird schnell klar, wie dieses funktioniert. Jede Datenzelle bezieht sich auf die ihm zugehörigen Überschriften, und zwar mittels dem headers
Attribut, indem der Wert des id-Attributs der jeweiligen Überschrift aufgelistet wird. Wenn eine Datenzelle sich auf mehrere Überschriften bezieht, werden alle Überschriften ids in einer von Leerzeichen getrennten Liste angegeben, die oberste zuerst.
Wirklich eine Menge Arbeit pro Datenzelle, und zum Zeitpunkt, da dieses Beispiel generiert wurde unterstützt so gut wie kein Browser oder assistive Technologie diese Methode. Schade eigentlich
Folgender Auszeichnungstext wurde in diesem Beispiel verwendet:
<table summary="Hier erfolgt eine Beschreibung der Tabelle: Zweck und Struktur. Hauptsächlich für nicht-visuelle Benutzeragenten." frame="box">
<caption>Demographische Statistik über (...was auch immer) </caption>
<thead>
<tr>
<th colspan="4" id="male">Männlich</th>
<th colspan="4" id="female">Weiblich</th>
</tr>
<tr>
<th colspan="2" id="male-young">18-39 <abbr title="Jahre">J.</abbr></th>
<th colspan="2" id="male-old">40-65 J.</th>
<th colspan="2" id="female-young">18-39 J.</th>
<th colspan="2" id="female-old">40-65 J.</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>