<table>: Das Table-Element

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das <table> HTML-Element stellt tabellarische Daten dar, also Informationen, die in einer zweidimensionalen Tabelle präsentiert werden, bestehend aus Zeilen und Spalten von Zellen, die Daten enthalten.

Probieren Sie es aus

<table>
  <caption>
    Front-end web developer course 2021
  </caption>
  <thead>
    <tr>
      <th scope="col">Person</th>
      <th scope="col">Most interest in</th>
      <th scope="col">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Chris</th>
      <td>HTML tables</td>
      <td>22</td>
    </tr>
    <tr>
      <th scope="row">Dennis</th>
      <td>Web accessibility</td>
      <td>45</td>
    </tr>
    <tr>
      <th scope="row">Sarah</th>
      <td>JavaScript frameworks</td>
      <td>29</td>
    </tr>
    <tr>
      <th scope="row">Karen</th>
      <td>Web performance</td>
      <td>36</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="2">Average age</th>
      <td>33</td>
    </tr>
  </tfoot>
</table>

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;
  font-weight: bold;
}

thead,
tfoot {
  background-color: rgb(228 240 245);
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

td:last-of-type {
  text-align: center;
}

tbody > tr:nth-of-type(even) {
  background-color: rgb(237 238 242);
}

tfoot th {
  text-align: right;
}

tfoot td {
  font-weight: bold;
}

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 für die Aktualisierung bestehender Codes und aus historischem Interesse dokumentiert.

align

Gibt die horizontale Ausrichtung der Tabelle innerhalb ihres Elternelements an. Die möglichen aufgezählten Werte sind left, center und right. Verwenden Sie stattdessen die CSS-Eigenschaften margin-inline-start und margin-inline-end, da dieses Attribut veraltet ist.

bgcolor

Definiert die Hintergrundfarbe der Tabelle. Der Wert ist eine HTML-Farbe; entweder ein 6-stelliger hexadezimaler RGB-Code, mit einem #-Präfix oder ein Farbbegriff. Andere CSS <color>-Werte werden nicht unterstützt. Verwenden Sie stattdessen die CSS-Eigenschaft background-color, da dieses Attribut veraltet ist.

border

Definiert die Größe des Rahmens um die Tabelle als nicht-negative Ganzzahl (in Pixeln). Wenn auf 0 gesetzt, wird das Attribut frame auf void gesetzt. Verwenden Sie stattdessen die CSS-Eigenschaft border, da dieses Attribut veraltet ist.

cellpadding

Definiert den Abstand zwischen dem Inhalt einer Zelle und ihrem Rand. Dieses Attribut ist obsolet: Stattdessen sollte die CSS-Eigenschaft padding auf die <th> und <td>-Elemente angewendet werden.

cellspacing

Definiert die Größe des Abstands zwischen zwei Zellen. Dieses Attribut ist obsolet: Stattdessen sollte die CSS-Eigenschaft border-spacing auf das <table>-Element gesetzt werden. Beachten Sie, dass dies keine Wirkung hat, wenn die CSS-Eigenschaft border-collapse des <table>-Elements auf collapse gesetzt ist.

frame

Definiert, welche Seite des Rahmens um die Tabelle angezeigt werden muss. Die möglichen aufgezählten Werte sind void, above, below, hsides, vsides, lhs, rhs, box und border. Verwenden Sie stattdessen die CSS-Eigenschaften border-style und border-width, da dieses Attribut veraltet ist.

rules

Definiert, wo in der Tabelle Regeln (Rahmen) angezeigt werden. Die möglichen aufgezählten Werte sind none (Standardwert), groups (<thead>, <tbody> und <tfoot>-Elemente), rows (horizontale Linien), cols (vertikale Linien) und all (Rahmen um jede Zelle). Verwenden Sie stattdessen die CSS-Eigenschaft border auf den entsprechenden tabellenbezogenen Elementen sowie auf der <table> selbst, da dieses Attribut veraltet ist.

summary

Definiert einen alternativen Text, der den Inhalt der Tabelle zusammenfasst. Verwenden Sie stattdessen das <caption>-Element, da dieses Attribut veraltet ist.

width

Gibt die Breite der Tabelle an. Verwenden Sie stattdessen die CSS-Eigenschaft width, da dieses Attribut veraltet ist.

Hinweis: Obwohl keine HTML-Spezifikation height als ein <table>-Attribut beinhaltet, unterstützen einige Browser eine nicht-standardmäßige Interpretation von height. Der wertlose Wert legt eine minimale absolute Höhe in Pixeln fest. Wenn als Prozentwert gesetzt, wird die minimale Tabellengröße relativ zur Höhe des Elternelements sein. Verwenden Sie stattdessen die CSS-Eigenschaft min-height, da dieses Attribut veraltet ist.

Visuelles Layout der Tabelleninhalte

Die folgenden Elemente gehören zur Tabellenstruktur:

Das <table>-Box etabliert einen Tabellen-Formatierungskontext. Elemente innerhalb der <table> erzeugen rechteckige Boxen. Jede Box nimmt entsprechend der folgenden Regeln eine Anzahl von Tabellenzellen ein:

  1. Die Zeilenboxen füllen die Tabelle in der Quelltextreihenfolge von oben nach unten. Jede Zeilenbox nimmt eine Reihe von Zellen ein.
  2. Eine Zeilengruppebox nimmt eine oder mehrere Zeilenboxen ein.
  3. Spaltenboxen werden in Quelltextreihenfolge nebeneinander platziert. Abhängig vom Wert des dir-Attributs sind die Spalten in einer von links nach rechts oder von rechts nach links Richtung angeordnet. Eine Spaltenbox nimmt eine oder mehrere Spalten von Tabellenzellen ein.
  4. Eine Spaltengruppebox nimmt eine oder mehrere Spaltenboxen ein.
  5. Eine Zellenbox kann sich über mehrere Zeilen und Spalten erstrecken. Benutzeragenten schneiden Zellen zu, damit sie in die verfügbare Anzahl von Zeilen und Spalten passen.

Tabellenzellen haben Polsterung. Boxen, die eine Tabelle bilden, haben keine Ränder.

Tabellenschichten und Transparenz

Für Stylingzwecke können die Tabellenelemente als in sechs übereinandergelegte Schichten eingebracht betrachtet werden:

Schichten der Tabellenelemente

Der Hintergrund, der auf ein Element in einer Schicht festgelegt ist, wird nur sichtbar sein, wenn die Schichten darüber transparenten Hintergrund haben. Eine fehlende Zelle wird so gerendert, als ob eine anonyme Tabellenzellenbox diesen Platz einnähme.

Barrierefreiheit

Überschriften

Indem Sie ein <caption>-Element bereitstellen, dessen Wert den Zweck der Tabelle klar und prägnant beschreibt, helfen Sie den Menschen zu entscheiden, ob sie den Rest des Tabelleninhalts prüfen oder es überspringen müssen.

Dies hilft Menschen, die mit der Hilfe von Hilfstechnologien wie einem Bildschirmleser navigieren, Personen mit Sehschwächen und Menschen mit kognitiven Einschränkungen.

Reihen- und Spalten-Scope

Das scope-Attribut auf Kopfzellen (<th>-Elemente) ist in einfachen Kontexten redundant, da der Scope abgeleitet wird. Einige Hilfstechnologien könnten jedoch falsche Schlussfolgerungen ziehen, daher kann das Angeben des Kopfbereichs die Benutzererfahrung verbessern. In komplexen Tabellen kann scope angegeben werden, um notwendige Informationen über die mit einem Kopfbereich verbundenen Zellen bereitzustellen.

Komplexe Tabellen

Hilfstechnologien wie Bildschirmleser können Schwierigkeiten beim Parsen von Tabellen haben, die so komplex sind, dass Kopfzellen nicht auf strikt horizontale oder vertikale Weise zugeordnet werden können. Dies wird typischerweise durch die Anwesenheit der Attribute colspan und rowspan angezeigt.

Idealerweise sollten Sie alternative Möglichkeiten zur Darstellung des Inhalts der Tabelle in Erwägung ziehen, einschließlich der Aufteilung in eine Sammlung kleinerer, verwandter Tabellen, die nicht auf die Verwendung der Attribute colspan und rowspan angewiesen sind. Dies hilft nicht nur Menschen, die Hilfstechnologien verwenden, den Inhalt der Tabelle zu verstehen, sondern kann auch Menschen mit kognitiven Einschränkungen zugutekommen, die Schwierigkeiten haben, die Assoziationen der Tabellenlayout zu verstehen.

Wenn die Tabelle nicht aufgeteilt werden kann, verwenden Sie eine Kombination aus den Attributen id und headers, um jede Tabellenzelle programmatisch mit dem Kopfbereich (<th>-Elemente) zu verknüpfen, mit dem sie verbunden ist.

Beispiele

Die folgenden Beispiele umfassen Tabellen mit stetig zunehmender Komplexität. Siehe auch unseren Einsteiger-Leitfaden zum Styling von Tabellen für Informationen zur Gestaltung von Tabellen, einschließlich üblicher, nützlicher Techniken.

Da die Struktur einer <table> die Verwendung mehrerer tabellenbezogener HTML-Elemente zusammen mit verschiedenen verbundenen Attributen umfasst, sollen die folgenden Beispiele eine vereinfachte Erklärung bieten, die die Grundlagen und gängigen Standards abdeckt. Zusätzliche und detailliertere Informationen finden Sie auf den entsprechend verlinkten Seiten.

Diese Tabellenbeispiele demonstrieren, wie man eine barrierefreie Tabelle erstellt, die mit HTML strukturiert und mit CSS gestaltet wird.

Aufgrund der Struktur von HTML-Tabellen kann das Markup schnell anwachsen. Aus diesem Grund ist es wichtig, den Zweck der Tabelle und die endgültige Darstellung klar zu definieren, um die geeignete Struktur zu erstellen. Eine logische Struktur mit semantischem Markup ist nicht nur einfacher zu gestalten, sondern ermöglicht nützliche und zugängliche Tabellen, die von allen, einschließlich Suchmaschinen und Benutzern von Hilfstechnologien, verstanden und navigiert werden können.

Das erste Beispiel ist einfach gehalten, mit nachfolgenden Beispielen, die an Komplexität zunehmen. Zuerst entwickeln wir eine sehr grundlegende HTML-Tabellenstruktur für die Tabelle. Die ersten beiden Beispiele enthalten keine Tabellensektionsgruppen wie einen definierten Kopf, Körper oder Fuß und beinhalten kein Cell-Spanning oder explizit definierte Zellbeziehungen. Nicht einmal eine Überschrift wird bereitgestellt. Im Verlauf der Beispiele werden sie schrittweise um alle Tabelleigenschaften erweitert, die eine komplexe Datentabelle besitzen sollte.

Grundlegende Tabelle

Dieses Beispiel enthält eine sehr grundlegende Tabelle mit drei Zeilen und zwei Spalten. Um die Standardstile des Browsers zu demonstrieren, wurde in diesem Beispiel kein CSS eingefügt.

HTML

Die Tabellenzeilen werden mit <tr>-Elementen definiert, und die Spalten werden mit Tabellenkopf- und Datenzellen darin definiert. Die erste Zeile enthält die Kopfzellen (<th>-Elemente), die als Spaltenköpfe für die Datenzellen (<td>-Elemente) dienen. Jedes Element (<th> oder <td>) pro Zeile befindet sich in seiner jeweiligen Spalte – das heißt, das erste Element einer Zeile befindet sich in der ersten Spalte, und das zweite Element dieser Zeile befindet sich in der zweiten Spalte.

html
<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Maria Sanchez</td>
    <td>28</td>
  </tr>
  <tr>
    <td>Michael Johnson</td>
    <td>34</td>
  </tr>
</table>

Ergebnis

Es gibt kein benutzerdefiniertes CSS oder Benutzer-Stylesheet, das auf diese Tabelle angewendet wird. Die Gestaltung ergibt sich ausschließlich aus dem User-Agent-Stylesheet.

Erweiterte Tabelle mit Kopfzellen

Dieses Beispiel erweitert die grundlegende Tabelle, erweitert den Inhalt und fügt grundlegende CSS-Stile hinzu.

HTML

Die Tabelle umfasst jetzt vier Zeilen (<tr>-Elemente) mit jeweils vier Spalten. Die erste Zeile ist eine Reihe von Kopfzellen (die erste Zeile enthält nur <th>-Elemente). Nachfolgende Zeilen enthalten eine Kopfspalte (<th>-Elemente als erste Kinderlemente jeder Zeile) und drei Datenspalten (<td>-Elemente). Da keine Tabellensetzungselemente verwendet werden, definiert der Browser automatisch die Inhaltsgruppenstruktur, d.h. alle Zeilen sind innerhalb des Körpers der Tabelle eines impliziten <tbody>-Elements enthalten.

html
<table>
  <tr>
    <th>Name</th>
    <th>ID</th>
    <th>Member Since</th>
    <th>Balance</th>
  </tr>
  <tr>
    <th>Margaret Nguyen</th>
    <td>427311</td>
    <td><time datetime="2010-06-03">June 3, 2010</time></td>
    <td>0.00</td>
  </tr>
  <tr>
    <th>Edvard Galinski</th>
    <td>533175</td>
    <td><time datetime="2011-01-13">January 13, 2011</time></td>
    <td>37.00</td>
  </tr>
  <tr>
    <th>Hoshi Nakamura</th>
    <td>601942</td>
    <td><time datetime="2012-07-23">July 23, 2012</time></td>
    <td>15.00</td>
  </tr>
</table>

CSS

Mit CSS bieten wir das grundlegende Styling, um Linien um die Komponenten der Tabelle zu erstellen, um die Datenstruktur klarer zu machen. Das CSS fügt eine durchgezogene Linie um die <table> und um jede Zelle der Tabelle hinzu, einschließlich der mit <th> und <td>-Elementen spezifizierten, die jede Kopf- und Datumszelle abgrenzen.

css
table {
  border: 2px solid rgb(140 140 140);
}

th,
td {
  border: 1px solid rgb(160 160 160);
}

Ergebnis

Spezifizieren von Zellbeziehungen

Bevor Sie fortfahren, die Tabelle auf komplexere Weise zu erweitern, ist es ratsam, die Barrierefreiheit zu verbessern, indem Beziehungen zwischen den Kopf- und Datenzellen (<th> und <td>-Elemente) definiert werden.

HTML

Dies wird erreicht, indem das scope-Attribut auf den <th>-Elementen eingeführt und die Werte auf den entsprechenden col (Spalten-) oder row (Zeilen-) Wert gesetzt werden.

html
<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">ID</th>
    <th scope="col">Member Since</th>
    <th scope="col">Balance</th>
  </tr>
  <tr>
    <th scope="row">Margaret Nguyen</th>
    <td>427311</td>
    <td><time datetime="2010-06-03">June 3, 2010</time></td>
    <td>0.00</td>
  </tr>
  <tr>
    <th scope="row">Edvard Galinski</th>
    <td>533175</td>
    <td><time datetime="2011-01-13">January 13, 2011</time></td>
    <td>37.00</td>
  </tr>
  <tr>
    <th scope="row">Hoshi Nakamura</th>
    <td>601942</td>
    <td><time datetime="2012-07-23">July 23, 2012</time></td>
    <td>15.00</td>
  </tr>
</table>

Das CSS und das visuelle Ergebnis bleiben unverändert – die Anpassung bietet wertvolle kontextbezogene Informationen für Hilfstechnologien wie Bildschirmleser, um zu helfen, zu identifizieren, welche Zellen zu welchen Köpfen gehören.

Hinweis: Wenn die Tabellenstruktur noch komplexer ist, kann die (zusätzliche) Verwendung des headers-Attributs auf den <th>- und <td>-Elementen die Barrierefreiheit verbessern und Hilfstechnologien helfen, die Beziehungen zwischen Zellen zu identifizieren; siehe Komplexe Tabellen.

Explizite Spezifizierung von Tabellenabschnittsgruppen

Zusätzlich zur Verbesserung der Barrierefreiheit durch das Speichern von Zellbeziehungen können die Semantik der Tabelle durch das Einführen von Tabellenabschnittsgruppen verbessert werden.

HTML

Da die erste Zeile (<tr>-Element) nur Spaltenkopfzellen enthält und den Kopf für den Rest des Tabelleninhalts bereitstellt, kann sie in das <thead>-Element eingeschlossen werden, um diese Zeile explizit als den Oberabschnitt der Tabelle zu kennzeichnen. Darüber hinaus kann das, was automatisch durch den Browser erreicht wird, auch ausdrücklich definiert werden – der Körperabschnitt der Tabelle, der die Hauptdaten der Tabelle enthält, wird angegeben, indem die entsprechenden Zeilen im <tbody>-Element eingeschlossen werden. Die explizite Verwendung des <tbody>-Elements hilft dem Browser, die beabsichtigte Tabellenstruktur zu erstellen und unerwünschte Ergebnisse zu vermeiden.

html
<table>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">ID</th>
      <th scope="col">Member Since</th>
      <th scope="col">Balance</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyen</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">June 3, 2010</time></td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="row">Edvard Galinski</th>
      <td>533175</td>
      <td><time datetime="2011-01-13">January 13, 2011</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="row">Hoshi Nakamura</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">July 23, 2012</time></td>
      <td>15.00</td>
    </tr>
  </tbody>
</table>

Wieder einmal bleiben das CSS und das visuelle Ergebnis unverändert – die explizite Angabe solcher Tabellenabschnittsgruppen bietet wertvolle kontextbezogene Informationen für Hilfstechnologien, einschließlich Bildschirmleser und Suchmaschinen, sowie für das Styling im CSS, was in einem späteren Beispiel gezeigt wird.

Spalten- und Zeilen-Spannung

In diesem Beispiel erweitern wir die Tabelle noch mehr, indem wir eine Spalte hinzufügen und einen mehrzeiligen Kopfbereich einführen.

HTML

Aufbauend auf der bisher erstellten Tabelle wird in jeder Körperzeile eine neue Spalte für ein "Membership End Date" mit dem <td>-Element hinzugefügt. Eine zusätzliche Zeile (<tr>-Element) wird auch innerhalb des Kopfbereichs (<thead>-Element) hinzugefügt, um einen "Membership Dates"-Kopfbereich als Überschrift für die "Joined" und "Canceled"-Spalten einzuführen.

Das Erstellen der zweiten Kopfzeile beinhaltet das Hinzufügen der Attribute colspan und rowspan zu den <th>-Elementen, um die Kopfzellen den korrekten Spalten und Zeilen zuzuweisen.

html
<table>
  <thead>
    <tr>
      <th scope="col" rowspan="2">Name</th>
      <th scope="col" rowspan="2">ID</th>
      <th scope="col" colspan="2">Membership Dates</th>
      <th scope="col" rowspan="2">Balance</th>
    </tr>
    <tr>
      <th scope="col">Joined</th>
      <th scope="col">Canceled</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyen</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">June 3, 2010</time></td>
      <td>n/a</td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="row">Edvard Galinski</th>
      <td>533175</td>
      <td><time datetime="2011-01-13">January 13, 2011</time></td>
      <td><time datetime="2017-04-08">April 8, 2017</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="row">Hoshi Nakamura</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">July 23, 2012</time></td>
      <td>n/a</td>
      <td>15.00</td>
    </tr>
  </tbody>
</table>

Ergebnis

Der Kopfbereich hat jetzt zwei Zeilen, eine mit den Kopfzeilen (<th>-Elemente) "Name", "ID", "Membership Dates" und "Balance", und ein "Membership Dates"-Kopfbereich mit zwei Unterköpfen, die sich in einer zweiten Zeile befinden: "Joined" und "Canceled". Dies wird erreicht, indem:

  • Die "Name"-, "ID"- und "Balance"-Kopfzellen der ersten Zeile beide Tabellenkopfzeilen durch das Verwenden des rowspan-Attributs überspannen, wodurch sie jeweils zwei Zeilen hoch sind.
  • Die "Membership Dates"-Kopfzelle der ersten Zeile zwei Spalten durch das Verwenden des colspan-Attributs überspannt, wodurch sie zwei Spalten breit ist.
  • Die zweite Zeile enthält nur die beiden Kopfzellen "Joined" und "Canceled", da die anderen drei Spalten mit den Zellen der ersten Zeile zusammengeführt sind, die zwei Zeilen überspannen. Die beiden Kopfzellen sind korrekt unter dem "Membership Dates"-Kopfbereich positioniert.

Tabellenüberschrift und Spaltenzusammenfassung

Es ist eine gängige und empfehlenswerte Praxis, eine Zusammenfassung für den Inhalt der Tabelle bereitzustellen, die es den Benutzern ermöglicht, schnell die Relevanz der Tabelle zu bestimmen. Überdies wird die "Balance"-Spalte durch die Anzeige der Summe der Kontostände der einzelnen Mitglieder zusammengefasst.

HTML

Eine Tabellenzusammenfassung wird durch die Verwendung einer Tabellensummary (<caption>-Element) als erstes Kind des <table> hinzugefügt. Die Zusammenfassung liefert die zugängliche Beschreibung für die Tabelle.

Zuletzt wird ein Tabellenfuß (<tfoot>-Element) unterhalb des Körpers hinzugefügt, mit einer Zeile, die die "Balance"-Spalte durch die Anzeige einer Summe zusammenfasst. Die zuvor eingeführten Elemente und Attribute werden angewendet.

html
<table>
  <caption>
    Status of the club members 2021
  </caption>
  <thead>
    <tr>
      <th scope="col" rowspan="2">Name</th>
      <th scope="col" rowspan="2">ID</th>
      <th scope="col" colspan="2">Membership Dates</th>
      <th scope="col" rowspan="2">Balance</th>
    </tr>
    <tr>
      <th scope="col">Joined</th>
      <th scope="col">Canceled</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyen</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">June 3, 2010</time></td>
      <td>n/a</td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="row">Edvard Galinski</th>
      <td>533175</td>
      <td><time datetime="2011-01-13">January 13, 2011</time></td>
      <td><time datetime="2017-04-08">April 8, 2017</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="row">Hoshi Nakamura</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">July 23, 2012</time></td>
      <td>n/a</td>
      <td>15.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="4">Total balance</th>
      <td>52.00</td>
    </tr>
  </tfoot>
</table>

Ergebnis

Grundlegendes Table-Styling

Lassen Sie uns einen grundlegenden Stil auf die Tabelle anwenden, um die Schriftart anzupassen und eine background-color zu den Header- und Footer-Zeilen hinzuzufügen. Dieses Mal ändert sich das HTML nicht, also lassen Sie uns direkt in das CSS eintauchen.

CSS

Während hier eine font-Eigenschaft auf das <table>-Element hinzugefügt wird, um eine optisch ansprechendere Schriftart (oder eine abscheuliche serifenlose Schriftart, je nach persönlicher Meinung) festzulegen, ist der interessante Teil der zweite Stil, bei dem die <tr>-Elemente innerhalb der <thead> und <tfoot> einen hellblauen background-color erhalten. Dies ist eine Möglichkeit, einer Hintergrundfarbe schnell auf alle Zellen in bestimmten Abschnitten gleichzeitig anzuwenden.

css
table {
  border: 2px solid rgb(140 140 140);
  font:
    16px "Open Sans",
    Helvetica,
    Arial,
    sans-serif;
}

thead > tr,
tfoot > tr {
  background-color: rgb(228 240 245);
}

th,
td {
  border: 1px solid rgb(160 160 160);
}

Ergebnis

Fortgeschrittenes Table-Styling

Jetzt werden wir alles daransetzen, mit Stilen auf den Zeilen im Kopf- und Körperbereich, einschließlich alternierender Zeilenfarben, Zellen mit verschiedenen Farben je nach Position innerhalb einer Zeile und so weiter. Schauen wir uns zuerst das Ergebnis an.

Ergebnis

So sieht die endgültige Tabelle aus:

Es gibt keine Änderung am HTML. Sehen Sie, was eine ordnungsgemäße Vorbereitung der HTML-Struktur bewirken kann?

CSS

Das CSS ist diesmal viel aufwendiger. Es ist nicht kompliziert, aber es passiert viel. Lassen Sie uns das aufschlüsseln.

Hier werden die Eigenschaften border-collapse und border-spacing hinzugefügt, um den Abstand zwischen den Zellen zu eliminieren und angrenzende Ränder zu einem einzigen Rand anstelle von doppelten Rändern zusammenzufassen. Zusätzlich wird das <caption> mit der Eigenschaft caption-side an das bottom der Tabelle gesetzt:

css
table {
  border-collapse: collapse;
  border-spacing: 0;
  border: 2px solid rgb(140 140 140);
  font:
    16px "Open Sans",
    Helvetica,
    Arial,
    sans-serif;
}

caption {
  caption-side: bottom;
  padding: 10px;
  font-weight: bold;
}

Als Nächstes wird die Eigenschaft padding verwendet, um allen Tabellenzellen Platz um ihren Inhalt herum zu geben. Die Eigenschaft vertical-align richtet den Inhalt der Kopfzellen am bottom der Zelle aus, was bei den Zellen im Kopfbereich zu sehen ist, die zwei Zeilen überspannen:

css
th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 4px 6px;
}

