<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.
* 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 durch eine Mischung von <td>
(Datenzelle) und <th>
(Header-Zelle) Elementen festgelegt werden.
Probieren Sie es aus
<table>
<caption>
Alien football stars
</caption>
<tr>
<th scope="col">Player</th>
<th scope="col">Gloobles</th>
<th scope="col">Za'taak</th>
</tr>
<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>
</table>
th,
td {
border: 1px solid rgb(160 160 160);
padding: 8px 10px;
}
th[scope="col"] {
background-color: #505050;
color: #fff;
}
th[scope="row"] {
background-color: #d6ecd4;
}
td {
text-align: center;
}
tr:nth-of-type(even) {
background-color: #eee;
}
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 unten zur Referenzierung beim Aktualisieren des vorhandenen Codes und aus historischem Interesse dokumentiert.
align
Veraltet-
Gibt die horizontale Ausrichtung jeder Zeilenzelle an. Die möglichen enumerierten Werte sind
left
,center
,right
,justify
undchar
. Wenn unterstützt, richtet derchar
-Wert den Textinhalt am Zeichen aus, das imchar
Attribut definiert ist und am Offset, das durch dascharoff
Attribut definiert wird. Verwenden Sie stattdessen dietext-align
CSS-Eigenschaft, 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, mit einem
#
vorangestellt, oder ein Farbschlüsselwort. Andere CSS<color>
Werte werden nicht unterstützt. Verwenden Sie stattdessen diebackground-color
CSS-Eigenschaft, da dieses Attribut veraltet ist. char
Veraltet-
Gibt die Ausrichtung des Inhalts an einem Zeichen jeder Zeilenzelle an. Typische Werte hierfür sind ein Punkt (
.
), wenn versucht wird, Zahlen oder Geldwerte auszurichten. Wirdalign
nicht aufchar
gesetzt, 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 spezifiziert ist, versetzt wird. valign
Veraltet-
Gibt die vertikale Ausrichtung jeder Zeilenzelle an. Die möglichen enumerierten Werte sind
baseline
,bottom
,middle
undtop
. Verwenden Sie stattdessen dievertical-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 seines Parent-<table>
-Elements platziert wird, wird das<tbody>
-Parent impliziert und Browser fügen das<tbody>
dem Markup hinzu. - Das implizite
<tbody>
-Parent wird nur unterstützt, wenn das<table>
sonst keine Kind-<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 hilfreich, um die gewünschte Reihe von Zeilen und deren Daten- und Headerzellen (<td>
und<th>
Elemente) auszuwählen. - Wenn ein
<tr>
als direktes Kind des<table>
aufgenommen wird, fügt der Browser dem Markup ein<tbody>
hinzu. CSS-Selektoren wietable > tr
funktionieren dann möglicherweise nicht wie erwartet oder überhaupt nicht.
Beispiele
Siehe <table>
für ein vollständiges Tabellenbeispiel, das gängige Standards und bewährte Verfahren einführt.
Basiszeileneinrichtung
Dieses Beispiel zeigt eine Tabelle mit vier Zeilen und drei Spalten, wobei die erste Spalte Überschriften für die Zeilendatenzellen enthält.
HTML
Vier <tr>
-Elemente werden verwendet, um vier Tabellenzeilen zu erstellen. Jede Zeile enthält drei Zellen - eine Header-Zelle (<th>
) und zwei Datenzellen (<td>
) - was drei Spalten erstellt. Das scope
-Attribut, das auf jeder Header-Zelle 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 die background-color
dieser Zeilen auf einen etwas dunkleren Ton zu setzen, um einen sogenannten "Zebra-Streifen"-Effekt zu erzeugen. Dieser wechselnde Hintergrund erleichtert das Durchsuchen und Lesen der Datenreihen 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 werden die Zeilenheaderzellen (<th>
Elemente) mit 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
Header-Zeile
Dieses Beispiel erweitert die grundlegende Tabelle aus dem vorherigen Beispiel durch das Hinzufügen einer Header-Zeile als erste Zeile der Tabelle.
HTML
Eine zusätzliche Tabellenzeile (<tr>
) wird als erste Zeile der Tabelle hinzugefügt, die Spaltenheaderzellen (<th>
) bereitstellt, die einen Header für jede Spalte bieten. Wir platzieren diese Zeile in einem <thead>
Gruppierungselement, um anzuzeigen, dass dies der Header der Tabelle ist. Das scope
-Attribut wird zu jeder Header-Zelle (<th>
) innerhalb dieser Header-Zeile hinzugefügt, um explizit anzugeben, dass sich jede Header-Zelle auf alle Zellen innerhalb ihrer eigenen Spalte bezieht, auch wenn 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 gegenüber dem vorherigen Beispiel, mit Ausnahme einiger zusätzlicher Stile, um die "Header-Zeile" hervorzuheben, so dass die Header 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 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 Basis-Tabelle verwendet, um den Body-Abschnitt der Tabelle zu markieren und drei Zeilen (<tr>
Elemente) mit Daten (<td>
Elemente) einzuschließen, was eine Spalte mit Zahlen in absteigender Reihenfolge erstellt.
<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 dem <tbody>
Element zugeordnet, so dass es die Tabellenzellen nach Wert aufsteigend 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 mit einem Klick auf Headerzellen sortieren
Dieses Beispiel erweitert die grundlegende Tabelle aus dem vorherigen Beispiel, indem es das Sortieren interaktiv und unabhängig für mehrere Spalten ermöglicht.
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. Mit dem <thead>
-Element wird ein Kopfabschnitt vor dem Körperabschnitt hinzugefügt, um eine Kopfzeile mit Tabellenheaderzellen (<th>
Element) einzuführen. Diese Headerzellen werden im unten stehenden JavaScript-Code verwendet, um sie anklickbar zu machen und dann die entsprechende Sortierung beim Aktivieren 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-Ereignis-Handler wird jedem Tabellenheader (<th>
Element) jeder <table>
im document
hinzugefügt; es sortiert alle Zeilen (<tr>
-Elemente) des <tbody>
basierend auf den Inhalten der Datenzellen (<td>
Elemente) in den Zeilen.
Hinweis:
Diese Lösung geht davon aus, dass die <td>
-Elemente durch Rohtext ohne Nachfahrenelemente gefü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 benutzbar und zugänglich zu sein, muss die Headerzelle jeder sortierbaren Spalte als Sortierbutton identifizierbar sein, und jede muss definieren, ob die Spalte derzeit in aufsteigender oder absteigender Reihenfolge sortiert ist, visuell und mit dem aria-sort
-Attribut. Weitere Informationen finden Sie im ARIA Authoring Practices Guide's sortable table example.
Technische Übersicht
Inhaltskategorien | Keine |
---|---|
Erlaubter Inhalt |
Null oder mehr <td> und/oder
<th> Elemente;
skriptunterstützende Elemente
(<script> und
<template> ) sind ebenfalls erlaubt.
|
Tag Auslassung |
Start-Tag ist obligatorisch. End-Tag kann weggelassen werden, wenn das
<tr> -Element unmittelbar von einem
<tr> -Element gefolgt wird oder wenn die Zeile das letzte Element
in ihrem übergeordneten Tabellengruppen-Element (<thead> ,
<tbody> oder <tfoot> )
Element ist.
|
Erlaubte Eltern |
<table> (nur wenn die Tabelle kein Kind
<tbody> Element hat und selbst dann nur nach allen
<caption> ,
<colgroup> , und
<thead> Elementen); ansonsten muss das 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 # the-tr-element |
Browser-Kompatibilität
Siehe auch
- Lernen: HTML Tabellen Grundlagen
<caption>
,<col>
,<colgroup>
,<table>
,<tbody>
,<td>
,<tfoot>
,<th>
,<thead>
: Andere table-bezogene Elementebackground-color
: CSS-Eigenschaft, um die Hintergrundfarbe jeder Zeilenzelle festzulegenborder
: CSS-Eigenschaft zur Kontrolle der Ränder von Zeilenzellentext-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