Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

HTMLTableElement

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

* Some parts of this feature may have varying levels of support.

Die HTMLTableElement Schnittstelle bietet spezielle Eigenschaften und Methoden (zusätzlich zur regulären HTMLElement Objekt-Schnittstelle, die es ebenfalls durch Vererbung verfügbar hat) zur Manipulation der Layout- und Präsentationsdarstellung von Tabellen in einem HTML-Dokument.

EventTarget Node Element HTMLElement HTMLTableElement

Instanzeigenschaften

Erbt Eigenschaften von seinem Elternteil, HTMLElement.

HTMLTableElement.caption

Ein HTMLTableCaptionElement, das das erste <caption> darstellt, das ein Kind des Elements ist, oder null, wenn keines gefunden wird. Wenn gesetzt, wird ein DOMException mit dem Namen HierarchyRequestError ausgelöst, falls das Objekt kein <caption> darstellt. Wird ein korrektes Objekt übergeben, wird es als erstes Kind dieses Elements in den Baum eingefügt und das erste <caption>, das ein Kind dieses Elements ist, wird aus dem Baum entfernt, falls vorhanden.

HTMLTableElement.tHead

Ein HTMLTableSectionElement, das das erste <thead> darstellt, das ein Kind des Elements ist, oder null, wenn keines gefunden wird. Wenn gesetzt, wird ein DOMException mit dem Namen HierarchyRequestError ausgelöst, falls das Objekt kein <thead> darstellt. Wird ein korrektes Objekt übergeben, wird es im Baum unmittelbar vor dem ersten Element eingefügt, das weder ein <caption> noch ein <colgroup> ist, oder als letztes Kind, wenn kein solches Element vorhanden ist, und das erste <thead>, das ein Kind dieses Elements ist, wird aus dem Baum entfernt, falls vorhanden.

HTMLTableElement.tFoot

Ein HTMLTableSectionElement, das das erste <tfoot> darstellt, das ein Kind des Elements ist, oder null, wenn keines gefunden wird. Wenn gesetzt, wird ein DOMException mit dem Namen HierarchyRequestError ausgelöst, falls das Objekt kein <tfoot> darstellt. Wird ein korrektes Objekt übergeben, wird es im Baum unmittelbar vor dem ersten Element eingefügt, das weder ein <caption>, ein <colgroup> noch ein <thead> ist, oder als letztes Kind, wenn kein solches Element vorhanden ist, und das erste <tfoot>, das ein Kind dieses Elements ist, wird aus dem Baum entfernt, falls vorhanden.

HTMLTableElement.rows Schreibgeschützt

Gibt eine lebende HTMLCollection zurück, die alle Zeilen des Elements enthält, d.h. alle <tr>, die ein Kind des Elements sind oder ein Kind eines seiner <thead>, <tbody> und <tfoot> Kinder. Die Reihenfolgen der Zeilen in einem <thead> erscheinen zuerst in der Baumreihenfolge, und diese in einem <tbody> zuletzt, ebenfalls in der Baumreihenfolge. Die HTMLCollection ist live und wird automatisch aktualisiert, wenn sich das HTMLTableElement ändert.

HTMLTableElement.tBodies Schreibgeschützt

Gibt eine lebende HTMLCollection zurück, die alle <tbody> des Elements enthält. Die HTMLCollection ist live und wird automatisch aktualisiert, wenn sich das HTMLTableElement ändert.

Veraltete Eigenschaften

Warnung: Die folgenden Eigenschaften sind veraltet. Sie sollten diese vermeiden.

HTMLTableElement.align Veraltet

Ein String, der einen enumerierten Wert enthält, der das align Attribut wiedergibt. Er gibt die Ausrichtung des Inhalts des Elements im Verhältnis zum umgebenden Kontext an. Die möglichen Werte sind "left", "right" und "center".

HTMLTableElement.bgColor Veraltet

Ein String, der die Hintergrundfarbe der Zellen enthält. Er gibt das veraltete bgColor Attribut wieder.

HTMLTableElement.border Veraltet

Ein String, der die Breite in Pixeln des Rahmens der Tabelle enthält. Er gibt das veraltete border Attribut wieder.

HTMLTableElement.cellPadding Veraltet

Ein String, der die Breite in Pixeln des horizontalen und vertikalen Abstands zwischen Zellinhalt und Zellrändern enthält. Er gibt das veraltete cellpadding Attribut wieder.

HTMLTableElement.cellSpacing Veraltet

Ein String, der die Breite in Pixeln des horizontalen und vertikalen Abstands zwischen Zellen enthält. Er gibt das veraltete cellspacing Attribut wieder.

