HTMLTableCellElement.headers — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTableCellElement.headers

Beschreibung

Die Eigenschaft headers von HTMLTableCellElement spiegelt das HTML-Attribut headers einer <td>- oder <th>-Zelle wider. Der Wert ist ein String mit einer oder mehreren IDs, getrennt durch Leerzeichen. Jede ID verweist auf ein <th>-Element derselben Tabelle, das als Überschrift für diese Zelle gilt.

Gebraucht wird das vor allem für Barrierefreiheit bei komplexen Tabellen, etwa mit mehrstufigen Kopfzeilen, verbundenen Zellen (colspan/rowspan) oder unregelmäßigem Aufbau. Bei solchen Tabellen reicht scope nicht mehr, um Zellen eindeutig ihren Überschriften zuzuordnen. Screenreader lesen die Überschriften, auf die headers verweist, beim Navigieren durch die Zellen vor.

Die Eigenschaft kann gelesen und geschrieben werden. Wenn du einen neuen Wert zuweist, wird das Attribut im DOM sofort aktualisiert. Ist kein Attribut gesetzt, ist der Rückgabewert ein leerer String. Um einzelne IDs zu verarbeiten, teilst du den String mit split(/\s+/) auf. Die passenden Elemente findest du dann über document.getElementById().

Parameter

Name	Typ	Default	Beschreibung
$value	string	""	Beim Setzen: durch Leerzeichen getrennte Liste von IDs der `<th>`-Elemente, z. B. `"q1 umsatz"`.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des headers-Attributs als String mit durch Leerzeichen getrennten IDs. Ist das Attribut nicht gesetzt, ein leerer String.

Beispiele

Zugeordnete Überschriften einer Zelle auslesen

// HTML:
// <table>
//   <tr><th id="produkt">Produkt</th><th id="q1">Q1</th></tr>
//   <tr><th id="apfel">Apfel</th><td id="zelle" headers="apfel q1">1200</td></tr>
// </table>
const zelle = document.getElementById('zelle');
console.log(zelle.headers);

const texte = zelle.headers
  .split(/\s+/)
  .filter(Boolean)
  .map((id) => document.getElementById(id)?.textContent.trim());

console.log(`${texte.join(' / ')}: ${zelle.textContent}`);

apfel q1 Apfel / Q1: 1200

Headers dynamisch beim Erzeugen einer Tabelle setzen

const tabelle = document.createElement('table');
const monate = ['jan', 'feb'];

const kopf = tabelle.insertRow();
kopf.appendChild(document.createElement('th')); // leere Ecke
for (const m of monate) {
  const th = document.createElement('th');
  th.id = `h-${m}`;
  th.textContent = m.toUpperCase();
  kopf.appendChild(th);
}

const zeile = tabelle.insertRow();
const rowTh = document.createElement('th');
rowTh.id = 'h-umsatz';
rowTh.textContent = 'Umsatz';
zeile.appendChild(rowTh);

for (const m of monate) {
  const td = zeile.insertCell();
  td.textContent = '100 €';
  td.headers = `h-umsatz h-${m}`; // setzt das Attribut
}

document.body.appendChild(tabelle);
console.log(zeile.cells[1].getAttribute('headers'));

h-umsatz h-jan

Defekte headers-Verweise finden (Barrierefreiheits-Check)

const pruefeHeaders = (table) => {
  const fehler = [];
  for (const cell of table.querySelectorAll('td[headers], th[headers]')) {
    for (const id of cell.headers.split(/\s+/).filter(Boolean)) {
      const ziel = document.getElementById(id);
      if (!ziel || ziel.tagName !== 'TH' || !table.contains(ziel)) {
        fehler.push({ zelle: cell.textContent.trim(), id });
      }
    }
  }
  return fehler;
};

console.table(pruefeHeaders(document.querySelector('table')));

// Wichtig · Fallstricke

Kein DOMTokenList: headers ist ein einfacher String. Methoden wie add() oder remove() wie bei classList gibt es nicht. Zum Bearbeiten teilst du den String auf und fügst ihn danach wieder zusammen.
Keine Prüfung der IDs: Der Browser kontrolliert nicht, ob die angegebenen IDs existieren oder auf <th>-Elemente derselben Tabelle zeigen. Ungültige Verweise ignorieren Hilfstechnologien einfach.
Bei einfachen Tabellen ist scope=\"col\"/scope=\"row\" auf <th> meist die bessere, pflegeleichtere Lösung. Setze headers nur bei komplexen Tabellen ein.
Wenn IDs in der Seite doppelt vorkommen, ist die Zuordnung nicht eindeutig. Achte daher auf eindeutige IDs, besonders bei dynamisch erzeugten Tabellen.
Kompatibilität: Die Eigenschaft wird in allen modernen Browsern unterstützt. Einige sehr alte Browser lieferten statt eines Strings eine DOMTokenList.

Siehe auch

HTMLSelectElement.labels HTMLTableCellElement.abbr HTMLTableCellElement.align HTMLTableCellElement.scope HTMLTableCellElement.vAlign