Was in einer Tabelle steckt 
veröffentlicht in
Das headers-Attribut
Das headers-Attribut kann für Tabellenzellen genutzt werden, um zugehörige Kopfzellen zu adressieren. Das headers-Attribut kann zum Einsatz kommen, wenn die Beziehungen zwischen Kopfzellen und anderen Tabellenzellen so komplex sind, dass Browser die Beziehungen nicht allein durch die Tabellenstruktur ermitteln können.
Das headers-Attribut kann sowohl für Datenzellen (td-Elemente) als auch für Kopfzellen (th-Elemente) eingesetzt werden. In der Praxis wird das Attribut überwiegend bei Datenzellen verwendet. Das Attribut adressiert eine oder mehrere durch Leerzeichen getrennte ID-Werte von Kopfzellen der gleichen Tabelle.
Zweck des headers-Attributs
Die Nutzbarkeit einer Tabelle in einem Screenreader hängt entscheidend von den Beziehungen zwischen Datenzellen und Kopfzellen ab. Browser können diese Beziehungen bei einfachen Tabellen automatisch ermitteln. Ebenso kann das scope-Attribut für viele Tabellen eingesetzt werden, deren Kopfzellen sich den Tabellenzellen in einer oder mehreren Reihen oder in einer oder mehreren Spalten eindeutig zuweisen lassen.
Das headers-Attribut ist für solche Tabellen geeignet, in denen Tabellenzellen nicht in der gleichen Reihe beziehungsweise nicht in der gleichen Spalte stehen wie eine oder mehrere zugehörige Kopfzellen. Damit eignet sich das headers-Attribut insbesondere für Tabellen mit
- mehreren Ebenen von Kopfzellen,
- verschachtelten Kategorien oder
- unregelmäßigen Tabellenstrukturen.
In mehrdimensionalen Tabellen oder in Tabellen, in denen Kopfzellen an beliebigen Stellen auftauchen können, bieten die headers- und id-Attribute die einzige Möglichkeit einer sinnvollen Verknüpfung von Kopfzellen und Tabellenzellen. Andere Techniken wie etwa das scope-Attribut scheiden hier aus, da sich die Tabellenzellen nicht zwangsläufig auf eine über ihre horizontale oder vertikale Achse eindeutig zugeordnete Kopfzelle beziehen.
Funktionsweise
Zunächst einmal müssen bei dieser Technik die zu adressierende Kopfzellen mit einer eindeutigen ID versehen werden (<th id="foo"> … </th>). Diese IDs werden dann von anderen Tabellenzellen über ihr headers-Attribut referenziert. Der Wert des headers-Attributs ist eine Liste von durch Leerzeichen getrennte Zeichenfolgen, die ein oder mehrere id-Attribute der Kopfzellen entsprechen.
Das folgende Beispiel zeigt das Grundprinzip:
<table>
<thead>
<tr>
<th id="name">Name</th>
<th id="ort">Ort</th>
</tr>
</thead>
<tr>
<td headers="name">Anna</td>
<td headers="ort">Berlin</td>
</tr>
</table>
Auch wenn dieses Beispiel ohne die headers- und id-Attribute auskommt, zeigt es bereits den grundlegenden Vorteil des headers-Attributs: Es können beliebige Kopfzellen mit Tabellenzellen verknüpft werden. Mit headers- und id-Attributen können Tabellenzellen verschiedene Kopfzellen zweifelsfrei adressieren, selbst wenn diese nicht auf der selben horizontalen oder vertikalen Achse wie die Tabellenzelle liegen.
Beispiel
Seine eigentliche Stärke entfaltet das headers-Attribut bei Tabellen mit mehreren Ebenen von Kopfzellen. Im folgenden Beispiel verweisen die Datenzellen auf mehrere Kopfzellen:
| Verpflegung | Aufwendungen für Unterbringung | Fahrtkosten | Zwischensumme, Datum: | |
|---|---|---|---|---|
| Frankfurt a.M. | ||||
| 15.10.2001 | 120,00 | 235,00 | 92,00 | 447,00 |
| 16.10.2001 | 54,50 | 225,00 | 92,00 | 371,50 |
| Zwischensumme: | 174,50 | 460,00 | 184,00 | 818,50 |
| Berlin | ||||
| 22.10.2001 | 189,00 | 220,00 | 75,00 | 484,00 |
| 23.10.2001 | 72,50 | 214,00 | 74,00 | 360,50 |
| Zwischensumme: | 261,50 | 434,00 | 149,00 | 844,50 |
| Gesamtsumme: | 436,00 | 894,00 | 333,00 | 1663,00 |
Jede Datenzelle verweist auf mehrere Kopfzellen:
- Die einzelnen Datenzellen verweisen auf eine Kopfzelle in der ersten Reihe und zwei Kopfzellen in der linken Spalte.
- Die Kopfzellen in der ersten Spalte für Zwischensummen verweisen zudem auf die zugehörige Kopfzelle mit dem Reiseziel.
Hinweis: Welche Überschriften von Screenreadern ausgegeben werden, kann im Screenreader eingestellt werden. Typischerweise werden Kopfzellen der oberen Reihen ausgegeben, wenn horizontal navigiert wird, und die Kopfzellen der linken Spalte, wenn vertikal navigiert wird.
Weitere Hinweise zum headers-Attribut
Im Gegensatz zum scope-Attribut ist das headers-Attribut nicht auf Kopfzellen in der gleichen Reihe oder in der gleichen Spalte beschränkt. Darüber hinaus kann eine Tabellenzelle beliebig viele Kopfzellen adressieren. Ebenso kann dieselbe Kopfzelle von einer beliebigen Anzahl von Tabellenzellen adressiert werden.
Der Vorteil der hohen Flexibilität geht mit einem höheren Pflegeaufwand einher. Diese Technik ist sicher die anfälligste für menschliche Fehler während der Erstellung einer komplexen Tabelle. Fehlende oder inkorrekt angegebene Werte für id- und headers-Attribute werden nur bei groben Schnitzern von Validatoren gefunden, sodass eine sehr präzise Arbeitsweise und eine detaillierte manuelle Nachkontrolle vonnöten sind. Aus diesem Grund empfiehlt der HTML-Standard, komplexe Tabellen zu vermeiden. Wenn komplexe Tabellen dennoch eingesetzt werden, dann muss der Aufbau der Tabelle beschrieben werden.