th {
  vertical-align: bottom;
}

Die nächste CSS-Regel legt die background-color aller <tr>-Elemente im Tabellenkopf fest (wie durch <thead> angegeben). Dann wird der untere Rand des Kopfbereichs auf eine Linie von zwei Pixel Breite gesetzt. Beachten Sie jedoch, dass wir den Selektor :nth-of-type verwenden, um die Eigenschaft border-bottom auf die zweite Reihe im Kopfbereich anzuwenden. Warum? Weil der Kopf aus zwei Zeilen besteht, die von einigen der Zellen überspannt sind. Das bedeutet, dass dort tatsächlich zwei Reihen vorhanden sind; die Anwendung des Stils auf die erste Reihe würde nicht das erwartete Ergebnis liefern:

css
thead > tr {
  background-color: rgb(228 240 245);
}

thead > tr:nth-of-type(2) {
  border-bottom: 2px solid rgb(140 140 140);
}

Lassen Sie uns die beiden Kopfzellen "Joined" und "Canceled" mit grünen und roten Farbtönen stylen, um das "Gute" eines neuen Mitglieds und das "Schlechte" einer stornierten Mitgliedschaft darzustellen. Hier graben wir uns mit dem Selektor :last-of-type in die letzte Zeile des Kopfbereichs der Tabelle und geben der ersten Kopfzelle darin (der "Joined"-Kopfzeile) eine grünliche Farbe und der zweiten Kopfzelle darin (der "Canceled"-Kopfzeile) einen rötlichen Farbton:

