<tbody>: Das Table-Body-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 <tbody>
HTML-Element kapselt eine Gruppe von Tabellenzeilen (<tr>
-Elemente) ein und kennzeichnet damit, dass sie den Hauptteil der Daten einer Tabelle bilden.
Probieren Sie es aus
<table>
<caption>
Council budget (in £) 2018
</caption>
<thead>
<tr>
<th scope="col">Items</th>
<th scope="col">Expenditure</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Donuts</th>
<td>3,000</td>
</tr>
<tr>
<th scope="row">Stationery</th>
<td>18,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Totals</th>
<td>21,000</td>
</tr>
</tfoot>
</table>
thead,
tfoot {
background-color: #2c5e77;
color: #fff;
}
tbody {
background-color: #e4f0f5;
}
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;
}
th,
td {
border: 1px solid rgb(160 160 160);
padding: 8px 10px;
}
td {
text-align: center;
}
Attribute
Dieses Element beinhaltet die globalen Attribute.
Veraltete Attribute
Die folgenden Attribute sind veraltet und sollten nicht mehr verwendet werden. Sie werden hier zu Referenzzwecken bei der Aktualisierung von bestehendem Code und aus historischem Interesse dokumentiert.
align
Veraltet-
Gibt die horizontale Ausrichtung jeder Tabellenzelle an. Die möglichen numerierten Werte sind
left
,center
,right
,justify
undchar
. Wenn unterstützt, richtet der Wertchar
den Textinhalt am Zeichen aus, das imchar
-Attribut definiert ist, und am durch dascharoff
-Attribut definierten Offset. Verwenden Sie dietext-align
CSS-Eigenschaft, da dieses Attribut veraltet ist. bgcolor
Veraltet-
Definiert die Hintergrundfarbe jeder Tabellenzelle. Der Wert ist eine HTML-Farbe; entweder ein 6-stelliger hexadezimaler RGB-Code, der mit einem
#
vorausgeht, oder ein Farbname. Andere CSS<color>
Werte werden nicht unterstützt. Verwenden Sie diebackground-color
CSS-Eigenschaft, da dieses Attribut veraltet ist. char
Veraltet-
Gibt die Ausrichtung des Inhalts an einem Zeichen in jeder Tabellenzelle an. Typische Werte hierfür sind ein Punkt (
.
), wenn versucht wird, Zahlen oder Geldwerte auszurichten. Wennalign
nicht aufchar
gesetzt ist, wird dieses Attribut ignoriert. charoff
Veraltet-
Gibt die Anzahl der Zeichen an, um wie viele der Tabellenzelleninhalt vom Ausrichtungszeichen, das durch das
char
-Attribut angegeben ist, versetzt wird. valign
Veraltet-
Gibt die vertikale Ausrichtung jeder Tabellenzelle an. Die möglichen numerierten Werte sind
baseline
,bottom
,middle
undtop
. Verwenden Sie dievertical-align
CSS-Eigenschaft, da dieses Attribut veraltet ist.
Verwendungsnotizen
- Das
<tbody>
wird nach allen<caption>
,<colgroup>
und<thead>
-Elementen platziert. - Wenn
<tr>
-Elemente als direkte Kinder des<table>
-Elements angegeben sind (siehe "Tag-Auslassung" in der technischen Zusammenfassung für eine Beschreibung, wann dies zulässig ist), wird das von dem Browser generierte Markup ein<tbody>
-Element enthalten, das sie einkapselt. Infolgedessen werden CSS-Selektoren wietable > tr
diese Elemente nicht auswählen. Siehe auch das Beispiel Kein Körper angegeben. - Es ist erlaubt, mehr als ein
<tbody>
pro Tabelle zu verwenden, solange sie alle aufeinander folgen. Dies ermöglicht es, die Zeilen (<tr>
-Elemente) in großen Tabellen in Abschnitte zu unterteilen, von denen jeder separat formatiert werden kann, falls gewünscht. Wenn sie nicht als aufeinanderfolgende Elemente markiert sind, werden Browser diesen Autorenfehler korrigieren, indem sie sicherstellen, dass alle<thead>
- und<tfoot>
-Elemente als erste bzw. letzte Elemente der Tabelle gerendert werden. - Zusammen mit den verwandten
<thead>
- und<tfoot>
-Elementen bietet das<tbody>
-Element nützliche semantische Informationen und kann sowohl bei der Darstellung auf dem Bildschirm als auch beim Drucken verwendet werden. Das Angeben solcher Tabellengruppen bietet auch wertvolle kontextuelle Informationen für unterstützende Technologien, einschließlich Bildschirmlesern und Suchmaschinen. - Beim Drucken eines Dokuments geben die
<thead>
- und<tfoot>
-Elemente im Fall einer mehrseitigen Tabelle üblicherweise Informationen an, die auf jeder Seite gleich bleiben – oder zumindest sehr ähnlich sind –, während der Inhalt des<tbody>
-Elements von Seite zu Seite in der Regel unterschiedlich ist. - Wenn eine Tabelle in einem Bildschirmkontext (z.B. ein Fenster), der nicht groß genug ist, um die gesamte Tabelle anzuzeigen, präsentiert wird, kann es ein User-Agent ermöglichen, dass der Benutzer die Inhalte der
<thead>
,<tbody>
,<tfoot>
, und<caption>
-Blöcke unabhängig voneinander scrollen kann, wenn sie sich im selben übergeordneten<table>
befinden.
Beispiele
Siehe <table>
für ein vollständiges Tabellenbeispiel, das gängige Standards und bewährte Praktiken einführt.
Kein Körper angegeben
Dieses Beispiel zeigt, dass der Browser <tr>
-Elemente innerhalb eines <tbody>
-Elements automatisch einkapselt, wenn die Zeilen nicht innerhalb eines Tabellengruppierungs-Elements (<tbody>
, <tfoot>
, oder <thead>
) verschachtelt sind und, wie in diesem Beispiel, die direkten Kinder des <table>
-Elements sind.
HTML
Hier wird eine sehr grundlegende Tabelle erstellt, die einige Tabellenzeilen (<tr>
-Elemente) enthält, die Daten (<td>
-Elemente) über Studenten enthalten.
<table>
<tr>
<td>3741255</td>
<td>Jones, Martha</td>
<td>Computer Science</td>
<td>240</td>
</tr>
<tr>
<td>3971244</td>
<td>Nim, Victor</td>
<td>Russian Literature</td>
<td>220</td>
</tr>
<tr>
<td>4100332</td>
<td>Petrov, Alexandra</td>
<td>Astrophysics</td>
<td>260</td>
</tr>
</table>
CSS
Beachten Sie das CSS im Beispiel, wo eine background-color
für das <tbody>
-Element festgelegt ist und tbody
als Teil eines zusätzlichen CSS-Selektors verwendet wird. Alternativ können Entwicklertools für den Browser verwendet werden, um das Vorhandensein des <tbody>
-Elements im DOM zu überprüfen.
tbody {
background-color: #e4f0f5;
}
tbody > tr > td:last-of-type {
width: 60px;
text-align: center;
}
Ergebnis
Grundlegende Körperstruktur
Dieses Beispiel erweitert und verbessert die grundlegende Tabelle aus dem vorherigen Beispiel.
HTML
Wir fügen den Tabellenkopf (<thead>
-Element) hinzu und verwenden explizit ein <tbody>
-Element, um die Tabelle in semantische Abschnitte zu strukturieren. Der Tabellenkopf enthält die Spaltenüberschriften (<th>
-Elemente). Das <tbody>
-Element repräsentiert den Hauptbereich der Tabelle, der aus mehreren Zeilen (<tr>
-Elemente) mit den Hauptdaten der Tabelle besteht, die die Daten jedes Studenten sind.
Die Verwendung solcher Tabellengruppen und semantisches Markup ist nicht nur nützlich für die visuelle Darstellung (über CSS-Styling) und kontextuelle Informationen für unterstützende Technologien; zudem hilft die explizite Verwendung des <tbody>
-Elements dem Browser, die gewünschte Tabellenstruktur zu erstellen und unerwünschte Ergebnisse zu vermeiden.
<table>
<thead>
<tr>
<th>Student ID</th>
<th>Name</th>
<th>Major</th>
<th>Credits</th>
</tr>
</thead>
<tbody>
<tr>
<td>3741255</td>
<td>Jones, Martha</td>
<td>Computer Science</td>
<td>240</td>
</tr>
<tr>
<td>3971244</td>
<td>Nim, Victor</td>
<td>Russian Literature</td>
<td>220</td>
</tr>
<tr>
<td>4100332</td>
<td>Petrov, Alexandra</td>
<td>Astrophysics</td>
<td>260</td>
</tr>
</tbody>
</table>
CSS
Das CSS ist fast unverändert gegenüber dem vorherigen Beispiel, außer dass grundlegendes Styling hinzugefügt wird, um den Tabellenkopf hervorzuheben, damit die Überschriften der Spalten sich vom Dateninhalt im Tabellenkörper abheben. Wie im obigen Beispiel wird der tbody
-Typ-Selektor verwendet, um die Körperzellen zu stylen.
tbody {
background-color: #e4f0f5;
}
tbody > tr > td:last-of-type {
text-align: center;
}
thead {
border-bottom: 2px solid rgb(160 160 160);
background-color: #2c5e77;
color: #fff;
}
Ergebnis
Mehrere Körper
Dieses Beispiel erweitert und verbessert die Tabelle aus dem obigen Beispiel noch weiter durch die Einführung mehrerer Körperabschnitte.
Das Verwenden mehrerer <tbody>
-Elemente ermöglicht es, Zeilengruppen innerhalb einer Tabelle zu erstellen. Jeder Tabellenkörper kann potenziell seine eigene Kopfzeile oder mehrere Kopfzeilen haben; jedoch darf es nur ein <thead>
-Element pro Tabelle geben! Aufgrund dessen können <tr>
-Elemente mit <th>
-Elementen verwendet werden, um Überschriften innerhalb jedes <tbody>
zu erstellen.
HTML
Anknüpfend an die Tabelle im vorherigen Basisebeispiel, werden weitere Studenten hinzugefügt und anstatt das Fach jedes Studenten in jeder Zeile aufzuführen, werden die Studenten nach Fach gruppiert. Beachten Sie, dass jedes Fach innerhalb eines eigenen <tbody>
-Blocks eingeschlossen ist, wobei die erste Zeile (<tr>
-Element) als Kopf des Blocks dient und den Fach-Titel innerhalb eines <th>
-Elements anzeigt, das das colspan
-Attribut verwendet, um die Überschrift über alle drei Spalten der Tabelle zu erstrecken. Jede verbleibende Zeile innerhalb jedes <tbody>
-Blocks eines Fachs repräsentiert einen Studenten.
<table>
<thead>
<tr>
<th>Student ID</th>
<th>Name</th>
<th>Credits</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="3">Computer Science</th>
</tr>
<tr>
<td>3741255</td>
<td>Jones, Martha</td>
<td>240</td>
</tr>
<tr>
<td>4077830</td>
<td>Pierce, Benjamin</td>
<td>200</td>
</tr>
<tr>
<td>5151701</td>
<td>Kirk, James</td>
<td>230</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="3">Russian Literature</th>
</tr>
<tr>
<td>3971244</td>
<td>Nim, Victor</td>
<td>220</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="3">Astrophysics</th>
</tr>
<tr>
<td>4100332</td>
<td>Petrov, Alexandra</td>
<td>260</td>
</tr>
<tr>
<td>8892377</td>
<td>Toyota, Hiroko</td>
<td>240</td>
</tr>
</tbody>
</table>
CSS
Die meisten CSS-Regeln bleiben unverändert. Allerdings wird ein etwas subtilerer Stil für Kopfzellen hinzugefügt, die sich direkt in einem <tbody>
befinden (im Gegensatz zu denen im <thead>
). Dies wird für die Überschriften verwendet, die jeweils die großen Bereiche der Tabelle anzeigen.
tbody > tr > th {
border-top: 2px solid rgb(160 160 160);
border-bottom: 1px solid rgb(140 140 140);
background-color: #e4f0f5;
font-weight: normal;
}
tbody {
background-color: whitesmoke;
}
thead {
background-color: #2c5e77;
color: #fff;
}
Ergebnis
Technische Zusammenfassung
Inhaltskategorien | Keine. |
---|---|
Erlaubter Inhalt | Null oder mehr <tr> -Elemente. |
Tag-Auslassung |
Das Start-Tag eines <tbody> -Elements kann ausgelassen werden, wenn das erste Element innerhalb des <tbody> -Elements ein <tr> -Element ist und wenn das Element nicht direkt von einem <tbody> -, <thead> - oder <tfoot> -Element mit ausgelassenem End-Tag gefolgt wird. (Es kann nicht ausgelassen werden, wenn das Element leer ist.)
Das End-Tag eines <tbody> -Elements kann ausgelassen werden, wenn das <tbody> -Element direkt von einem <tbody> - oder <tfoot> -Element gefolgt wird oder wenn kein weiterer Inhalt im übergeordneten Element vorhanden ist.
|
Zulässige Eltern |
Innerhalb des erforderlichen Eltern-<table> -Elements
kann das <tbody> -Element nach allen
<caption> -, <colgroup> - und <thead> -Elementen hinzugefügt werden.
|
Implizite ARIA-Rolle |
rowgroup
|
Zugelassene ARIA-Rollen | Jede |
DOM-Schnittstelle | [`HTMLTableSectionElement`](/de/docs/Web/API/HTMLTableSectionElement) |
Spezifikationen
Specification |
---|
HTML # the-tbody-element |
Browser-Kompatibilität
Siehe auch
- Lernen: HTML-Tabellen-Grundlagen
<caption>
,<col>
,<colgroup>
,<table>
,<td>
,<tfoot>
,<th>
,<thead>
,<tr>
: Weitere tabellenbezogene Elementebackground-color
: CSS-Eigenschaft, um die Hintergrundfarbe jeder Zelle festzulegenborder
: CSS-Eigenschaft, um die Rahmen von Zellen zu steuerntext-align
: CSS-Eigenschaft zur horizontalen Ausrichtung des Inhalts jeder Tabellenzellevertical-align
: CSS-Eigenschaft zur vertikalen Ausrichtung des Inhalts jeder Tabellenzelle