<tr>: Das Table Row-Element

Dieses Element enthält die globalen Attribute.

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind unten dokumentiert, um beim Aktualisieren bestehenden Codes oder zu historischen Zwecken als Referenz zu dienen.

align Veraltet

Gibt die horizontale Ausrichtung jeder Zeilenzelle an. Die möglichen enumerierten Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der Wert char den Textinhalt am Zeichen aus, das im char Attribut definiert ist, und am Versatz, der durch das charoff Attribut festgelegt ist. Verwenden Sie stattdessen die text-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, vorangestellt mit einem #, oder ein Farbkeyword. Andere <color> CSS-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 einem Zeichen jeder Zeilenzelle an. Typische Werte sind ein Punkt (.), wenn versucht wird, Zahlen oder Geldbeträge auszurichten. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert.

charoff Veraltet

Gibt die Anzahl der Zeichen an, die der Zelleninhalt von dem durch das char Attribut angegebenen Ausrichtungszeichen versetzt werden soll.

valign Veraltet

Gibt die vertikale Ausrichtung jeder Zeilenzelle 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.

• Das <tr>-Element ist nur als Kind eines <thead>, <tbody> oder <tfoot>-Elements gültig.
• Wenn das <tr> als direktes Kind des übergeordneten <table>-Elements platziert wird, wird das <tbody>-Elternteil impliziert, und Browser fügen das <tbody> dem Markup hinzu.
• Das implizierte <tbody>-Elternteil wird nur unterstützt, wenn das <table> ansonsten keine Kind-<tbody>-Elemente hat, und nur, wenn das <tr> nach allen <caption>, <colgroup> und <thead>-Elementen eingefügt 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 Kind der <table> eingefügt wird, fügt der Browser dem Markup ein <tbody> hinzu. CSS-Selektoren wie table > tr funktionieren möglicherweise nicht wie erwartet oder gar nicht.

Siehe <table> für ein vollständiges Tabellenbeispiel, das gängige Standards und bewährte Verfahren einführt.

Dieses Beispiel demonstriert eine Tabelle mit vier Zeilen und drei Spalten, bei der 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 erstellt damit 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 odd-Zeile auszuwählen und ihren background-color auf einen leicht dunkleren Ton zu setzen, wodurch ein sogenannter "Zebra-Streifen"-Effekt entsteht. Dieser wechselnde Hintergrund erleichtert das Durchlesen der Datenreihen in der Tabelle - stellen Sie sich vor, Sie hätten viele Reihen und Spalten und müssten einige Daten in einer bestimmten Reihe finden. Darüber hinaus werden die Zeilenkopfzellen (<th> Elemente) mit einem 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; } 

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

Dieses Beispiel erweitert die grundlegende Tabelle aus dem vorherigen Beispiel um eine Kopfzeile als erste Zeile der Tabelle hinzuzufügen.

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 zu jeder Kopfzelle (<th>) innerhalb dieser Kopfzeile hinzugefügt, um explizit anzugeben, dass sich jede Kopfzelle 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 nahezu unverändert vom vorherigen Beispiel, abgesehen von einigen zusätzlichen Stilen, um die "Kopfzeile" hervorzuheben, sodass sich die Köpfe der Spalten 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; } 

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

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 ein HTMLCollection von <tr> Elementen zu sortieren.

HTML

Ein <tbody> Element wird in dieser Basistabelle verwendet, um den Körperabschnitt der Tabelle zu kennzeichnen und drei Zeilen (<tr> Elemente) mit Daten (<td> Elemente) einzuschließen, wodurch eine Spalte mit absteigenden Zahlen entsteht.

<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 an das <tbody> Element angehängt, 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)); 

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

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 jeder Zeile (<tr> Element) innerhalb des Tabellenkörpers (<tbody> Element) hinzugefügt, um eine zweite Spalte mit aufsteigenden Buchstaben 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 folgenden JavaScript-Code verwendet, um sie anklickbar zu machen, um dann das entsprechende Sortieren beim Aktivieren pro Klick auszufü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 jedem Tabellenkopf (<th> Element) von jedem <table> im document hinzugefügt; dieser sortiert alle Zeilen (<tr> Elemente) des <tbody> basierend auf dem Inhalt der Datenzellen (<td> Elemente) in den Zeilen.

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: #fff; cursor: pointer; } 

Ergebnis

• Lernen: Grundlegende HTML-Tabellen
• <caption>, <col>, <colgroup>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>: Andere tabellenbezogene Elemente
• background-color: CSS-Eigenschaft, um die Hintergrundfarbe jeder Zeilenzelle festzulegen
• border: CSS-Eigenschaft zur Steuerung der Ränder von Zeilenzellen
• text-align: CSS-Eigenschaft, um den Inhalt jeder Zeilenzelle horizontal auszurichten
• vertical-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