css
thead > tr:last-of-type > th:nth-of-type(1) {
  background-color: rgb(225 255 225);
}

thead > tr:last-of-type > th:nth-of-type(2) {
  background-color: rgb(255 225 225);
}

Da die erste Spalte ebenfalls hervorgehoben werden soll, wird hier auch ein benutzerdefiniertes Styling hinzugefügt. Diese CSS-Regel stylt die erste Kopfzelle in jeder Zeile des Tabellenkörpers mit der Eigenschaft text-align zur linksbündigen Ausrichtung der Mitgliedsnamen und mit einer etwas anderen background-color:

css
tbody > tr > th:first-of-type {
  text-align: left;
  background-color: rgb(225 229 244);
}

Es ist üblich, zur Verbesserung der Lesbarkeit von Tabellendaten wechselnde Zeilenfarben hinzuzufügen – dies wird manchmal als "Zebra-Stripping" bezeichnet. Fügen wir jedem geraden Reihe eine background-color hinzu:

css
tbody > tr:nth-of-type(even) {
  background-color: rgb(237 238 242);
}

Da es gängige Praxis ist, Währungswerte in Tabellen rechtsbündig auszurichten, lassen Sie uns das hier tun. Dies setzt einfach die Eigenschaft text-align für das letzte <td> in jeder Körperzeile auf right:

