<tr>: Das Table Row Element

Baseline Widely available

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

Das <tr> HTML-Element definiert eine Zeile von Zellen in einer Tabelle. Die Zellen der Zeile können dann mit einer Mischung aus <td> (Datenzelle) und <th> (Kopfzelle) Elementen erstellt werden.

Probieren Sie es aus

Attribute

Dieses Element enthält die globalen Attribute.

Veraltete Attribute

Die folgenden Attribute sind veraltet und sollten nicht mehr verwendet werden. Sie sind hier nur zur Referenz beim Aktualisieren bestehenden Codes und aus historischem Interesse dokumentiert.

align Veraltet

Gibt die horizontale Ausrichtung jeder Zeilenzelle an. Die möglichen aufgezählten Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der char-Wert den Textinhalt an dem durch das char-Attribut definierten Zeichen und dem durch das charoff-Attribut definierten Offset aus. Verwenden Sie die text-align CSS-Eigenschaft stattdessen, da dieses Attribut veraltet ist.

bgcolor Veraltet

Definiert die Hintergrundfarbe jeder Zeilenzelle. Der Wert ist eine HTML-Farbe; entweder ein 6-stelliger hexadezimaler RGB-Code, der mit einem # prefixiert ist, oder ein Farbname. Andere CSS <color> Werte werden nicht unterstützt. Verwenden Sie die background-color CSS-Eigenschaft stattdessen, da dieses Attribut veraltet ist.

char Veraltet

Gibt die Ausrichtung des Inhalts an einem Zeichen jeder Zeilenzelle an. Typische Werte hierfür umfassen einen Punkt (.) beim Versuch, Zahlen oder Geldwerte auszurichten. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert.

charoff Veraltet

Gibt die Anzahl der Zeichen an, um die der Inhalt der Zeilenzelle vom Ausrichtungszeichen, das durch das char-Attribut festgelegt wurde, verschoben wird.

valign Veraltet

Gibt die vertikale Ausrichtung jeder Zeilenzelle an. Die möglichen aufgezählten Werte sind baseline, bottom, middle und top. Verwenden Sie die vertical-align CSS-Eigenschaft stattdessen, da dieses Attribut veraltet ist.

Nutzungshinweise

  • Das <tr> Element ist nur als Kindelement eines <thead>, <tbody> oder <tfoot> Elements gültig.
  • Wenn das <tr> als direktes Kindelement seines übergeordneten <table> Elements platziert wird, wird der <tbody>-Elternteil impliziert und Browser fügen das <tbody> dem Markup hinzu.
  • Der implizierte <tbody>-Elternteil wird nur unterstützt, wenn die <table> sonst keine Kindelemente <tbody> hat und nur, wenn das <tr> nach allen <caption>, <colgroup> und <thead> Elementen enthalten ist.
  • Die CSS-Pseudoklassen :nth-of-type, :first-of-type und :last-of-type sind oft nützlich, um den gewünschten Satz von Zeilen und deren Daten- und Kopfzellen (<td> und <th> Elemente) auszuwählen.
  • Wenn ein <tr> als direktes Kindelement des <table> enthalten ist, da der Browser ein <tbody> zum Markup hinzufügt, funktionieren CSS-Selektoren wie table > tr möglicherweise nicht wie erwartet oder gar nicht.

Beispiele

Sehen Sie <table> für ein vollständiges Tabellenbeispiel, das gängige Standards und Best Practices einführt.

Grundlegende Zeileneinrichtung

Dieses Beispiel zeigt eine Tabelle mit vier Zeilen und drei Spalten, wobei die erste Spalte Kopfzeilen für die Zeilendatenzellen enthält.

HTML

Vier <tr>-Elemente werden verwendet, um vier Tabellenzeilen zu erstellen. Jede Zeile enthält drei Zellen - eine Kopfzelle (<th>) und zwei Datenzellen (<td>) - und schafft so drei Spalten. Das scope Attribut, das auf jeder Kopfzelle gesetzt ist, gibt an, auf welche Zellen sie sich beziehen, was in diesem Beispiel alle Datenzellen innerhalb der row sind.

