HTMLTableCellElement — Schnittstelle · JavaScript-Referenz

Signatur

interface HTMLTableCellElement extends HTMLElement

Beschreibung

HTMLTableCellElement ist die DOM-Schnittstelle für Daten- und Kopfzellen einer HTML-Tabelle, also für <td>- und <th>-Elemente. Sie erbt alle Eigenschaften und Methoden von HTMLElement und ergänzt sie um tabellenspezifische Eigenschaften für Layout und Barrierefreiheit.

Die wichtigsten Eigenschaften sind:

colSpan (number): Anzahl der Spalten, über die sich die Zelle erstreckt (Attribut colspan, Standard 1).
rowSpan (number): Anzahl der Zeilen, über die sich die Zelle erstreckt (Attribut rowspan, Standard 1; 0 bedeutet „bis zum Ende der Zeilengruppe“).
cellIndex (number, nur lesbar): Position der Zelle innerhalb ihrer Zeile (tr.cells), oder -1, wenn sie keiner Zeile angehört.
headers (string): Leerzeichengetrennte Liste von IDs der <th>-Elemente, die diese Zelle beschreiben.
scope (string): Nur bei <th> sinnvoll – "row", "col", "rowgroup", "colgroup" oder leer.
abbr (string): Kurzform des Zellinhalts, z. B. für Screenreader.

Man nutzt die Schnittstelle vor allem beim dynamischen Aufbau von Tabellen (etwa über HTMLTableRowElement.insertCell()), beim Auswerten von Klicks auf Zellen (Spalte über cellIndex ermitteln) oder beim Zusammenführen von Zellen per colSpan/rowSpan. Ob es sich um eine Kopf- oder Datenzelle handelt, erkennt man über cell.tagName bzw. cell.localName.

Rückgabewert

Typ

HTMLTableCellElement

Beschreibung

Instanzen entstehen über document.createElement("td")/("th"), HTMLTableRowElement.insertCell() oder durch Abfragen vorhandener Zellen – ein direkter Konstruktoraufruf ist nicht möglich.

Beispiele

Zellen erzeugen und Spalten zusammenführen

const table = document.createElement('table');
const row = table.insertRow();

// Datenzelle über insertCell()
const cell = row.insertCell();
cell.textContent = 'Gesamtsumme';
cell.colSpan = 3;

// Kopfzelle über createElement
const th = document.createElement('th');
th.textContent = 'Umsatz';
th.scope = 'col';
th.abbr = 'Ums.';

console.log(cell instanceof HTMLTableCellElement, th instanceof HTMLTableCellElement);
console.log(cell.outerHTML);
document.body.append(table);

true true <td colspan="3">Gesamtsumme</td>

Geklickte Spalte per cellIndex ermitteln

const table = document.querySelector('#preise');

table.addEventListener('click', (event) => {
  const cell = event.target.closest('td, th');
  if (!cell || !table.contains(cell)) return;

  const row = cell.parentElement;
  const header = table.tHead?.rows[0]?.cells[cell.cellIndex];
  console.log(`Zeile ${row.rowIndex}, Spalte ${cell.cellIndex}: ${header?.textContent ?? '?'}`);
});

Zeile 2, Spalte 1: Preis

Barrierefreie Kopfzuordnung mit headers und scope

const [th] = document.querySelectorAll('#bericht th');
th.id = 'q1';
th.scope = 'col';

document.querySelectorAll('#bericht tbody td:first-child').forEach((td) => {
  td.headers = 'q1';
});

const first = document.querySelector('#bericht tbody td');
console.log(first.headers, th.scope);

q1 col

// Wichtig · Fallstricke

cellIndex ist nicht die visuelle Spalte: Es zählt nur die Position in row.cells. Bei colSpan/rowSpan in vorherigen Zellen oder Zeilen weicht die tatsächliche Spalte ab – dann muss man ein Rastermodell der Tabelle selbst berechnen.
Werte für colSpan werden auf 1–1000, für rowSpan auf 0–65534 begrenzt; ungültige Werte fallen auf den Standardwert zurück.
scope wirkt nur bei <th>; bei <td> wird es ignoriert. Ungültige Werte liefern beim Lesen einen leeren String.
Veraltete Eigenschaften wie align, bgColor, width, height, noWrap, vAlign, axis, ch und chOff sind abgekündigt – stattdessen CSS verwenden.
Früher gab es getrennte Schnittstellen HTMLTableDataCellElement und HTMLTableHeaderCellElement; diese wurden entfernt. Heute sind beide Zelltypen HTMLTableCellElement.
Kompatibilität: in allen modernen Browsern unterstützt; abbr, headers und scope werden von Screenreadern ausgewertet.

Siehe auch

HTMLSelectedContentElement HTMLTableColElement HTMLTableElement HTMLTableRowElement HTMLLabelElement