<tbody>: Das Table Body-Element

Dieses Element enthält die globalen Attribute.

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind hier nur als Referenz dokumentiert, wenn bestehender Code aktualisiert wird, sowie aus historischem Interesse.

align Veraltet

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

bgcolor Veraltet

Legt die Hintergrundfarbe jeder Tabellenzelle fest. Der Wert ist eine HTML-Farbe, entweder ein 6-stelliger hexadezimaler RGB-Code, der mit einem # beginnt, oder ein Farbbegriff. Andere CSS <color>-Werte werden nicht unterstützt. Verwenden Sie stattdessen die CSS-Eigenschaft background-color, 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 Geldbeträge auszurichten. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert.

charoff Veraltet

Gibt die Anzahl der Zeichen an, um den Tabellenzellinhalt von dem Zeichenversatz auszurichten, der durch das char-Attribut angegeben ist.

valign Veraltet

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

• Das <tbody>-Element wird nach jedem <caption>, <colgroup> und <thead>-Element platziert.
• Wenn <tr>-Elemente als direkte Kinder des <table>-Elements angegeben werden (siehe "Tag omission" in der technischen Zusammenfassung für eine Beschreibung, wann dies gültig ist), enthält das vom Browser generierte Markup ein <tbody>-Element, das sie kapselt. Infolgedessen werden CSS-Selektoren wie table > tr diese Elemente nicht auswählen. Siehe auch das Beispiel Not specifying a body.
• Es ist erlaubt, mehr als ein <tbody> pro Tabelle zu verwenden, solange sie alle aufeinander folgend sind. Dies ermöglicht es, die Zeilen (<tr>-Elemente) in großen Tabellen in Abschnitte zu unterteilen, von denen jeder separat formatiert werden kann, wenn gewünscht. Wenn sie nicht als aufeinander folgende Elemente markiert sind, korrigieren Browser diesen Autorfehler, indem sie sicherstellen, dass <thead>- und <tfoot>-Elemente als erste bzw. letzte Elemente der Tabelle angezeigt werden.
• Zusammen mit den zugehörigen <thead>- und <tfoot>-Elementen bietet das <tbody>-Element nützliche semantische Informationen und kann sowohl bei der Bildschirm- als auch bei der Druckausgabe verwendet werden. Das Spezifizieren solcher Tabelleninhaltsgruppen bietet auch wertvolle kontextuelle Informationen für unterstützende Technologien, einschließlich Bildschirmlesegeräten und Suchmaschinen.
• Beim Drucken eines Dokuments geben die <thead>- und <tfoot>-Elemente im Falle einer mehrseitigen Tabelle normalerweise Informationen an, die auf jeder Seite gleich bleiben oder zumindest sehr ähnlich sind, während der Inhalt des <tbody>-Elements pageweise unterschiedlich sein wird.
• Wenn eine Tabelle in einem Bildschirmkontext (wie ein Fenster) vorgestellt wird, der nicht groß genug ist, um die gesamte Tabelle anzuzeigen, kann der User-Agent dem Benutzer ermöglichen, die Inhalte der <thead>, <tbody>, <tfoot> und <caption>-Blöcke separat zu scrollen.

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

Dieses Beispiel zeigt, dass der Browser <tr>-Elemente automatisch in ein <tbody>-Element kapselt, wenn die Zeilen nicht innerhalb eines Tabellen-Gruppenelements (<tbody>, <tfoot> oder <thead>) eingebettet und, wie in diesem Beispiel, direkte Kinder des <table>-Elements sind.

HTML

Hier wird eine sehr einfache Tabelle mit einigen Zeilen (<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 angegeben 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

Dieses Beispiel erweitert und verbessert die Basis-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 strukturieren. Der Tabellenkopf enthält die Spaltenüberschriften (<th>-Elemente). Das <tbody>-Element repräsentiert den Hauptbereich der Tabelle, der eine Reihe von Zeilen (<tr>-Elemente) mit den Hauptdaten der Tabelle darstellt, welche die Daten jedes Schülers sind.

Die Verwendung solcher Tabelleninhaltsgruppen und semantischer Markierungen ist nicht nur für die visuelle Präsentation (über CSS-Styling) und kontextuelle Informationen für assistierende Technologien nützlich; zudem 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 gegenüber dem vorherigen Beispiel, mit Ausnahme einiger grundlegender Stile, um den Tabellenkopf hervorzuheben, damit die Überschriften der Spalten sich von den Daten im Tabellenkörper abheben. Wie im obigen Beispiel wird der tbody Typselektor verwendet, um die Tabellendatenzellen 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 vom obigen Beispiel weiter, indem mehrere Body-Abschnitte eingeführt werden.

Der Einsatz mehrerer <tbody>-Elemente ermöglicht es, Reihen innerhalb einer Tabelle zu gruppieren. Jeder Tabellenkörper kann potenziell seine eigene Kopfzeile oder eigene Kopfzeilen haben; es darf jedoch nur ein <thead>-Element pro Tabelle geben! Aufgrund dessen können <tr>-Elemente mit <th>-Elementen verwendet werden, um Überschriften innerhalb jedes <tbody> zu erstellen.

HTML

Aufbauend auf der Tabelle im vorherigen grundlegenden Beispiel werden mehr Studenten hinzugefügt und anstatt das Hauptfach jedes einzelnen Schülers in jeder Zeile aufzuführen, werden die Studenten nach Hauptfach gruppiert. Beachten Sie, dass jedes Hauptfach in seinem eigenen <tbody>-Block eingeschlossen ist, wobei die erste Reihe (<tr>-Element) als Kopfzeile des Blocks dient und den Titel des Hauptfachs innerhalb eines <th>-Elements anzeigt, das das colspan-Attribut verwendet, um die Kopfzeile über alle drei Spalten der Tabelle zu spannen. Jede verbleibende Zeile innerhalb jedes Hauptfachs <tbody> repräsentiert einen Schüler.

<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-Eigenschaften sind unverändert. Es wird jedoch ein subtilerer Stil für Kopfzeilenzellen hinzugefügt, die direkt innerhalb eines <tbody> anstelle des <thead>-Elements enthalten sind. Dies wird für die Überschriften verwendet, die das entsprechende Hauptfach jeder 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: #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

• Learn: HTML Basics zu Tabellen
• <caption>, <col>, <colgroup>, <table>, <td>, <tfoot>, <th>, <thead>, <tr>: Weitere tabellezogene 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