<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
undchar
. Wenn unterstützt, richtet derchar
-Wert den Textinhalt an dem durch daschar
-Attribut definierten Zeichen und dem durch dascharoff
-Attribut definierten Offset aus. Verwenden Sie dietext-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 diebackground-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. Wennalign
nicht aufchar
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
undtop
. Verwenden Sie dievertical-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 wietable > 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.
<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.
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.
<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.
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.
<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.
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.
<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.
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
- Lernen: HTML Tabellen
<caption>
,<col>
,<colgroup>
,<table>
,<tbody>
,<td>
,<tfoot>
,<th>
,<thead>
: Andere tabellenbezogene Elementebackground-color
: CSS-Eigenschaft, um die Hintergrundfarbe jeder Zeilenzelle festzulegenborder
: CSS-Eigenschaft, um die Ränder der Zeilenzellen zu steuerntext-align
: CSS-Eigenschaft, um den Inhalt jeder Zeilenzelle horizontal auszurichtenvertical-align
: CSS-Eigenschaft, um den Inhalt jeder Zeilenzelle vertikal auszurichten:nth-of-type
,:first-of-type
,:last-of-type
: CSS-Pseudoklassen, um die gewünschten Zeilenzellen auszuwählen