HTMLTableElement.createTHead() — Methode · JavaScript-Referenz

Signatur

HTMLTableElement.prototype.createTHead()

Beschreibung

createTHead() gibt den Tabellenkopf (<thead>) eines <table>-Elements zurück. Hat die Tabelle schon einen Kopf, bekommst du genau dieses Element zurück. Andernfalls wird ein neues <thead> erzeugt und eingefügt.

Wo das neue Element landet, ist genau festgelegt: vor dem ersten Kind-Element, das weder <caption> noch <colgroup> ist. Gibt es kein solches Element, wird der Kopf als letztes Kind angehängt. So bleibt die Tabelle gültig – die Beschriftung und die Spaltengruppen stehen immer vor dem Kopf, und <tbody> bzw. <tfoot> folgen danach.

Die Methode eignet sich gut, wenn du Tabellen dynamisch aufbaust, zum Beispiel aus JSON-Daten. Sie funktioniert wie „holen oder anlegen“: Du musst nicht vorher prüfen, ob schon ein Kopf da ist, und kannst den Code beliebig oft aufrufen, ohne doppelte Köpfe zu erzeugen. Zeilen fügst du danach mit insertRow() in das zurückgegebene Element ein, Zellen mit insertCell(). Für Kopfzellen (<th>) brauchst du allerdings document.createElement('th').

Rückgabewert

Typ

HTMLTableSectionElement

Beschreibung

Das vorhandene oder neu erzeugte <thead>-Element der Tabelle. Es ist identisch mit table.tHead.

Beispiele

Tabellenkopf erzeugen und mit Kopfzellen füllen

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

// insertCell() erzeugt <td> – für Kopfzellen brauchen wir <th>
for (const label of ['Name', 'Alter', 'Stadt']) {
  const th = document.createElement('th');
  th.scope = 'col';
  th.textContent = label;
  row.append(th);
}

document.body.append(table);
console.log(table.outerHTML);

<table><thead><tr><th scope="col">Name</th><th scope="col">Alter</th><th scope="col">Stadt</th></tr></thead></table>

Mehrfacher Aufruf gibt dasselbe Element zurück

const table = document.createElement('table');
const a = table.createTHead();
const b = table.createTHead();

console.log(a === b);
console.log(table.tHead === a);
console.log(table.querySelectorAll('thead').length);

true true 1

Einfügeposition nach caption und colgroup

const table = document.createElement('table');
table.createCaption().textContent = 'Umsätze 2024';
table.append(document.createElement('colgroup'));
table.createTBody();

table.createTHead();

console.log([...table.children].map(el => el.tagName));

["CAPTION", "COLGROUP", "THEAD", "TBODY"]

Tabelle dynamisch aus Daten aufbauen

const users = [
  { name: 'Anna', role: 'Admin' },
  { name: 'Ben', role: 'Redakteur' }
];

const renderTable = (data) => {
  const table = document.createElement('table');
  const headRow = table.createTHead().insertRow();
  for (const key of Object.keys(data[0])) {
    const th = document.createElement('th');
    th.textContent = key;
    headRow.append(th);
  }
  const tbody = table.createTBody();
  for (const item of data) {
    const tr = tbody.insertRow();
    for (const value of Object.values(item)) {
      tr.insertCell().textContent = value;
    }
  }
  return table;
};

document.body.append(renderTable(users));
console.log(document.querySelector('thead th').textContent);

name

// Wichtig · Fallstricke

Kein Duplikat: Hat die Tabelle schon ein <thead>, wird dieses zurückgegeben. Die Methode legt dann kein zweites an.
insertCell() erzeugt immer <td>, auch innerhalb von <thead>. Für richtige Kopfzellen brauchst du document.createElement('th'). Mit scope="col" werden die Kopfzellen für Screenreader zugänglich.
Entfernen: Mit deleteTHead() löschst du den Kopf wieder. Alternativ weist du table.tHead ein anderes <thead>-Element zu. Ein Element mit einem anderen Tag löst dabei einen HierarchyRequestError aus.
Sicherheit: Setze Werte mit textContent statt mit innerHTML, um XSS durch Benutzerdaten zu vermeiden.
Kompatibilität: Die Methode wird von allen Browsern unterstützt. Die genaue Einfügeposition (nach <caption> und <colgroup>) folgt dem HTML Living Standard. Sehr alte Browser haben den Kopf teilweise einfach als erstes Kind eingefügt.

Siehe auch

HTMLTableElement.createTBody() HTMLTableElement.createTFoot() HTMLTableElement.deleteTHead() HTMLTableElement.createCaption() HTMLTableElement.deleteRow()