<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 beinhaltet die globalen Attribute.

Veraltete Attribute

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind unten nur zur Referenz beim Aktualisieren vorhandenen Codes und aus historischem 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 an dem im char-Attribut definierten Zeichen und dem durch das charoff-Attribut festgelegten Offset aus. 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-stelliger hexadezimaler RGB-Code, mit einem # als Präfix, 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

Bestimmt die Ausrichtung des Inhalts zu einem Zeichen in jeder Tabellenzelle. 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

Gibt an, um wie viele Zeichen der Zellinhalt vom im char-Attribut angegebenen Ausrichtungszeichen versetzt werden soll.

valign

Bestimmt die vertikale Ausrichtung jeder Tabellenzelle. 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 allen <caption>, <colgroup> und <thead>-Elementen platziert.
• Wenn <tr>-Elemente als direkte Kinder des <table> spezifiziert werden (siehe "Tag-Auslassung" in der technischen Zusammenfassung für eine Beschreibung, wann dies zulässig ist), dann wird das von Browsern generierte Markup ein <tbody>-Element enthalten, das sie umschließt. Daher werden CSS-Selektoren wie table > tr diese Elemente nicht auswählen. Siehe auch das Beispiel Keinen Körper spezifizieren.
• 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 bei Bedarf separat formatiert werden kann. Wenn die Markierung nicht aufeinanderfolgend ist, korrigieren Browser diesen Autorenfehler, indem sichergestellt wird, dass alle <thead>- und <tfoot>-Elemente als erste bzw. letzte Elemente der Tabelle gerendert werden.
• Zusammen mit seinen verwandten <thead>- und <tfoot>-Elementen bietet das <tbody>-Element nützliche semantische Informationen und kann sowohl bei der Darstellung für den Bildschirm als auch zum Drucken verwendet werden. Die Angabe solcher Tabellengruppen liefert auch wertvolle Kontextinformationen für unterstützende Technologien, einschließlich Bildschirmlesegeräten 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 sind, während der Inhalt des <tbody>-Elements von Seite zu Seite unterschiedlich sein wird.
• 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 dem Benutzer erlauben, die Inhalte der <thead>, <tbody>, <tfoot> und <caption>-Blöcke unabhängig voneinander innerhalb derselben übergeordneten <table> zu scrollen.

Beispiele

Weitere vollständige Tabellenbeispiele mit allgemeinen Standards und Best Practices finden Sie unter <table>.

Keinen Körper spezifizieren

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

HTML

Hier wird eine sehr grundlegende Tabelle mit einigen Tabellenzeilen (<tr>-Elemente), die Daten (<td>-Elemente) zu Studenten enthalten, erstellt.

<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 ein background-color für das <tbody>-Element angegeben ist und tbody als Teil eines zusätzlichen CSS-Selektors verwendet wird. Alternativ können Entwicklertools des Browsers 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

Grundlegende Körperstruktur

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

HTML

Wir führen einen Tabellenkopf (<thead>-Element) ein und verwenden explizit ein <tbody>-Element, um die Tabelle in semantische Abschnitte zu gliedern. Der Tabellenkopf enthält die Spaltenüberschriften (<th>-Elemente). Das <tbody>-Element stellt den Hauptdatenbereich der Tabelle dar, die mehrere Zeilen (<tr>-Elemente) mit den Hauptdaten der Tabelle enthält, die Daten jedes Studenten.

Die Verwendung solcher Tabellengruppen und semantischer Markierung ist nicht nur nützlich für die visuelle Präsentation (via CSS-Styling) und Kontextinformationen für unterstützende Technologien; darüber hinaus hilft die explizite Verwendung des <tbody>-Elements dem Browser dabei, 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 zum vorherigen Beispiel, außer einige grundlegende Formatierungen, 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 Zellen des Körpers zu gestalten.

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 mehr durch die Einführung mehrerer Körperabschnitte.

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

HTML

Aufbauend auf der Tabelle im vorherigen grundlegenden Beispiel werden mehr Studenten hinzugefügt, und statt das Hauptfach jedes Studenten auf jeder Zeile aufzulisten, werden die Studenten nach Hauptfach gruppiert. Beachten Sie, dass jedes Hauptfach innerhalb seines eigenen <tbody>-Blocks eingeschlossen ist, mit der ersten Zeile (<tr>-Element), die als Kopf des Blocks dient und den Hauptfach-Titel 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 Hauptfaches <tbody> stellt einen Studenten dar.

<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 eine etwas subtilere Stilierung 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 das entsprechende Hauptfach jedes Tabellensegments 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 Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Lernen: Grundlagen von HTML-Tabellen
• <caption>, <col>, <colgroup>, <table>, <td>, <tfoot>, <th>, <thead>, <tr>: Andere tabellenbezogene Elemente
• background-color: CSS-Eigenschaft zum Setzen der Hintergrundfarbe jeder Tabellenzelle
• border: CSS-Eigenschaft zur Steuerung der Rahmen von Tabellenzellen
• text-align: CSS-Eigenschaft zur horizontalen Ausrichtung des Inhalts jeder Tabellenzelle
• vertical-align: CSS-Eigenschaft zur vertikallen Ausrichtung des Inhalts jeder Tabellenzelle