HTMLTableElement.frame Veraltet

Ein String, der den Typ der äußeren Ränder der Tabelle enthält. Er gibt das veraltete frame Attribut wieder und kann einen der folgenden Werte annehmen: "void", "above", "below", "hsides", "vsides", "lhs", "rhs", "box" oder "border".

HTMLTableElement.rules Veraltet

Ein String, der den Typ der inneren Ränder der Tabelle enthält. Er gibt das veraltete rules Attribut wieder und kann einen der folgenden Werte annehmen: "none", "groups", "rows", "cols" oder "all".

HTMLTableElement.summary Veraltet

Ein String, der eine Beschreibung des Zwecks oder der Struktur der Tabelle enthält. Er gibt das veraltete summary Attribut wieder.

HTMLTableElement.width Veraltet

Ein String, der die Länge in Pixeln oder in Prozent der gewünschten Breite der gesamten Tabelle enthält. Er gibt das veraltete width Attribut wieder.

Instanzmethoden

Erbt Methoden von seinem Elternteil, HTMLElement.

HTMLTableElement.createTHead()

Gibt ein HTMLTableSectionElement zurück, das das erste <thead> darstellt, das ein Kind des Elements ist. Wenn keines gefunden wird, wird ein neues erstellt und im Baum unmittelbar vor dem ersten Element eingefügt, das weder ein <caption> noch ein <colgroup> ist, oder als letztes Kind, wenn kein solches Element vorhanden ist.

HTMLTableElement.deleteTHead()

Entfernt das erste <thead>, das ein Kind des Elements ist.

HTMLTableElement.createTFoot()

Gibt ein HTMLTableSectionElement zurück, das das erste <tfoot> darstellt, das ein Kind des Elements ist. Wenn keines gefunden wird, wird ein neues erstellt und im Baum als letztes Kind eingefügt.

HTMLTableElement.deleteTFoot()

Entfernt das erste <tfoot>, das ein Kind des Elements ist.

HTMLTableElement.createTBody()

Gibt ein HTMLTableSectionElement zurück, das ein neues <tbody> darstellt, das ein Kind des Elements ist. Es wird im Baum nach dem letzten <tbody> Element eingefügt, oder als letztes Kind, wenn kein solches Element vorhanden ist.

HTMLTableElement.createCaption()

Gibt ein HTMLElement zurück, das das erste <caption> darstellt, das ein Kind des Elements ist. Wenn keines gefunden wird, wird ein neues erstellt und im Baum als erstes Kind des <table> Elements eingefügt.

HTMLTableElement.deleteCaption()

Entfernt das erste <caption>, das ein Kind des Elements ist.

HTMLTableElement.insertRow()

Gibt ein HTMLTableRowElement zurück, das eine neue Zeile der Tabelle darstellt. Es wird in die Zeilen-Sammlung sofort vor dem <tr> Element an der angegebenen Index-Position eingefügt. Bei Bedarf wird ein <tbody> erstellt. Wenn der Index -1 ist, wird die neue Zeile an das Ende der Sammlung angehängt. Wenn der Index kleiner als -1 oder größer als die Anzahl der Zeilen in der Sammlung ist, wird eine DOMException mit dem Wert IndexSizeError ausgelöst.

HTMLTableElement.deleteRow()

Entfernt die der angegebenen Index-Position entsprechende Zeile. Wenn der Index-Wert -1 ist, wird die letzte Zeile entfernt; wenn er kleiner als -1 oder größer als die Anzahl der Zeilen in der Sammlung ist, wird eine DOMException mit dem Wert IndexSizeError ausgelöst.

Beispiele

Verwendung der DOM-Tabellenschnittstelle

Die HTMLTableElement Schnittstelle bietet einige bequeme Methoden zum Erstellen und Manipulieren von Tabellen. Zwei häufig verwendete Methoden sind HTMLTableElement.insertRow und HTMLTableRowElement.insertCell.

Um eine Zeile und einige Zellen zu einer bestehenden Tabelle hinzuzufügen:

html
<table id="table0">
  <tbody>
    <tr>
      <td>Row 0 Cell 0</td>
      <td>Row 0 Cell 1</td>
    </tr>
  </tbody>
</table>
js
const table = document.getElementById("table0");
const row = table.insertRow(-1);

for (let i = 0; i < 2; i++) {
  const cell = row.insertCell(-1);
  const text = `Row ${row.rowIndex} Cell ${i}`;
  cell.appendChild(document.createTextNode(text));
}

Spezifikationen

Specification
HTML
# htmltableelement

Browser-Kompatibilität

Siehe auch

  • Das HTML-Element, das diese Schnittstelle implementiert: <table>.