<tbody>: Das Tabellenkörperelement

Dieses Element beinhaltet die globalen Attribute.

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind hier zu Referenzzwecken dokumentiert, um bestehenden Code zu aktualisieren und aus historischem Interesse.

align Veraltet

Bestimmt die horizontale Ausrichtung jeder Tabellenzelle. Die möglichen auszählbaren Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der char-Wert den textuellen Inhalt auf dem im char-Attribut definierten Zeichen und dem durch das charoff-Attribut bestimmten Versatz aus. Verwenden Sie stattdessen die text-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, mit # als Präfix, oder ein Farbkeyword. Andere CSS <color> 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 Tabellenzelle 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 Veraltet

Gibt die Anzahl der Zeichen an, um den Tabellenzelleninhalt von dem durch das char-Attribut angegebenen Zeichen auszurichten.

valign Veraltet

Bestimmt die vertikale Ausrichtung jeder Tabellenzelle. Die möglichen auszählbaren Werte sind baseline, bottom, middle und top. Verwenden Sie stattdessen die vertical-align CSS-Eigenschaft, da dieses Attribut veraltet ist.

• Das <tbody> wird nach allen <caption>, <colgroup> und <thead> Elementen platziert.
• Wenn <tr> Elemente als direkte Kinder des <table> angegeben sind (siehe "Tag weglassen" im technischen Überblick für eine Beschreibung, wann dies zulässig ist), wird das von dem Browser generierte Markup ein <tbody>-Element enthalten, das sie einkapselt. Dadurch werden CSS-Selektoren wie table > tr diese Elemente nicht auswählen. Siehe auch das Beispiel Kein Körper spezifiziert.
• Es ist zulässig, mehr als ein <tbody> pro Tabelle zu verwenden, solange sie alle aufeinanderfolgend sind. Dies erlaubt es, die Reihen (<tr>-Elemente) in großen Tabellen in Abschnitte zu unterteilen, von denen jeder, falls gewünscht, separat formatiert werden kann. Wenn sie nicht aufeinanderfolgend markiert sind, korrigieren Browser diesen Autorenfehler, indem sie sicherstellen, dass alle <thead> und <tfoot> Elemente als erste und letzte Elemente der Tabelle gerendert werden.
• Zusammen mit den zugehörigen <thead> und <tfoot>-Elementen liefert das <tbody>-Element nützliche semantische Informationen und kann sowohl beim Rendern für Bildschirm als auch für den Druck verwendet werden. Das Angeben solcher Tabelleninhalt-Gruppen bietet auch wertvolle kontextuelle Informationen für unterstützende Technologien, einschließlich Bildschirmleser und Suchmaschinen.
• Beim Drucken eines Dokuments, im Fall einer mehrseitigen Tabelle, geben die <thead> und <tfoot>-Elemente normalerweise Informationen an, die auf jeder Seite gleich bleiben—oder zumindest sehr ähnlich sind—während sich der Inhalt des <tbody>-Elements in der Regel von Seite zu Seite unterscheidet.
• Wenn eine Tabelle in einem Bildschirmkontext (wie einem Fenster) präsentiert wird, das nicht groß genug ist, um die gesamte Tabelle anzuzeigen, kann der Benutzeragent erlauben, den Benutzer die Inhalte der <thead>, <tbody>, <tfoot> und <caption> Blöcke separat zu scrollen, für dasselbe übergeordnete <table>-Element.

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

Dieses Beispiel zeigt, dass der Browser <tr>-Elemente automatisch innerhalb eines <tbody>-Elements einkapselt, wenn die Zeilen nicht innerhalb eines Tabellengruppierungselements (<tbody>, <tfoot> oder <thead>) verschachtelt sind und, wie in diesem Beispiel, die direkten Kinder des <table>-Elements sind.

HTML

Hier wird eine sehr einfache Tabelle mit einigen Tabellenzeilen (<tr>-Elemente) erstellt, die Daten (<td>-Elemente) über Schüler 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, bei dem eine background-color für das <tbody>-Element spezifiziert wird und das tbody als Teil eines zusätzlichen CSS-Selektors verwendet wird. Alternativ können Browser-Entwicklertools 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; } 

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: 8px 10px; } 

Ergebnis

Dieses Beispiel erweitert und verbessert die einfache Tabelle aus dem vorherigen Beispiel.

HTML

Wir führen einen Tabellenkopf (<thead>-Element) ein und verwenden ein <tbody>-Element explizit, um die Tabelle in semantische Abschnitte zu unterteilen. Der Tabellenkopf enthält die Spaltenüberschriften (<th>-Elemente). Das <tbody>-Element repräsentiert den Körperabschnitt der Tabelle, der eine Anzahl von Reihen (<tr>-Elemente) mit den Hauptdaten der Tabelle enthält, welche die Daten jedes Schülers sind.

Die Verwendung solcher Tabelleninhalt-Gruppen und semantischem Markup ist nicht nur nützlich für die visuelle Präsentation (durch CSS-Styling) und kontextuelle Informationen für unterstützende Technologien; darüber hinaus hilft die explizite Verwendung des <tbody>-Elements dem Browser, die beabsichtigte 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 im Vergleich zum vorherigen Beispiel, abgesehen von einem grundlegenden Styling, um den Tabellenkopf hervorzuheben, sodass die Überschriften der Spalten sich vom Datenbestand des Tabellenkörpers abheben. Wie im obigen Beispiel wird der tbody Typselektor 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; } 

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 und verbessert die Tabelle aus dem obigen Beispiel noch mehr, indem mehrere Körperabschnitte eingeführt werden.

Die Verwendung von mehreren <tbody>-Elementen ermöglicht die Erstellung von Reihen-Gruppierungen innerhalb einer Tabelle. Jeder Tabellenkörper kann potenziell seine eigenen Kopfzeilen oder -zeilen haben; jedoch darf es pro Tabelle nur ein <thead>-Element geben! Aus diesem Grund können <tr> mit <th>-Elementen verwendet werden, um Kopfzeilen innerhalb jedes <tbody> zu erstellen.

HTML

Basierend auf der Tabelle im vorherigen grundlegenden Beispiel, werden mehr Studierende hinzugefügt und anstatt das Hauptfach jedes Studenten in jeder Zeile aufzulisten, werden die Studenten nach Hauptfach gruppiert. Beachten Sie, dass jedes Hauptfach innerhalb seines eigenen <tbody>-Blocks eingeschlossen ist, wobei die erste Zeile (<tr>-Element) als Kopf des Blocks dient und die Hauptsparte innerhalb eines <th>-Elements anzeigt, das das colspan-Attribut verwendet, um die Kopfzeile über alle drei Spalten der Tabelle zu erstrecken. Jede verbleibende Zeile innerhalb jedes Hauptfachs <tbody> 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

Der größte Teil des CSS ist unverändert. Jedoch wird ein etwas subtilerer Stil für Kopfzellen hinzugefügt, die direkt innerhalb eines <tbody> enthalten sind (im Gegensatz zu denen, die sich im <thead> befinden). Dies wird für die Kopfzeilen verwendet, die auf das entsprechende Hauptfach jedes Tabellenabschnitts hinweisen.

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; } 

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: 6px 8px; text-align: left; } tbody > tr > td:last-of-type { text-align: center; } 

Ergebnis

• Lernen: Grundlagen von HTML-Tabellen
• <caption>, <col>, <colgroup>, <table>, <td>, <tfoot>, <th>, <thead>, <tr>: Andere tabellenbezogene Elemente
• background-color: CSS-Eigenschaft, um die Hintergrundfarbe jeder Tabellenzelle festzulegen
• border: CSS-Eigenschaft zur Steuerung der Ränder von Tabellenzellen
• text-align: CSS-Eigenschaft, um den Inhalt jeder Tabellenzelle horizontal auszurichten
• vertical-align: CSS-Eigenschaft, um den Inhalt jeder Tabellenzelle vertikal auszurichten