<tbody> HTML-Tabellenkörperelement

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

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 enthält die globalen Attribute.

Veraltete Attribute

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind hier zur Orientierung bei der Aktualisierung vorhandenen Codes und für historisches Interesse dokumentiert.

align

Gibt die horizontale Ausrichtung jeder Tabellenzelle an. Die möglichen enumerierten Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der char-Wert den Textinhalt am Zeichen aus, das im char-Attribut definiert ist, und auf dem Offset, das durch das charoff-Attribut definiert ist. Verwenden Sie stattdessen die text-align-CSS-Eigenschaft, da dieses Attribut veraltet ist.

bgcolor

Definiert die Hintergrundfarbe jeder Tabellenzelle. Der Wert ist eine HTML-Farbe, entweder ein 6-stelliges hexadezimales RGB-Code, eingeleitet mit einem #, oder ein Farbschlüsselwort. Andere CSS-<color>-Werte werden nicht unterstützt. Verwenden Sie stattdessen die background-color-CSS-Eigenschaft, da dieses Attribut veraltet ist.

char

Gibt die Ausrichtung des Inhalts an einem Zeichen jeder Tabellenzelle an. Typische Werte hierfür sind ein Punkt (.) bei dem Versuch, Zahlen oder Geldwerte auszurichten. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert.

charoff

Gibt die Anzahl von Zeichen an, um den Tabellenelementinhalt von dem im char-Attribut angegebenen Ausrichtungszeichen zu versetzen.

valign

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

Verwendungshinweise

• Das <tbody> wird nach jedem <caption>, <colgroup> und <thead>-Element platziert.
• Wenn <tr>-Elemente als direkte Kinder des <table>-Elements angegeben sind (siehe "Auslassung des Tags" im technischen Überblick für eine Beschreibung, wann dies gültig ist), wird das von dem Browser generierte Markup ein <tbody>-Element enthalten, das diese umschließt. Daher werden CSS-Selektoren wie table > tr diese Elemente nicht auswählen. Siehe auch das Beispiel Keinen Körper angeben.
• Es ist erlaubt, mehr als ein <tbody> pro Tabelle zu verwenden, solange sie alle aufeinanderfolgend sind. Dies ermöglicht es, die Zeilen (<tr>-Elemente) in großen Tabellen in Abschnitte zu unterteilen, von denen jeder getrennt formatiert werden kann, wenn dies gewünscht wird. Wenn sie nicht als aufeinanderfolgende Elemente markiert sind, korrigieren Browser diesen Autorenfehler und stellen sicher, dass alle <thead>- und <tfoot>-Elemente als erstes bzw. letztes Element der Tabelle dargestellt werden.
• Zusammen mit seinen verwandten <thead>- und <tfoot>-Elementen liefert das <tbody>-Element nützliche semantische Informationen und kann beim Rendering sowohl für Bildschirm als auch für Druck verwendet werden. Die Angabe solcher Tabelleninhaltsgruppen bietet auch wertvolle kontextbezogene Informationen für unterstützende Technologien, einschließlich Bildschirmlesern und Suchmaschinen.
• Beim Drucken eines Dokuments, im Falle einer mehrseitigen Tabelle, geben die <thead>- und <tfoot>-Elemente normalerweise Informationen an, die auf jeder Seite gleich bleiben—oder zumindest sehr ähnlich—während der Inhalt des <tbody>-Elements sich im Allgemeinen von Seite zu Seite unterscheiden wird.
• Wenn eine Tabelle in einem Bildschirmkontext (wie einem Fenster) präsentiert wird, der nicht groß genug ist, um die gesamte Tabelle anzuzeigen, kann der User-Agent dem Benutzer erlauben, die Inhalte der <thead>, <tbody>, <tfoot> und <caption>-Blöcke unabhängig voneinander zu scrollen, für dasselbe übergeordnete <table>.

Beispiele

Siehe <table> für ein vollständiges Tabellenbeispiel mit den gängigen Standards und Best Practices.

Keinen Körper angeben

Dieses Beispiel zeigt, dass der Browser automatisch <tr>-Elemente innerhalb eines <tbody>-Elements kapselt, wenn die Zeilen nicht innerhalb eines Tabellengruppenelements (<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 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 spezifiziert ist und das tbody als Teil eines zusätzlichen CSS-Selectors verwendet wird. Alternativ können Entwicklertools des Browsers verwendet werden, um die Anwesenheit 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

Grundlegende Körperstruktur

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

HTML

Wir führen einen Tabellenkopf (<thead>-Element) ein und verwenden ausdrücklich ein <tbody>-Element, um die Tabelle in semantische Abschnitte zu strukturieren. Der Tabellenkopf enthält die Spaltenüberschriften (<th>-Elemente). Das <tbody>-Element stellt den Hauptteil der Tabelle dar, der eine Anzahl von Zeilen (<tr>-Elemente) mit den Hauptdaten der Tabelle enthält, die die Daten jedes Studenten sind.

Die Verwendung solcher Tabelleninhaltsgruppen und semantischer Markup ist nicht nur nützlich für die visuelle Präsentation (über 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 nahezu unverändert gegenüber dem vorherigen Beispiel, außer für einige grundlegende Stile, um den Tabellenkopf hervorzuheben, sodass die Überschriften der Spalten sich von den Daten im Tabellenkörper abheben. Wie im obigen Beispiel wird der tbody-Typselektor verwendet, um die Tabellenzellen 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: white;
}

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

Mehrere Körper

Dieses Beispiel erweitert und verbessert die Tabelle aus dem obigen Beispiel noch weiter durch die Einführung mehrerer Hauptabschnitte.

Die Verwendung mehrerer <tbody>-Elemente ermöglicht das Erstellen von Zeilengruppen innerhalb einer Tabelle. Jeder Tabellenkörper kann potenziell seine eigene Kopfzeile oder Kopfzeilen haben; jedoch darf es nur ein <thead>-Element pro Tabelle geben! Aus diesem Grund können <tr>-Elemente mit <th>-Elementen verwendet werden, um Überschriften innerhalb jedes <tbody> zu erstellen.

HTML

Basierend auf der Tabelle im vorherigen einfachen Beispiel werden weitere Studenten hinzugefügt und anstelle jeder Zeile das Hauptfach jedes Studenten 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 den Hauptfachtitel innerhalb eines <th>-Elements anzeigt, welches das colspan-Attribut verwendet, um die Überschrift ü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 Großteil des CSS bleibt unverändert. Jedoch wird ein subtilerer Stil für Kopfzellen hinzugefügt, die direkt innerhalb eines <tbody> liegen (im Gegensatz zu denen, die sich im <thead> befinden). Dies wird für die Überschriften verwendet, die das jeweilige Hauptfach der Tabellenabschnitte 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: white;
}

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

Technische Übersicht

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Erlernen: Grundlagen der 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 um die Ränder der Tabellenzellen zu steuern
• text-align: CSS-Eigenschaft um den Inhalt jeder Tabellenzelle horizontal auszurichten
• vertical-align: CSS-Eigenschaft um den Inhalt jeder Tabellenzelle vertikal auszurichten