HTMLTableElement — Schnittstelle · JavaScript-Referenz

Signatur

interface HTMLTableElement extends HTMLElement

Beschreibung

HTMLTableElement ist die DOM-Schnittstelle für <table>-Elemente. Sie erbt alle Fähigkeiten von HTMLElement und ergänzt sie um tabellenspezifische Eigenschaften wie caption, tHead, tFoot, tBodies und rows. Dazu kommen Methoden wie insertRow(), deleteRow(), createTHead(), createTFoot(), createTBody() und createCaption().

Die wichtigsten Mitglieder im Überblick:

rows – eine live HTMLCollection aller <tr>-Elemente der Tabelle (einschließlich thead, tbody und tfoot).
tBodies – live HTMLCollection aller <tbody>-Elemente.
tHead / tFoot / caption – das jeweilige Element oder null; lassen sich auch zuweisen.
insertRow(index = -1) – fügt eine neue Zeile ein und gibt ein HTMLTableRowElement zurück.
deleteRow(index) – entfernt die Zeile am angegebenen Index (-1 = letzte Zeile).
createTHead(), createTFoot(), createCaption() – geben das vorhandene Element zurück oder legen es neu an; die passenden delete…()-Methoden entfernen es.
createTBody() – legt immer ein neues <tbody> nach dem letzten vorhandenen an.

Die Schnittstelle eignet sich besonders dann, wenn Tabellen dynamisch aus Daten (z. B. einer API-Antwort) aufgebaut, sortiert oder gefiltert werden sollen. Gegenüber innerHTML ist der Aufbau über insertRow() und insertCell() sicherer, weil keine HTML-Zeichenketten geparst werden.

Parameter

Name	Typ	Default	Beschreibung
$index (insertRow)	number	-1	Position der neuen Zeile innerhalb von `rows`. `-1` oder gleich `rows.length` hängt am Ende an.
$index (deleteRow) Pflicht	number		Index der zu löschenden Zeile in `rows`; `-1` löscht die letzte Zeile.

Rückgabewert

Typ

HTMLTableElement

Beschreibung

Wird z. B. von document.createElement("table") oder document.querySelector("table") geliefert. insertRow() gibt ein HTMLTableRowElement zurück, createTHead()/createTFoot()/createTBody() ein HTMLTableSectionElement, createCaption() ein HTMLTableCaptionElement.

Beispiele

Tabelle aus Daten erzeugen

const users = [
  { name: 'Anna', city: 'Berlin' },
  { name: 'Ben', city: 'Hamburg' }
];

const table = document.createElement('table');
table.createCaption().textContent = 'Benutzerliste';

// Kopfzeile
const headRow = table.createTHead().insertRow();
for (const label of ['Name', 'Stadt']) {
  const th = document.createElement('th');
  th.textContent = label;
  headRow.append(th);
}

// Datenzeilen
const tbody = table.createTBody();
for (const { name, city } of users) {
  const row = tbody.insertRow();
  row.insertCell().textContent = name;
  row.insertCell().textContent = city;
}

document.body.append(table);
console.log(table.rows.length);

3

Zeilen löschen und Bereiche abfragen

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

console.log(table instanceof HTMLTableElement); // true
console.log(table.tHead !== null, table.tBodies.length);

// letzte Zeile entfernen
table.deleteRow(-1);

// Fußzeile mit Summe ergänzen
const foot = table.createTFoot();
foot.replaceChildren();
const sumRow = foot.insertRow();
sumRow.insertCell().textContent = 'Summe';
sumRow.insertCell().textContent = '129,90 €';

true true 1

Tabelle nach Spalte sortieren

const sortTable = (table, colIndex) => {
  const tbody = table.tBodies[0];
  // Live-Collection in Array kopieren, bevor sortiert wird
  const rows = Array.from(tbody.rows);
  rows.sort((a, b) =>
    a.cells[colIndex].textContent.localeCompare(
      b.cells[colIndex].textContent, 'de'
    )
  );
  tbody.append(...rows); // verschiebt vorhandene Zeilen
};

sortTable(document.querySelector('table'), 0);

// Wichtig · Fallstricke

Live-Collections: rows und tBodies aktualisieren sich automatisch. Wer in einer Schleife Zeilen löscht, sollte rückwärts iterieren oder vorher mit Array.from() kopieren.
insertRow() auf der Tabelle: Ist kein <tbody> vorhanden, wird ein neues angelegt; sonst landet die Zeile im Abschnitt der Referenzzeile bzw. im letzten tbody. Für eindeutige Ergebnisse besser direkt tbody.insertRow() verwenden.
Ein ungültiger Index (kleiner als -1 oder größer als rows.length) wirft bei insertRow()/deleteRow() eine IndexSizeError-DOMException.
insertCell() erzeugt immer <td>; Kopfzellen (<th>) müssen mit document.createElement('th') angelegt werden.
Veraltete Eigenschaften wie align, border, bgColor, cellPadding, cellSpacing, frame, rules, summary und width sind deprecated – stattdessen CSS verwenden.
Sicherheit: Daten mit textContent statt innerHTML in Zellen schreiben, um XSS zu vermeiden.
Kompatibilität: Die Schnittstelle wird von allen gängigen Browsern seit Langem unterstützt.

Siehe auch

HTMLTitleElement HTMLBaseElement HTMLLabelElement HTMLStyleElement HTMLTableColElement