Signatur
Beschreibung
Die Eigenschaft scope spiegelt das HTML-Attribut scope einer Tabellenzelle wider. Sie legt fest, auf welche Datenzellen sich eine Kopfzelle (<th>) bezieht: auf die Zeile ("row"), die Spalte ("col"), eine Zeilengruppe ("rowgroup") oder eine Spaltengruppe ("colgroup").
Wichtig ist das vor allem für die Barrierefreiheit. Screenreader lesen anhand dieser Zuordnung beim Navigieren durch eine Tabelle die passende Überschrift vor. Gerade bei Tabellen, in denen Kopfzellen sowohl oben als auch am linken Rand stehen, sorgt ein ausdrückliches scope für eine eindeutige Zuordnung.
Die Eigenschaft ist ein aufgezählter Wert (enumerated attribute). Beim Lesen erhältst du immer einen der vier erlaubten Werte in Kleinbuchstaben oder einen leeren String. Das gilt auch, wenn das Attribut fehlt, ungültig ist oder anders geschrieben wurde. Beim Schreiben wird der Wert unverändert als Attribut übernommen.
Laut Spezifikation hat scope nur bei <th>-Elementen eine Bedeutung. Bei <td> ist das Attribut in HTML5 veraltet und wird ignoriert.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $wert | "row" | "col" | "rowgroup" | "colgroup" | "" | "" | Neuer Wert beim Setzen. Gilt die Zelle für die Zeile, die Spalte, eine Zeilengruppe (<tbody>, <thead>, <tfoot>) oder eine Spaltengruppe (<colgroup>)? Ein leerer String bedeutet den automatischen Zustand. |
Rückgabewert
"row", "col", "rowgroup" oder "colgroup". Fehlt das Attribut oder ist es ungültig, kommt "" zurück. Der Browser bestimmt die Zuordnung dann selbst (auto).Beispiele
scope einer Kopfzelle auslesen
// HTML: <table><tr><th id="name" scope="COL">Name</th></tr></table>
const th = document.getElementById('name');
console.log(th.scope);
console.log(th.getAttribute('scope'));Fehlende scope-Attribute automatisch ergänzen
// Kopfzellen im <thead> gelten für Spalten, <th> im <tbody> für Zeilen
const table = document.querySelector('table');
table.querySelectorAll('thead th').forEach((th) => {
if (!th.scope) th.scope = 'col';
});
table.querySelectorAll('tbody th').forEach((th) => {
if (!th.scope) th.scope = 'row';
});
console.log([...table.querySelectorAll('th')].map((th) => th.scope));Barrierefreie Tabelle dynamisch erzeugen
const daten = [
{ stadt: 'Berlin', einwohner: 3_850_000 },
{ stadt: 'Hamburg', einwohner: 1_910_000 }
];
const table = document.createElement('table');
const kopf = table.createTHead().insertRow();
['Stadt', 'Einwohner'].forEach((text) => {
const th = document.createElement('th');
th.textContent = text;
th.scope = 'col';
kopf.append(th);
});
const body = table.createTBody();
for (const { stadt, einwohner } of daten) {
const row = body.insertRow();
const th = document.createElement('th');
th.textContent = stadt;
th.scope = 'row'; // Zeilenkopf
row.append(th);
row.insertCell().textContent = einwohner.toLocaleString('de-DE');
}
document.body.append(table);
console.log(table.querySelector('tbody th').outerHTML);Ungültige Werte
const th = document.createElement('th');
th.scope = 'spalte';
console.log(JSON.stringify(th.scope));
console.log(th.getAttribute('scope'));// Wichtig · Fallstricke
- Ungültige Werte: Setzt du einen ungültigen Wert wie
"spalte", landet er so im Attribut. Die Eigenschaft liefert beim Lesen aber"". Wenn du den tatsächlichen Attributinhalt brauchst, nimmgetAttribute('scope'). - Groß- und Kleinschreibung: Beim Lesen erhältst du immer Kleinbuchstaben. Aus
scope="ROW"wird also"row". - Nur für
<th>: Obwohl die Eigenschaft auch bei<td>existiert, istscopedort veraltet. Screenreader werten es nicht zuverlässig aus. - Komplexe Tabellen: Bei mehrstufigen oder unregelmäßigen Kopfzellen reicht
scopeoft nicht aus. Ordne Datenzellen dann ausdrücklich überheadersundidzu. - Kompatibilität: Wird von allen modernen Browsern unterstützt. Das Verhalten beim Lesen ungültiger Werte (leerer String) ist in aktuellen Browsern einheitlich. Sehr alte Versionen gaben teils den Rohwert zurück.