Was in einer Tabelle steckt 
veröffentlicht in
Das scope-Attribut
Mit dem scope-Attribut wird die Zuordnung einer einzelnen Kopfzelle zu den Datenzellen einer oder mehrerer Spalten, oder einer oder mehrerer Reihen festgelegt. Dadurch wird die Beziehung zwischen der Kopfzelle und den Datenzellen festgelegt.
Das scope-Attribut ist nur für das th-Element spezifiziert. Der Einsatz des scope-Attributs ist insbesondere bei Tabellen sinnvoll, in denen die Beziehungen zwischen Kopfzellen und Datenzellen anhand der Position der Kopfzellen nicht eindeutig ermittelt werden können. Eindeutige Beziehungen zwischen Kopfzellen und Datenzellen sind dann gegeben, wenn Kopfzellen ausschließlich am Anfang einer Reihe und/oder oben in einer Spalte stehen und sich keine Tabellenzelle über mehr als eine Reihe oder mehr als eine Spalte erstrecken.
Der Zweck eines scope-Attributs
In einer HTML-Tabelle bestehen Beziehungen zwischen Überschriften und Datenzellen. Diese Beziehungen ergeben sich aus der Anordnung der Zellen innerhalb der Tabelle. Browser verfügen über einen Algorithmus zur automatischen Ermittlung dieser Beziehungen und können einfache Tabellen ohne zusätzliche Angaben (zum Beispiel mit dem scope-Attribut) korrekt interpretieren.
Die Ermittlung der Beziehungen stößt jedoch an Grenzen, sobald Tabellen komplexere Beziehungen zwischen Kopfzellen und Datenzellen aufweisen. Dies betrifft beispielsweise Tabellen mit gestreckten Tabellenzellen oder Kopfzellen, die nicht ausschließlich in der ersten Reihe beziehungsweise ersten Spalte der Tabelle angeordnet sind.
In einigen Tabellen ermöglicht der Einsatz des scope-Attributs eine Zuweisung von Kopfzellen zu den Datenzellen in einer oder mehr Reihen, beziehungsweise einem oder mehr Spalten. Dadurch werden die Beziehungen zwischen Kopfzellen und Datenzellen in der Tabelle eindeutig und die Tabelle kann dadurch mit Screenreadern besser genutzt werden.
Werte für das scope-Attribut
Der HTML-Standard definiert vier Werte für das scope-Attribut:
- "row"
Die Kopfzelle erhält eine Beziehung zu einigen oder allen nachfolgenden Datenzellen derselben Reihe.
<tr>
<th scope="row">Berlin</th>
<td>3.879.000</td>
<td>891 km²</td>
</tr>- "col"
Die Kopfzelle erhält eine Beziehung zu einigen oder allen nachfolgenden Datenzellen derselben Spalte.
<tr>
<th scope="col">Name</th>
<th scope="col">Abteilung</th>
<th scope="col">Standort</th>
</tr>- "rowgroup"
Die Kopfzelle erhält eine Beziehung zu allen Zellen rechts von der Kopfzelle.
<tr>
<th scope="rowgroup" rowspan="2">Maße</th>
<td>Breite</td>
<td>100</td>
</tr>
<tr>
<td>Höhe</td>
<td>60</td>
</tr>Der Wert "rowgroup" für das
scope-Attribut bezieht sich auf die Zellen, die mit demrowspan-Attribut überspannt werden.- "colgroup"
Die Kopfzelle erhält eine Beziehung zu allen Zellen unterhalb der Kopfzelle.
<tr>
<th scope="colgroup" colspan="3">Geschäftsjahr 2025</th>
<th scope="colgroup" colspan="3">Geschäftsjahr 2026</th>
</tr>Der Wert "colgroup" für das
scope-Attribut bezieht sich auf die Zellen, die mit demcolspan-Attribut überspannt werden.
Beispiel
Der Einsatz des scope-Attributs kommt immer dann in Frage, wenn ein th-Element für sämtliche Tabellenzellen rechts oder unterhalb der Kopfzelle als Überschrift dient. Ein typischer Fall ist, wenn Kopfzellen in den ersten zwei Reihen einer Tabelle vorkommen. Auch wenn Kopfzellen über zwei Spalten oder Reihen gestreckt werden und dadurch als Kopfzelle für mehr als eine Spalte beziehungsweise mehr als eine Reihe dienen, ist der Einsatz des scope-Attributs meist praktikabel.
Im folgenden Bildschirmfoto sehen Sie eine zusätzliche Zelle (TH-Element) vor einer Sporttabelle, mit der die Abstiegszone markiert ist. Diese Zelle erstreckt sich über 3 Reihen (der rein technische Part mit rowspan="3") und weist sich selbst als Kopfzelle für diese drei Zeilen aus (der inhaltliche Part mit scope="rowgroup"). Beachten Sie, dass die Vergabe von rowspan nicht mit der automatischen Zuweisung als Kopfzelle für bestimmte Zellen gleichzusetzen ist – dieses Attribut bestimmt nur die Position der Zelle im Gitter.
Der HTML-Code für diesen Tabellenausschnitt könnte wie folgt aussehen:
<table>
<!-- Tabellenüberschrift und die ersten Reihen der Tabelle -->
<tr>
<th rowspan="3" scope="rowgroup">Abstieg</th>
<th>16.</th>
<td>TSV 1860 München</td>
<td class="up">↑</td>
<td>34</td>
<td>7</td>
<td>8</td>
<td>19</td>
<td>41:60</td>
<td>−19</td>
<td>22</td>
</tr>
<tr>
<th>17.</th>
<td>1. FC Saarbrücken</td>
<td class="down">↓</td>
<td>34</td>
<td>6</td>
<td>10</td>
<td>18</td>
<td>39:70</td>
<td>−31</td>
<td>22</td>
</tr>
<tr>
<th>18.</th>
<td>FC St. Pauli</td>
<td></td>
<td>34</td>
<td>6</td>
<td>6</td>
<td>22</td>
<td>44:86</td>
<td>−42</td>
<td>18</td>
</tr>
</table>
Grenzen für das scope-Attribut
Obwohl Browser die Beziehungen zwischen Kopfzellen und Datenzellen in vielen Fällen automatisch ermitteln können, haben Sie die Möglichkeit, diese Beziehung mit dem scope-Attribut explizit festzulegen. Mit zunehmender Komplexität der Tabelle steigt die Wahrscheinlichkeit, dass Browser die Beziehungen unterschiedlich interpretieren oder dass Assistenztechnologien zusätzliche Informationen benötigen. Der zusätzliche Einsatz des scope-Attributs kann diese Unsicherheiten reduzieren.
In komplexen Tabellen lassen sich nicht alle Beziehungen zwischen Kopfzellen und Datenzellen ausschließlich mit scope-Attributen abbilden. Manche komplexe Tabellen können Kopfzellen enthalten, die mehreren voneinander unabhängigen Bereichen gleichzeitig zugeordnet sind oder deren Beziehungen sich nicht allein durch die Anordnung in Spalten und Reihen zuweisen lassen. Für solche Fälle spezifiziert der HTML-Standard das headers-Attribut. Dabei verweist jede Tabellenzelle mit dem headers-Attribut explizit auf die id-Attribute zugehöriger Kopfzellen. Diese Technik ist zwar flexibler als das scope-Attribut, aber sie erfordert einen höheren Pflegeaufwand.