css
tbody > tr > td:last-of-type {
  text-align: right;
}

Abschließend wird dem Fußbereich der Tabelle ein ähnliches Styling wie dem Kopfbereich zugewiesen, um ihn ebenfalls hervorzuheben:

css
tfoot > tr {
  border-top: 2px dashed rgb(140 140 140);
  background-color: rgb(228 240 245);
}

tfoot th,
tfoot td {
  text-align: right;
  font-weight: bold;
}

Große Tabellen in kleinen Bereichen anzeigen

Ein häufiges Problem mit Tabellen im Web ist, dass sie auf kleinen Bildschirmen bei großen Inhaltsmengen nicht gut funktionieren und der Weg, sie scrollbar zu machen, nicht offensichtlich ist, insbesondere wenn das Markup möglicherweise aus einem CMS stammt und nicht in einen Wrapper geändert werden kann.

Dieses Beispiel bietet eine Möglichkeit, Tabellen in kleinen Bereichen anzuzeigen. Wir haben den HTML-Inhalt ausgeblendet, da er sehr groß ist und nichts Besonderes daran ist. Das CSS ist in diesem Beispiel nützlicher zu inspizieren.

CSS

Beim Betrachten dieser Stile werden Sie feststellen, dass die display-Eigenschaft der Tabelle auf block gesetzt wurde. Obwohl dies ein Scrollen ermöglicht, verliert die Tabelle einen Teil seiner Integrität und Tabellenzellen versuchen, so klein wie möglich zu werden. Um dieses Problem abzumildern, haben wir auf dem <tbody> die white-space auf nowrap gesetzt. Wir tun dies jedoch nicht für das <thead>, um zu vermeiden, dass lange Titel Spalten breiter machen, als sie für die Anzeige der Daten sein müssen.

