<tbody>: Das Tabelle-Körper-Element

Dieses Element enthält die globalen Attribute.

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind hier aus Gründen der Aktualisierung bestehenden Codes und aus historischem Interesse dokumentiert.

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 char-Wert den textuellen Inhalt am durch das char-Attribut definierten Zeichen und dem durch das charoff-Attribut definierten Versatz aus. Nutzen Sie stattdessen die text-align CSS-Eigenschaft, da dieses Attribut veraltet ist.

bgcolor Veraltet

Definiert die Hintergrundfarbe jeder Tabellenzelle. Der Wert ist eine HTML-Farbe; entweder ein 6-stelliger hexadezimaler RGB-Code, vorangestellt mit einem #, oder ein Farbenschlüsselwort. Andere CSS-<color>-Werte werden nicht unterstützt. Nutzen Sie stattdessen die background-color CSS-Eigenschaft, da dieses Attribut veraltet ist.

char Veraltet

Gibt die Ausrichtung des Inhalts an einem Zeichen jeder Tabellenzelle an. Typische Werte hierfür beinhalten einen Punkt (.), um Zahlen oder Währungswerte auszurichten. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert.

charoff Veraltet

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

valign Veraltet

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

• Das <tbody> wird nach jedem <caption>, <colgroup>, und <thead>-Element platziert.
• Wenn <tr>-Elemente als direkte Kinder des <table> angegeben sind (siehe "Tag-Auslassung" in der technischen Zusammenfassung für eine Beschreibung, wann dies gültig ist), dann wird das vom Browser generierte Markup ein <tbody>-Element enthalten, das sie umschließt. Als Ergebnis 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, die jeweils separat formatiert werden können, wenn gewünscht. Wenn die Markierung nicht als aufeinanderfolgende Elemente erfolgt, korrigieren Browser diesen Autorfehler und stellen sicher, dass jedes <thead>- und <tfoot>-Element als erstes bzw. letztes Element der Tabelle gerendert wird.
• Zusammen mit seinen verwandten <thead>- und <tfoot>-Elementen bietet das <tbody>-Element nützliche semantische Informationen und kann bei der Ausgabe für Bildschirm oder Druck verwendet werden. Das Spezifizieren solcher Tabellengruppen liefert auch wertvolle Kontextinformationen für Unterstützungstechnologien, einschließlich Bildschirmleser und Suchmaschinen.
• Beim Drucken eines Dokuments, im Fall einer mehrseitigen Tabelle, spezifizieren die <thead>- und <tfoot>-Elemente normalerweise Informationen, 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 ein Fenster) präsentiert wird, das nicht groß genug ist, um die gesamte Tabelle anzuzeigen, kann der User Agent den Benutzer die Inhalte der <thead>, <tbody>, <tfoot>, und <caption>-Blöcke separat scrollen lassen.

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

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

HTML

Hier wird eine sehr einfache Tabelle mit einigen Tabellenzeilen (<tr>-Elementen) 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 festgelegt ist und das tbody als Teil eines zusätzlichen CSS-Selektors verwendet wird. Alternativ können Entwicklerwerkzeuge für Browser 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 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 strukturieren. Der Tabellenkopf enthält die Spaltenüberschriften (<th> Elemente). Das <tbody>-Element stellt den Tabellenkörper dar, der eine Anzahl von Zeilen (<tr> Elemente) mit den Hauptdaten der Tabelle enthält, die die Daten jedes Schülers sind.

Die Verwendung solcher Tabellengruppen und semantischer Markup ist nicht nur nützlich für die visuelle Darstellung (über CSS-Styling) und Kontextinformationen für unterstützende Technologien; vielmehr hilft die explizite Verwendung des <tbody>-Elements dem Browser, die vorgesehene 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, mit Ausnahme von einigen grundlegenden Stilen, um den Tabellenkopf hervorzuheben, sodass die Überschriften der Spalten sich von den Daten im Tabellenkörper abheben. Wie im obigen Beispiel wird der tbody Typ-Selektor verwendet, um die Zellen des Körpers 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 aus dem obigen Beispiel noch mehr, indem es mehrere Körperabschnitte einführt.

Die Verwendung mehrerer <tbody>-Elemente ermöglicht die Erstellung von Zeilengruppen innerhalb einer Tabelle. Jeder Tabellenkörper kann potenziell seine eigene Kopfzeile oder -zeilen haben; es darf jedoch nur ein <thead>-Element pro Tabelle 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 einfachen Beispiel werden mehr Studenten hinzugefügt, und anstatt das Hauptfach jedes Studenten auf jeder Zeile aufzulisten, werden die Studenten nach Hauptfach gruppiert. Beachten Sie, dass jedes Hauptfach in einem eigenen <tbody>-Block eingeschlossen ist, wobei die erste Zeile (<tr>-Element) als Kopf des Blocks dient und den Hauptfachtitel in einem <th>-Element anzeigt, das das colspan-Attribut verwendet, um die Kopfzeile über alle drei Spalten der Tabelle zu spannen. Jede verbleibende Zeile 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 größte Teil des CSS bleibt unverändert. Allerdings wird ein etwas subtilerer Stil für Kopfzellen hinzugefügt, die direkt in einem <tbody> enthalten sind (im Gegensatz zu denen, die im <thead> enthalten sind). 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: #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

• Lernen: HTML-Tabellen-Grundlagen
• <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 von 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