<tbody> HTML-Tabellenkörper-Element

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 unten zur Referenz beim Aktualisieren bestehenden 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 Wert char den Textinhalt an dem im char-Attribut definierten Zeichen und dem durch das charoff-Attribut definierten Versatz aus. Verwenden Sie stattdessen die CSS-Eigenschaft text-align, da dieses Attribut veraltet ist.

bgcolor

Definiert die Hintergrundfarbe jeder Tabellenzelle. Der Wert ist eine HTML-Farbe; entweder ein 6-stelliger, hexadezimale RGB-Code, der mit # beginnt, oder ein Farb-Stichwort. Andere CSS <color>-Werte werden nicht unterstützt. Verwenden Sie stattdessen die CSS-Eigenschaft background-color, da dieses Attribut veraltet ist.

char

Gibt die Ausrichtung des Inhalts an einem Zeichen jeder Tabellenzelle an. Übliche Werte hierfür sind ein Punkt (.), wenn versucht wird, Zahlen oder Geldbeträge auszurichten. Falls align nicht auf char gesetzt ist, wird dieses Attribut ignoriert.

charoff

Gibt die Anzahl der Zeichen an, um die der Tabelleninhalt vom durch das char-Attribut angegebenen Ausrichtungszeichen versetzt wird.

valign

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

Anmerkungen zur Verwendung

• Das <tbody> wird nach jedem <caption>, <colgroup> und <thead> platziert.
• Wenn <tr>-Elemente als direkte Nachkommen des <table> angegeben werden (siehe "Tag-Auslassung" in der technischen Zusammenfassung für eine Beschreibung, wann dies zulässig ist), wird durch das vom Browser erzeugte Markup ein <tbody>-Element enthalten sein, das diese umschließt. Daher 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 benutzen, solange sie aufeinanderfolgend sind. Dies ermöglicht es, die Zeilen (<tr>-Elemente) in großen Tabellen in Abschnitte zu unterteilen, die, falls gewünscht, separat formatiert werden können. Wenn sie nicht als aufeinanderfolgende Elemente gekennzeichnet sind, werden Browser diesen Autorenfehler korrigieren, indem sichergestellt wird, dass alle <thead>- und <tfoot>-Elemente jeweils als erste und letzte Elemente der Tabelle dargestellt werden.
• Zusammen mit den zugehörigen <thead>- und <tfoot>-Elementen bietet das <tbody>-Element nützliche semantische Informationen und kann beim Rendern für entweder Bildschirme oder Druck verwendet werden. Die Angabe solcher Table-Content-Groups bietet auch wertvolle kontextuelle Informationen für unterstützende Technologien, einschließlich Bildschirmlesern und Suchmaschinen.
• Beim Drucken eines Dokuments, bei einer mehrseitigen Tabelle, spezifizieren die <thead>- und <tfoot>-Elemente normalerweise Informationen, die auf jeder Seite gleich oder zumindest sehr ähnlich bleiben, während der Inhalt des <tbody>-Elements von Seite zu Seite normalerweise unterschiedlich sein wird.
• Wenn eine Tabelle in einem Bildschirmkontext (etwa ein Fenster), das nicht groß genug ist, um die gesamte Tabelle anzuzeigen, präsentiert wird, könnte der Nutzeragent dem Nutzer erlauben, die Inhalte der <thead>, <tbody>, <tfoot> und <caption>-Blöcke getrennt voneinander zu scrollen, alle zusammengehörig unter demselben <table>-Parent.

Beispiele

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

Kein Körper spezifiziert

Dieses Beispiel zeigt, dass der Browser automatisch <tr>-Elemente innerhalb eines <tbody>-Elements kapselt, wenn die Reihen nicht innerhalb eines Tabellen-Gruppierungselements (<tbody>, <tfoot> oder <thead>) verschachtelt sind und direktes Kind des <table>-Elements sind, wie in diesem Beispiel.

HTML

Hier wird eine sehr grundlegende Tabelle mit einigen Tabellreihen (<tr>-Elemente), die Daten (<td>-Elemente) über 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 eine background-color für das <tbody>-Element angegeben ist und tbody als Teil eines zusätzlichen CSS-Selektors verwendet wird. Alternativ können Entwicklerwerkzeuge 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 grundlegende Tabelle aus dem vorherigen Beispiel.

HTML

Wir stellen einen Tabellenkopf (<thead>-Element) vor 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 Hauptabschnitt der Tabelle dar, der eine Anzahl von Reihen (<tr>-Elemente) mit den Hauptdaten der Tabelle enthält, also den Daten jedes Studenten.

Die Verwendung solcher Table-Content-Groups und semantischem Markup ist nicht nur für die visuelle Präsentation (durch CSS-Styling) und kontextuelle Informationen für unterstützende Technologien nützlich; 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 im Vergleich zum vorherigen Beispiel, außer dass ein grundlegendes Styling hinzugefügt wurde, um den Tabellenkopf hervorzuheben, sodass die Überschriften der Spalten sich von den Daten im Tabellenkörper abheben. Wie im Beispiel oben wird der tbody-Typen-Selektor 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, indem mehrere Körperabschnitte eingeführt werden.

Die Verwendung mehrerer <tbody>-Elemente erlaubt die Erstellung von Zeilengruppen innerhalb einer Tabelle. Jeder Tabellenkörper kann potenziell seine eigenen Kopfzeilenreihen haben; jedoch kann es nur ein <thead>-Element pro Tabelle geben! Aus diesem Grund können <tr> mit <th>-Elemente dazu verwendet werden, Kopfzeilen innerhalb jedes <tbody> zu erstellen.

HTML

Aufbauend auf der Tabelle im vorherigen einfachen Beispiel werden mehr Studenten hinzugefügt und statt das Hauptfach jedes Studenten in jeder Reihe aufzulisten, werden die Studenten nach Hauptfächern gruppiert. Beachten Sie, dass jedes Hauptfach innerhalb seines eigenen <tbody>-Blocks eingeschlossen ist, wobei die erste Reihe (<tr>-Element) als Kopf des Blocks dient und den Major-Titel innerhalb eines <th>-Elements anzeigt, das das colspan-Attribut verwendet, um die Kopfzeile über alle drei Spalten der Tabelle zu erweitern. Jede verbleibende Reihe innerhalb jedes Hauptfach-<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 leicht 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 jeweils den entsprechenden Majoren des Tabellenabschnitts 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, 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