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

View in English Always switch to English

<tr>: Das Tabellenzeilen-Element

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.

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> (Header-Zelle) Elementen erstellt werden.

Probieren Sie es aus

<table>
  <caption>
    Alien football stars
  </caption>
  <thead>
    <tr>
      <th scope="col">Player</th>
      <th scope="col">Gloobles</th>
      <th scope="col">Za'taak</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">TR-7</th>
      <td>7</td>
      <td>4,569</td>
    </tr>
    <tr>
      <th scope="row">Khiresh Odo</th>
      <td>7</td>
      <td>7,223</td>
    </tr>
    <tr>
      <th scope="row">Mia Oolong</th>
      <td>9</td>
      <td>6,219</td>
    </tr>
  </tbody>
</table>
th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

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

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

td {
  text-align: center;
}

tr:nth-of-type(even) {
  background-color: #eeeeee;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
}

Attribute

Dieses Element enthält die globalen Attribute.

Veraltete Attribute

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind hier zur Referenzierung bei der Aktualisierung bestehenden Codes und nur aus historischem Interesse dokumentiert.

align Veraltet

Gibt die horizontale Ausrichtung jeder Zeile an. Die möglichen enumerierten Werte sind left, center, right, justify und char. Wenn unterstützt, wird der char-Wert verwendet, um den Textinhalt an dem im char Attribut definierten Zeichen und dem im charoff Attribut definierten Offset auszurichten. Verwenden Sie stattdessen die text-align CSS-Eigenschaft, da dieses Attribut veraltet ist.

bgcolor Veraltet

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

char Veraltet

Gibt die Ausrichtung des Inhalts an ein Zeichen jeder Zeile an. Typische Werte hierfür beinhalten einen Punkt (.), wenn versucht wird, Zahlen oder Währungswerte auszurichten. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert.

charoff Veraltet

Gibt die Anzahl der Zeichen an, um welche der Zeileninhalt vom Ausrichtungszeichen, das durch das char Attribut spezifiziert ist, versetzt wird.

valign Veraltet

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

Nutzungshinweise

  • Das <tr>-Element ist nur als Kind eines <thead>, <tbody>, oder <tfoot> Elements gültig.
  • Wenn <tr> als direktes Kind des übergeordneten <table> Elements platziert wird, wird das <tbody>-Elternelement impliziert und Browser fügen das <tbody> dem Markup hinzu.
  • Das implizierte <tbody> Elternteil wird nur unterstützt, wenn die <table> sonst keine Kinder <tbody>-Elemente hat und nur wenn <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 Reihen und deren Daten- und Kopfzellen (<td> und <th> Elemente) zu selektieren.
  • Wenn ein <tr> als direktes Kind der <table> eingefügt wird, da der Browser ein <tbody> zum Markup hinzufügt, funktionieren CSS-Selektoren wie table > tr möglicherweise nicht wie erwartet oder überhaupt nicht.

Beispiele

Siehe <table> für ein vollständiges Tabellenbeispiel, das allgemeine Standards und Best Practices einführt.

Grundlegendes Zeilen-Setup

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

HTML

Vier <tr> Elemente werden verwendet, um vier Tabellenreihen zu erstellen. Jede Zeile enthält drei Zellen - eine Header-Zelle (<th>) und zwei Datenzellen (<td>) - und bildet drei Spalten. Das scope Attribut, das auf jede Header-Zelle gesetzt ist, spezifiziert, 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-Pseudoklasse :nth-of-type wird verwendet, um jede ungerade Zeile auszuwählen und die background-color dieser Zeilen auf einen leicht dunkleren Ton zu setzen, wodurch ein sogenannter „Zebra-Streifen“-Effekt entsteht. Dieser wechselnde Hintergrund erleichtert das Lesen der Zeilen in der Tabelle - 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 Header-Zellen der Zeilen (<th> Elemente) mit einer background-color hervorgehoben, um sie von den Datenzellen (<td> Elemente) zu unterscheiden.

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

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 platzieren diese Zeile in einem <thead> Gruppierungselement, um anzuzeigen, dass dies die Kopfzeile der Tabelle ist. Das scope Attribut wird jeder Kopfzeile (<th>) in dieser Kopfzeile hinzugefügt, um explizit anzugeben, dass jede Kopfzeile sich auf alle Zellen innerhalb ihrer eigenen Spalte bezieht, auch wenn sich diese Zellen 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 nahezu unverändert gegenüber dem vorherigen Beispiel, abgesehen von einer zusätzlichen Gestaltung, um die „Kopfzeile“ hervorzuheben, sodass die Spaltenköpfe sich von den anderen Zellen abheben.

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

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

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

Ergebnis

Zeilen sortieren

Es gibt keine nativen Methoden zum Sortieren der Zeilen (<tr>-Elemente) eines <table>. Aber mit Array.prototype.sort(), Node.removeChild und Node.appendChild kann eine benutzerdefinierte sort() Funktion in JavaScript implementiert werden, um eine 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) einzuschließen, wobei eine Spalte mit Zahlen in absteigender Reihenfolge erstellt wird.

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

JavaScript

Im unten stehenden JavaScript-Code wird die erstellte sort() Funktion an das <tbody>-Element angehängt, 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 mit einem Klick auf Kopfzellen

Dieses Beispiel erweitert die Basistabelle aus dem vorherigen Beispiel durch die Möglichkeit, die Sortierung interaktiv und unabhängig für mehrere Spalten zu gestalten.

HTML

Eine zusätzliche Datenzelle (<td> Element) wird jeder Zeile (<tr> Element) innerhalb des Tabellenkörpers (<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 unten stehenden JavaScript-Code verwendet, um sie anklickbar zu machen und dann beim Klick die entsprechende Sortierung 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-Ereignishandler wird jedem Tabellenkopf (<th> Element) jedes <table> im document hinzugefügt; er sortiert alle Zeilen (<tr>-Elemente) des <tbody> basierend auf dem Inhalt 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 werden.

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 benutzbar und zugänglich zu sein, muss die Kopfzelle jeder sortierbaren Spalte als Sortierknopf identifizierbar sein und jede muss optisch und mit dem aria-sort Attribut definieren, ob die Spalte derzeit in aufsteigender oder absteigender Reihenfolge sortiert ist. Siehe das ARIA Authoring Practices Guide's sortable table example für mehr Informationen.

Technische Zusammenfassung

Inhaltskategorien Keine
Erlaubter Inhalt Null oder mehr <td> und/oder <th> Elemente; script-supporting elements (<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 ihrem übergeordneten Tabellen-Element (<thead>, <tbody> oder <tfoot>) ist.
Erlaubte Elternteile <table> (nur, wenn die Tabelle kein Kind <tbody> Element hat, und selbst dann nur nach jedem <caption>, <colgroup>, und <thead> Element); ansonsten muss der Elternteil ein <thead>, <tbody> oder <tfoot> Element sein.
Implizite ARIA-Rolle row
Erlaubte ARIA-Rollen Beliebig
DOM-Schnittstelle [`HTMLTableRowElement`](/de/docs/Web/API/HTMLTableRowElement)

Spezifikationen

Specification
HTML
# the-tr-element

Browser-Kompatibilität

Siehe auch