Um die Tabellenüberschriften beim Scrollen am Seitenanfang zu halten, haben wir auf den <th>-Elementen die position auf sticky gesetzt. Beachten Sie, dass wir nicht die border-collapse auf collapse gesetzt haben, da der Kopf ansonsten nicht korrekt vom Rest der Tabelle getrennt werden kann.

Da die <table> eine feste Größe hat, ist das hier wichtig gesetzte overflow auf auto, da es die Tabelle scrollbar macht.

css
table,
th,
td {
  border: 1px solid black;
}

table {
  overflow: auto;
  width: 100%;
  max-width: 400px;
  height: 240px;
  display: block;
  margin: 0 auto;
  border-spacing: 0;
}

tbody {
  white-space: nowrap;
}

th,
td {
  padding: 5px 10px;
  border-top-width: 0;
  border-left-width: 0;
}

th {
  position: sticky;
  top: 0;
  background: #fff;
  vertical-align: bottom;
}

th:last-child,
td:last-child {
  border-right-width: 0;
}

tr:last-child td {
  border-bottom-width: 0;
}

Ergebnis

Technische Zusammenfassung

Inhaltskategorien Flow-Inhalt
Erlaubte Inhalte In dieser Reihenfolge:
  1. ein optionales <caption>-Element,
  2. null oder mehr <colgroup>-Elemente,
  3. ein optionales <thead>-Element,
  4. entweder eines der folgenden:
    • null oder mehr <tbody>-Elemente
    • eins oder mehr <tr>-Elemente
  5. ein optionales <tfoot>-Element
Tag-Auslassung Keine, sowohl das Start- als auch das End-Tag sind obligatorisch.
Erlaubte Eltern Jede Komponente, die Flussinhalt akzeptiert
Implizite ARIA-Rolle table
Erlaubte ARIA-Rollen Beliebig
DOM-Schnittstelle [`HTMLTableElement`](/de/docs/Web/API/HTMLTableElement)

Spezifikationen

Specification
HTML
# the-table-element

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch