<tr> HTML Tabellenzeilenelement - HTML | MDN

Seitenleiste umschalten

Farbschema

Systemeinstellung
Hell
Dunkel

Deutsch

Sprache merken Mehr erfahren

<tr> HTML Tabellenzeilenelement

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

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

In diesem Artikel

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 umfasst die globalen Attribute.

Veraltete Attribute

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind unten dokumentiert, um bei der Aktualisierung bestehender Codes zu helfen und für historisches Interesse.

align

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

bgcolor

Definiert die Hintergrundfarbe jeder Zellreihe. Der Wert ist eine HTML-Farbe; entweder ein 6-stelliges hexadezimales RGB-Code, mit einem # präfixiert, oder ein Farbwort. Andere CSS <color> Werte werden nicht unterstützt. Verwenden Sie stattdessen die background-color CSS-Eigenschaft, da dieses Attribut veraltet ist.

char

Gibt die Ausrichtung des Inhalts auf ein Zeichen jeder Zellreihe an. Typische Werte hierfür sind ein Punkt (.), wenn versucht wird, Zahlen oder Geldwerte auszurichten. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert.

charoff

Gibt die Anzahl der Zeichen an, um den Zellreiheninhalt vom im char-Attribut angegebenen Ausrichtungszeichen zu versetzen.

valign

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

Verwendungshinweise

Das <tr>-Element ist nur als Kind eines <thead>, <tbody> oder <tfoot> Elements gültig.
Wenn das <tr> als direktes Kind seines übergeordneten <table> Elements platziert wird, wird das <tbody>-Elternteil impliziert und die Browser fügen es dem Markup hinzu.
Der implizierte <tbody>-Elternteil wird nur unterstützt, wenn die <table> ansonsten keine Kinder <tbody>-Elemente 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 Reihen und ihren Daten- und Kopfzellen (<td> und <th> Elemente) auszuwählen.
Wenn ein <tr> als direktes Kind der <table> enthalten ist, und der Browser ein <tbody> dem 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 gängige Standards und Best Practices einführt.

Grundlegende Zeileneinrichtung

Dieses Beispiel demonstriert eine Tabelle mit vier Zeilen und drei Spalten, wobei die erste Spalte Kopfzeilen für die Datenzellen der Zeile 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 jede 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 die background-color dieser Zeilen auf einen leicht dunkleren Ton einzustellen, wodurch ein sogenannter "Zebra-Streifen"-Effekt erzeugt wird. Dieser abwechselnde Hintergrund macht die Datenreihen in der Tabelle einfacher zu erfassen und zu lesen — stellen Sie sich vor, Sie haben viele Reihen und Spalten und versuchen, einige Daten in einer bestimmten Zeile zu finden. Darüber hinaus werden die Reihen-Kopfzellen (<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;
}

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

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

Ergebnis

Kopfzeile

Dieses Beispiel erweitert die grundlegende Tabelle aus dem vorherigen Beispiel, indem eine Kopfzeile als erste Zeile der Tabelle hinzugefügt wird.

HTML

Eine zusätzliche Tabellenzeile (<tr>) wird als erste Zeile der Tabelle mit Spaltenkopf-Zellen (<th>) hinzugefügt, die eine Kopfzeile für jede Spalte bieten. Wir platzieren diese Zeile in einem <thead> Gruppierungselement, um anzugeben, dass dies die Kopfzeile der Tabelle ist. Das scope Attribut wird zu jeder Kopfzeile (<th>) innerhalb dieser Kopfzeile hinzugefügt, um explizit anzugeben, dass sich jede Kopfzeile auf alle Zellen innerhalb ihrer eigenen Spalte bezieht, auch wenn 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 gegenüber dem vorherigen Beispiel, mit Ausnahme von zusätzlichem Styling, um die "Kopfzeile" hervorzuheben, sodass die Spaltenüberschriften 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;
}

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

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

Ergebnis

Sortieren von Zeilen

Es gibt keine nativen Methoden zum Sortieren der Zeilen (<tr> Elemente) eines <table>. Aber durch die Verwendung von 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, wodurch 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));

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

td {
  border: 1px solid rgb(160 160 160);
  padding: 4px 8px;
}

Ergebnis

Sortieren von Zeilen durch Klick auf Kopfzellen

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

HTML

Eine zusätzliche Datenzelle (<td> Element) wird zu jeder Zeile (<tr> Element) innerhalb des Tabellenkörpers (<tbody> Element) hinzugefügt, um eine zweite Spalte mit Buchstaben in aufsteigender Reihenfolge zu erstellen. Mit dem <thead> Element 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 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 Klickereignishandler wird zu jedem Tabellenkopf (<th> Element) jeder <table> im document hinzugefügt; er sortiert alle Zeilen (<tr> Elemente) der <tbody> basierend auf den Inhalten der Datenzellen (<td> Elemente) in den Zeilen.

Hinweis: Diese Lösung geht davon aus, dass die <td> Elemente durch reinen Text ohne untergeordnete Elemente gefü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);
    });
  }
}

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

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 4px 8px;
}

th {
  background-color: #505050;
  color: white;
  cursor: pointer;
}

Ergebnis

Hinweis: Um nutzbar und zugänglich zu sein, muss die Kopfzelle jeder sortierbaren Spalte als Sortierbutton erkennbar sein und jede muss definieren, ob die Spalte derzeit in aufsteigender oder absteigender Reihenfolge sortiert ist, visuell und mit dem aria-sort Attribut. Siehe das ARIA Authoring Practices Guide's sortable table Beispiel für weitere Informationen.

Technische Zusammenfassung

Inhaltskategorien Erlaubter Inhalt Tag-Auslassung Erlaubte Eltern Implizierte ARIA-Rolle Erlaubte ARIA-Rollen DOM-Schnittstelle

Keine

Null oder mehr <td> und/oder <th> Elemente; skriptunterstützende Elemente (<script> und <template>) sind ebenfalls erlaubt.

Start-Tag ist obligatorisch. End-Tag kann weggelassen werden, wenn das <tr> Element unmittelbar gefolgt wird von einem <tr> Element, oder wenn die Zeile das letzte Element in ihrer übergeordneten Tabellen-Gruppe (<thead>, <tbody> oder <tfoot>) Element ist.

<table> (nur wenn die Tabelle kein Kinder- <tbody> Element hat und selbst dann nur nach allen <caption>, <colgroup> und <thead> Elementen); ansonsten muss der Elternteil ein <thead>, <tbody> oder <tfoot> Element sein.

row

Beliebig

[`HTMLTableRowElement`](/de/docs/Web/API/HTMLTableRowElement)

Lernen: Grundlagen von HTML-Tabellen
<caption>, <col>, <colgroup>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>: Andere tabellenbezogene Elemente
background-color: CSS-Eigenschaft zum Setzen der Hintergrundfarbe jeder Zellreihe
border: CSS-Eigenschaft zur Steuerung der Grenzen von Zellreihen
text-align: CSS-Eigenschaft, um den Inhalt jeder Zellreihe horizontal auszurichten
vertical-align: CSS-Eigenschaft, um den Inhalt jeder Zellreihe vertikal auszurichten
:nth-of-type, :first-of-type, :last-of-type: CSS-Pseudoklassen zur Auswahl der gewünschten Zellreihen

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

<tr> HTML Tabellenzeilenelement

In diesem Artikel

Probieren Sie es aus

Attribute

Veraltete Attribute

Verwendungshinweise

Beispiele

Grundlegende Zeileneinrichtung

HTML

CSS

Ergebnis

Kopfzeile

HTML

CSS

Ergebnis

Sortieren von Zeilen

HTML

JavaScript

Ergebnis

Sortieren von Zeilen durch Klick auf Kopfzellen

HTML

JavaScript

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN