<tbody>: Das 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 daher nicht verwendet werden. Sie werden hier nur zur Referenzierung bei der Aktualisierung von bestehendem Code und aus historischem Interesse dokumentiert.

align Veraltet

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

bgcolor Veraltet

Definiert die Hintergrundfarbe jeder Körperzelle. Der Wert ist eine HTML-Farbe; entweder ein 6-stelliger hexadezimaler RGB-Code, vorangestellt von einem #, oder ein Farb-Schlüsselwort. 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 ein Zeichen jeder Körperzelle 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 die der Inhalt der Körperzelle von dem durch das char-Attribut angegebenen Ausrichtungszeichen versetzt werden soll.

valign Veraltet

Gibt die vertikale Ausrichtung jeder Körperzelle 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.

Hinweise zur Verwendung

• 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 gültig ist), generiert die durch den Browser erstellte Markierung ein <tbody>-Element, das sie umfasst. Infolgedessen werden CSS-Selektoren wie table > tr diese Elemente nicht selektieren. Siehe auch das Beispiel Kein Körper angegeben.
• Es ist erlaubt, mehr als ein <tbody> pro Tabelle zu verwenden, solange sie alle aufeinanderfolgend sind. Dies erlaubt es, die Zeilen (<tr>-Elemente) in großen Tabellen in Abschnitte zu unterteilen, die jeweils separat formatiert werden können, wenn gewünscht. Wenn sie nicht markiert sind, um aufeinanderfolgende Elemente zu sein, werden Browser diesen Autorenfehler korrigieren, wobei sichergestellt wird, dass alle <thead>- und <tfoot>-Elemente als erstes und letztes Element der Tabelle gerendert werden.
• Zusammen mit den verwandten <thead>- und <tfoot>-Elementen bietet das <tbody>-Element nützliche semantische Informationen und kann sowohl für die Anzeige auf dem Bildschirm als auch für den Druck verwendet werden. Die Angabe solcher Tabellengruppen bietet auch wertvolle kontextuelle Informationen für unterstützende Technologien, einschließlich Bildschirmlesern und Suchmaschinen.
• Beim Ausdrucken eines Dokuments, im Falle einer mehrseitigen Tabelle, geben die <thead>- und <tfoot>-Elemente in der Regel Informationen an, die auf jeder Seite gleich oder zumindest sehr ähnlich bleiben, während der Inhalt des <tbody>-Elements sich in der Regel von Seite zu Seite unterscheidet.
• Wenn eine Tabelle in einem Bildschirmkontext (wie einem Fenster) angezeigt wird, der nicht groß genug ist, um die gesamte Tabelle anzuzeigen, kann der Benutzeragent dem Benutzer ermöglichen, die Inhalte von <thead>, <tbody>, <tfoot> und <caption> Blöcken jeweils getrennt vom gleichen übergeordneten <table> zu scrollen.

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 die <tr>-Elemente automatisch innerhalb eines <tbody>-Elements einfasst, wenn die Zeilen nicht in einem Tabellengruppierungselement (<tbody>, <tfoot> oder <thead>) verschachtelt sind und, wie in diesem Beispiel, direkte 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, in dem eine background-color für das <tbody>-Element angegeben ist, und das tbody als Teil eines zusätzlichen CSS-Selectors verwendet wird. Alternativ können Entwicklerwerkzeuge für 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;
}

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 explizit ein <tbody>-Element, um die Tabelle in semantische Abschnitte zu gliedern. Der Tabellenkopf enthält die Spaltenüberschriften (<th>-Elemente). Das <tbody>-Element repräsentiert den Körperabschnitt der Tabelle, der eine Anzahl von Zeilen (<tr>-Elemente) enthält, mit den Hauptdaten der Tabelle, die die Daten der einzelnen Studenten sind.

Die Verwendung solcher Tabellengruppen und semantischer Markierungen ist nicht nur nützlich für die visuelle Darstellung (ü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 fast unverändert im Vergleich zum vorherigen Beispiel, abgesehen von einigen grundlegenden Stylings, um den Tabellenkopf hervorzuheben, damit die Spaltenüberschriften sich von den Daten 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: 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

Mehrfache Körper

Dieses Beispiel erweitert und verbessert die Tabelle aus dem obigen Beispiel weiter, indem es mehrere Körperabschnitte einführt.

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

HTML

Aufbauend auf der Tabelle im vorherigen Basisbeispiel werden weitere Studenten 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 Kopfzeile des Blocks dient und den Hauptfachtitel innerhalb eines <th>-Elements anzeigt, das das colspan-Attribut verwendet, um die Überschrift über alle drei Spalten der Tabelle zu spannen. 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

Die meisten CSS sind unverändert. Es wird jedoch 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 Überschriften verwendet, die das entsprechende Hauptfach jedes Tabellenabschnitts angeben.

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 Körperzelle festzulegen
• border: CSS-Eigenschaft zur Steuerung der Ränder von Körperzellen
• text-align: CSS-Eigenschaft, um den Inhalt jeder Körperzelle horizontal auszurichten
• vertical-align: CSS-Eigenschaft, um den Inhalt jeder Körperzelle vertikal auszurichten