html
<table>
  <tbody>
    <tr>
      <th scope="row">A</th>
      <td>Alfa</td>
      <td>AL fah</td>
    </tr>
    <tr>
      <th scope="row">B</th>
      <td>Bravo</td>
      <td>BRAH voh</td>
    </tr>
    <tr>
      <th scope="row">C</th>
      <td>Charlie</td>
      <td>CHAR lee</td>
    </tr>
    <tr>
      <th scope="row">D</th>
      <td>Delta</td>
      <td>DELL tah</td>
    </tr>
  </tbody>
</table>

CSS

Die CSS :nth-of-type Pseudoklasse wird verwendet, um jede ungerade Zeile auszuwählen und deren background-color auf einen etwas dunkleren Ton zu setzen, wodurch ein sogenannter "Zebra-Streifen"-Effekt entsteht. Dieser wechselnde Hintergrund macht die Datenzeilen in der Tabelle leichter zu verstehen und zu lesen - stellen Sie sich vor, Sie haben viele Zeilen und Spalten und versuchen, einige Daten in einer bestimmten Zeile zu finden. Darüber hinaus sind die Kopfzeilenzellen (<th> Elemente) mit einer background-color hervorgehoben, um sie von den Datenzellen (<td> Elemente) zu unterscheiden.

css
tr:nth-of-type(odd) {
  background-color: #eee;
}

tr th[scope="row"] {
  background-color: #d6ecd4;
}

Ergebnis

Kopfzeile

Dieses Beispiel erweitert die Basistabelle aus dem vorherigen Beispiel durch Hinzufügen einer Kopfzeile als erste Zeile der Tabelle.

HTML

Eine zusätzliche Tabellenzeile (<tr>) wird als erste Zeile der Tabelle mit Spaltenkopfzellen (<th>) hinzugefügt, die eine Kopfzeile für jede Spalte bereitstellen. Wir setzen diese Zeile in ein <thead> Gruppierungs-Element, um anzuzeigen, dass dies die Kopfzeile der Tabelle ist. Das scope Attribut wird zu jeder Kopfzelle (<th>) in dieser Kopfzeile hinzugefügt, um explizit anzugeben, dass jede Kopfzelle sich auf alle Zellen innerhalb ihrer eigenen Spalte bezieht, obwohl diese Zellen sich im <tbody> befinden.

html
<table>
  <thead>
    <tr>
      <th scope="col">Symbol</th>
      <th scope="col">Code word</th>
      <th scope="col">Pronunciation</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">A</th>
      <td>Alfa</td>
      <td>AL fah</td>
    </tr>
    <tr>
      <th scope="row">B</th>
      <td>Bravo</td>
      <td>BRAH voh</td>
    </tr>
    <tr>
      <th scope="row">C</th>
      <td>Charlie</td>
      <td>CHAR lee</td>
    </tr>
    <tr>
      <th scope="row">D</th>
      <td>Delta</td>
      <td>DELL tah</td>
    </tr>
  </tbody>
</table>

CSS

Das CSS ist fast unverändert vom vorherigen Beispiel, mit Ausnahme einiger zusätzlicher Stile, um die "Kopfzeile" hervorzuheben, so dass die Kopfzeilen der Spalten sich von den anderen Zellen abheben.

css
tr:nth-of-type(odd) {
  background-color: #eee;
}

tr th[scope="col"] {
  background-color: #505050;
  color: #fff;
}

tr th[scope="row"] {
  background-color: #d6ecd4;
}

Ergebnis

Zeilen sortieren

Es gibt keine nativen Methoden zum Sortieren der Zeilen (<tr>-Elemente) eines <table>. Aber unter Verwendung von Array.prototype.sort(), Node.removeChild und Node.appendChild kann eine benutzerdefinierte sort()-Funktion in JavaScript implementiert werden, um ein HTMLCollection von <tr>-Elementen zu sortieren.

HTML

Ein <tbody>-Element wird in dieser Basistabelle verwendet, um den Körperabschnitt der Tabelle zu markieren und um drei Zeilen (<tr>-Elemente) mit Daten (<td>-Elemente) einzufügen, die eine Spalte mit Zahlen in absteigender Reihenfolge erstellen.

html
<table>
  <tbody>
    <tr>
      <td>3</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
    </tr>
  </tbody>
</table>

JavaScript

Im folgenden JavaScript-Code wird die erstellte sort()-Funktion auf das <tbody>-Element angewendet, sodass es die Tabellenzellen in aufsteigender Reihenfolge sortiert und die Anzeige entsprechend aktualisiert.

js
HTMLTableSectionElement.prototype.sort = function (cb) {
  Array.from(this.rows)
    .sort(cb)
    .forEach((e) => this.appendChild(this.removeChild(e)));
};

document
  .querySelector("table")
  .tBodies[0].sort((a, b) => a.textContent.localeCompare(b.textContent));

Ergebnis

Zeilen sortieren durch Klick auf Kopfzellen

Dieses Beispiel erweitert die Basistabelle aus dem vorherigen Beispiel, indem es das Sortieren interaktiv und unabhängig für mehrere Spalten macht.

HTML

Eine zusätzliche Datenzelle (<td>-Element) wird zu jeder Zeile (<tr>-Element) im Tabellenkörper (<tbody>-Element) hinzugefügt, um eine zweite Spalte mit Buchstaben in aufsteigender Reihenfolge zu erstellen. Unter Verwendung des <thead>-Elements wird ein Kopfabschnitt vor dem Körperabschnitt hinzugefügt, um eine Kopfzeile mit Tabellenkopfzellen (<th>-Element) einzuführen. Diese Kopfzellen werden im folgenden JavaScript-Code verwendet, um sie anklickbar zu machen und dann das entsprechende Sortieren bei Aktivierung per Klick durchzuführen.

html
<table>
  <thead>
    <tr>
      <th>Numbers</th>
      <th>Letters</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3</td>
      <td>A</td>
    </tr>
    <tr>
      <td>2</td>
      <td>B</td>
    </tr>
    <tr>
      <td>1</td>
      <td>C</td>
    </tr>
  </tbody>
</table>

JavaScript

Ein Klick-Event-Handler wird zu jeder Tabellenkopfzeile (<th>-Element) jeder <table> im document hinzugefügt; er sortiert alle Zeilen (<tr>-Elemente) des <tbody> basierend auf den Inhalten der Datenzellen (<td>-Elemente), die in den Zeilen enthalten sind.

Hinweis: Diese Lösung geht davon aus, dass die <td>-Elemente durch reinen Text ohne untergeordnete Elemente befüllt sind.

js
const allTables = document.querySelectorAll("table");

for (const table of allTables) {
  const tBody = table.tBodies[0];
  const rows = Array.from(tBody.rows);
  const headerCells = table.tHead.rows[0].cells;

  for (const th of headerCells) {
    const cellIndex = th.cellIndex;

    th.addEventListener("click", () => {
      rows.sort((tr1, tr2) => {
        const tr1Text = tr1.cells[cellIndex].textContent;
        const tr2Text = tr2.cells[cellIndex].textContent;
        return tr1Text.localeCompare(tr2Text);
      });

      tBody.append(...rows);
    });
  }
}

Ergebnis

Hinweis: Um nutzbar und barrierefrei zu sein, muss die Kopfzelle jeder sortierbaren Spalte als Sortierbutton erkennbar sein und jede muss visuell und mit dem aria-sort-Attribut definieren, ob die Spalte gerade aufsteigend oder absteigend sortiert ist. Siehe das ARIA Authoring Practices Guide's sortable table example für weitere Informationen.

Technische Zusammenfassung

Inhaltskategorien Keine
Erlaubte Inhalte Null oder mehr <td> und/oder <th> Elemente; Script-unterstützende Elemente (<script> und <template>) sind ebenfalls erlaubt.
Tag-Auslassung Start-Tag ist obligatorisch. End-Tag kann ausgelassen werden, wenn das <tr>-Element unmittelbar von einem <tr>-Element gefolgt wird oder wenn die Zeile das letzte Element in ihrer übergeordneten Tabellengruppe (<thead>, <tbody> oder <tfoot>) ist.
Erlaubte Eltern <table> (nur, wenn die Tabelle kein <tbody>-Kindelement hat, und selbst dann nur nach allen <caption>, <colgroup> und <thead> Elementen); ansonsten muss der Elternteil ein <thead>, <tbody> oder <tfoot> Element sein.
Implizierte ARIA-Rolle row
Erlaubte ARIA-Rollen Beliebig
DOM-Schnittstelle [`HTMLTableRowElement`](/de/docs/Web/API/HTMLTableRowElement)

Spezifikationen

Specification
HTML Standard
# the-tr-element

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch