<table>: Das Tabellenelement

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 repräsentiert tabellarische Daten, d.h. Informationen, die in einer zweidimensionalen Tabelle aus Zeilen und Spalten von Zellen mit Daten präsentiert werden.

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 dokumentiert, um bestehenden Code zu aktualisieren und aus historischen Gründen.

align

Gibt die horizontale Ausrichtung der Tabelle innerhalb ihres Elternelements an. Die möglichen aufgeführten 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-stelliges hexadezimales RGB-Kürzel, das mit einem # beginnt, oder ein Farbname. Andere CSS <color> Werte werden nicht unterstützt. Verwenden Sie stattdessen die CSS-Eigenschaft background-color, da dieses Attribut veraltet ist.

border

Definiert als nicht-negative Ganzzahl (in Pixel) die Größe des Rahmens, der die Tabelle umgibt. Wird 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 veraltet: Anstatt es zu verwenden, wenden Sie die CSS-Eigenschaft padding auf die <th> und <td> Elemente an.

cellspacing

Definiert die Größe des Abstands zwischen zwei Zellen. Dieses Attribut ist veraltet: Anstatt es zu verwenden, setzen Sie die CSS-Eigenschaft border-spacing auf das <table> Element. 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 herum angezeigt werden muss. Die möglichen aufgeführten 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 die Begrenzungen (Rahmen) angezeigt werden. Die möglichen aufgeführten 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 und auf dem <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 einschließt, unterstützen einige Browser eine nicht standardkonforme Interpretation von height. Der einheitenlose Wert legt eine minimale absolute Höhe in Pixel fest. Wenn es als Prozentwert gesetzt ist, 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.

Visuelle Anordnung der Tabelleninhalte

Folgende Elemente sind Teil der Tabellenstruktur:

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

  1. Die Zeilen-Boxen füllen die Tabelle in der Quellenreihenfolge von oben nach unten. Jede Zeilen-Box nimmt eine Zeile von Zellen ein.
  2. Eine Zeilengruppen-Box nimmt eine oder mehrere Zeilen-Boxen ein.
  3. Spalten-Boxen werden nebeneinander in Quellenreihenfolge platziert. Abhängig vom Wert des dir Attributs werden die Spalten von links nach rechts oder von rechts nach links angeordnet. Eine Spalten-Box nimmt eine oder mehrere Spalten von Tabellenzellen ein.
  4. Eine Spaltengruppe-Box nimmt eine oder mehrere Spalten-Boxen ein.
  5. Eine Zellen-Box kann sich über mehrere Zeilen und Spalten erstrecken. Benutzeragenten kürzen Zellen, um in die verfügbare Anzahl von Zeilen und Spalten zu passen.

Tabellenzellen haben eine Auffüllung (Padding). Boxen, die eine Tabelle bilden, haben keine Ränder (Margins).

Tabellenschichten und Transparenz

Zu Stilisierungszwecken können die Tabellenelemente als auf sechs übereinanderliegenden Schichten gedacht werden:

Tabellenelemente-Schichten

Der Hintergrund, der auf ein Element in einer Schicht gesetzt wird, ist nur sichtbar, wenn die darüber liegenden Schichten einen transparenten Hintergrund haben. Eine fehlende Zelle wird so gerendert, als ob eine anonyme Tabellenzellen-Box diesen Platz einnimmt.

Barrierefreiheit

Beschriftungen

Durch das Bereitstellen eines <caption> Elements, dessen Wert Zweck der Tabelle klar und prägnant beschreibt, hilft es den Menschen zu entscheiden, ob sie den Rest des Tabelleninhalts überprüfen oder überspringen sollten.

Dies hilft Menschen, die mit assistiver Technologie wie einem Bildschirmlesegerät navigieren, Menschen mit Sehbeeinträchtigungen und Menschen mit kognitiven Beeinträchtigungen.

Abgrenzung von Zeilen und Spalten

Das scope Attribut auf Kopfzellen (<th> Elemente) ist in einfachen Kontexten redundant, da der Geltungsbereich abgeleitet wird. Einige assistive Technologien könnten jedoch fehlschlagen, korrekte Schlussfolgerungen zu ziehen, daher kann das Festlegen des Geltungsbereichs der Kopfzelle die Benutzererfahrung verbessern. In komplexen Tabellen kann scope angegeben werden, um notwendige Informationen über die mit einer Kopfzeile verbundenen Zellen bereitzustellen.

Komplizierte Tabellen

Assistive Technologien wie Bildschirmlesegeräte können Schwierigkeiten haben, Tabellen zu analysieren, die so komplex sind, dass Kopfzellen nicht strikt horizontal oder vertikal zugeordnet werden können. Dies wird typischerweise durch die Anwesenheit der colspan und rowspan Attribute angezeigt.

Idealerweise sollten Sie alternative Möglichkeiten in Betracht ziehen, den Inhalt der Tabelle zu präsentieren, einschließlich der Aufteilung in eine Sammlung kleinerer, verwandter Tabellen, die nicht auf die Verwendung der colspan und rowspan Attribute angewiesen sind. Dies hilft nicht nur Nutzern assistiver Technologien, den Tabelleninhalt zu verstehen, sondern kann auch Personen mit kognitiven Beeinträchtigungen zugutekommen, die möglicherweise Schwierigkeiten haben, die durch das Tabellenlayout beschriebenen Zusammenhänge zu verstehen.

Wenn die Tabelle nicht aufgeteilt werden kann, verwenden Sie eine Kombination der id und headers Attribute, um jede Tabellenzelle programmatisch mit den Kopfzeilen (<th> Elemente) zu verknüpfen, mit denen die Zelle verbunden ist.

Beispiele

Die unten aufgeführte Beispiele umfassen Tabellen mit wachsender Komplexität. Siehe auch unser Anfänger- Leitfaden zum Styling von Tabellen für stilbezogene Informationen über Tabellen, einschließlich gebräuchlicher, nützlicher Techniken.

Da die Struktur einer <table> die Verwendung mehrerer tabellenbezogener HTML-Elemente zusammen mit verschiedenen zugehörigen Attributen umfasst, sind die folgenden Beispiele so konzipiert, dass sie eine vereinfachte Erklärung bieten, die die Grundlagen und häufigen Standards abdeckt. Zusätzliche und detailliertere Informationen finden Sie auf den entsprechenden verlinkten Seiten.

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

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

Das erste Beispiel ist einfach, die nachfolgenden Beispiele werden komplexer. Zuerst entwickeln wir eine sehr einfache HTML-Struktur für die Tabelle. Die ersten beiden Beispiele enthalten keine Tabellensektionsgruppen wie einen definierten Kopf, Körper oder Fuß und beinhalten keine Zellenspannung oder explizit definierte Zellbeziehungen. Nicht einmal eine Beschriftung wird bereitgestellt. Während wir durch die Beispiele arbeiten, werden sie schrittweise verbessert, um alle Funktionalitäten zu umfassen, die eine komplexe Datentabelle besitzen sollte.

Einfache Tabelle

Dieses Beispiel umfasst eine sehr einfache Tabelle mit drei Zeilen und zwei Spalten. Um die Standard-Browser-Tabellenstile zu demonstrieren, wurde in diesem Beispiel kein CSS einbezogen.

HTML

Die Zeilen der Tabelle werden mit <tr> Elementen definiert, und die Spalten werden mit Tabellenkopf- und Datenzellen innerhalb dieser 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 Benutzerstylesheets, das auf diese Tabelle angewendet wird. Das Styling resultiert lediglich aus dem User-Agent-Stylesheet.

Erweiterte Tabelle mit Kopfzellen

Dieses Beispiel erweitert die einfache Tabelle, indem der Inhalt erweitert und grundlegende CSS-Stile hinzugefügt werden.

HTML

Die Tabelle besteht jetzt aus vier Zeilen (<tr> Elementen), jeweils mit vier Spalten. Die erste Zeile ist eine Zeile von Kopfzellen (Die erste Zeile enthält nur <th> Elemente). Nachfolgende Zeilen enthalten eine Kopfspalte (<th> Elemente als erste Kindelemente jeder Zeile) und drei Datenspalten (<td> Elemente). Da keine Tabellensektionselemente verwendet werden, definiert der Browser automatisch die Inhaltsgruppenstruktur, d.h. alle Zeilen werden im Hauptteil der Tabelle eines impliziten <tbody> Elements eingeschlossen.

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 herum zu erstellen, um die Datenstruktur klarer zu machen. Das CSS fügt einen soliden Rahmen um das <table> und um jede der Tabellenzellen, einschließlich der Zellen, die sowohl mit <th> als auch <td> Elementen angegeben sind, hinzu. Es markiert jede Kopf- und Datentelle.

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

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

Ergebnis

Angeben von Tabellenzellen-Beziehungen

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

HTML

Dies wird erreicht, indem das scope Attribut an den <th> Elementen eingeführt und die Werte den entsprechenden col (Spalte) oder row (Zeile) 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 sind unverändert - die Anpassung bietet wertvolle Kontextinformationen für assistive Technologien wie Bildschirmleser, um zu helfen zu identifizieren, welche Zellen zu den 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 assistiven Technologien helfen, die Beziehungen zwischen den Zellen zu identifizieren; siehe Komplizierte Tabellen.

Explizites Angeben von Tabellensektionsgruppen

Zusätzlich zur Verbesserung der Barrierefreiheit durch das Angeben von Zellenbeziehungen können die Semantiken der Tabelle verbessert werden, indem Tabellensektionsgruppen eingeführt werden.

HTML

Da die erste Zeile (<tr> Element) nur Spaltenkopfzellen enthält und als Kopfzeile für den Rest der Tabelleninhalte fungiert, kann sie im <thead> Element eingeschlossen werden, um diese Zeile explizit als Kopfsektion der Tabelle anzugeben. Darüber hinaus kann explizit das schon vom Browser automatisch Geschaffene definiert werden – der Hauptteil der Tabelle, der die Hauptdaten der Tabelle enthält, wird durch das Einschließen der entsprechenden Zeilen im <tbody> Element spezifiziert. 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 sind das CSS und das visuelle Ergebnis unverändert — die Angabe solcher Tabellensektionsgruppen bieten wertvolle Kontextinformationen für assistive Technologien, einschließlich Bildschirmleser und Suchmaschinen, sowie für das Styling im CSS, das in einem späteren Beispiel gezeigt wird.

Spalten- und Zeilenüberspannung

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

HTML

Aufbauend auf der bisher erstellten Tabelle wird eine neue Spalte für ein "Mitgliedschaftsende Datum" in jeder Körperreihe mit dem <td> Element hinzugefügt. Eine zusätzliche Zeile (<tr> Element) wird auch innerhalb der Kopfsektion (<thead> Element) hinzugefügt, um eine "Mitgliedsdaten" Kopfzeile als Überschrift für die "Beigetreten" und "Gekündigt" Spalten hinzuzufügen.

Die Erstellung der zweiten Kopfzeile erfordert das Hinzufügen der colspan und rowspan Attribute zu den <th> Elementen, um die Kopfzellen den richtigen Spalten und Zeilen zuzuordnen.

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

Die Kopfsektion hat jetzt zwei Zeilen, eine mit den Kopfzellen (<th> Elementen) "Name", "ID", "Mitgliedsdaten" und "Guthaben", und eine "Mitgliedsdaten" Kopfzelle mit zwei Sub-Headdern, die sich in einer zweiten Zeile befinden: "Beigetreten" und "Gekündigt". Dies wird erreicht durch:

  • Die erste Zeile der "Name", "ID" und "Guthaben" Kopfzellen überspannt beide Tabellenkopfzeilen mithilfe des rowspan Attributs, wodurch sie jeweils zwei Zeilen hoch gemacht werden.
  • Die Kopfzelle der ersten Zeilen "Mitgliedsdaten" überspannt zwei Spalten mit dem colspan Attribut, was dazu führt, dass sie zwei Spalten breit ist.
  • Die zweite Zeile enthält nur die zwei Kopfzellen "Beigetreten" und "Gekündigt", da die anderen drei Spalten mit den Zellen in der ersten Zeile verschmelzen, die zwei Zeilen überspannen. Die zwei Kopfzellen sind korrekt unter der "Mitgliedsdaten" Kopfzeile positioniert.

Tabellenbeschriftung und Spaltensumme

Es ist eine gängige und empfehlenswerte Praxis, eine Zusammenfassung des Inhalts der Tabelle bereitzustellen, die es den Nutzern ermöglicht, schnell die Relevanz der Tabelle zu bestimmen. Darüber hinaus wird die "Guthaben" Spalte durch die Anzeige der Summe der Guthaben der einzelnen Mitglieder zusammengefasst.

HTML

Eine Tabellenzusammenfassung wird hinzugefügt, indem eine Tabellen-Beschriftung (<caption> Element) als erstes Kindelement von <table> verwendet wird. Die Beschriftung bietet die barrierefreie Beschreibung für die Tabelle.

Abschließend wird eine Tabellenfußsektion (<tfoot> Element) unterhalb des Körpers eingefügt, mit einer Zeile, die die "Guthaben" Spalte zusammenfasst, indem eine Summe angezeigt wird. 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

Grundlegende Tabellenstile

Lassen Sie uns ein grundlegendes Styling auf die Tabelle anwenden, um die Schriftart anzupassen und eine background-color zu den Kopf- und Fußzeilen hinzuzufügen. Diesmal wird das HTML nicht geändert, also gehen wir direkt in das CSS.

CSS

Während hier eine font Eigenschaft auf das <table> Element hinzugefügt wird, um eine optisch ansprechendere Schriftart festzulegen (oder eine abstoßende serifenlose Schriftart, je nach persönlichem Urteil), ist der interessante Teil der zweite Stil, in dem die <tr> Elemente, die innerhalb der <thead> und <tfoot> befinden, gestylt werden, indem eine hellblaue background-color hinzugefügt wird. Dies ist eine Möglichkeit, schnell eine Hintergrundfarbe 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

Fortgeschrittene Tabellenstile

Nun gehen wir aufs Ganze, mit Stilen auf Zeilen im Kopf- und Körperbereich beide, einschließlich alternierender Zeilenfarben, Zellen mit unterschiedlichen Farben abhängig von der Position innerhalb einer Zeile und so weiter. Lassen Sie uns diesmal zuerst das Ergebnis anschauen.

Ergebnis

So wird die endgültige Tabelle aussehen:

Es gibt wieder keine Änderungen im HTML. Sehen Sie, was eine ordentliche Vorbereitung der HTML-Struktur bewirken kann?

CSS

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

Hier werden die border-collapse und border-spacing Eigenschaften hinzugefügt, um den Abstand zwischen Zellen zu eliminieren und angrenzende Rahmen zusammenzuführen, sodass sie eine einzige Grenze bilden, anstatt mit doppelten Begrenzungen zu enden. Zusätzlich wird <caption> mit der caption-side Eigenschaft am bottom der Tabelle platziert:

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 padding Eigenschaft verwendet, um allen Tabellenzellen Raum um ihren Inhalt zu geben. Die vertical-align Eigenschaft richtet den Inhalt der Kopfzellen unten in der Zelle aus, was an den Zellen im Kopf gesehen werden kann, die zwei Zeilen umfassen:

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

th {
  vertical-align: bottom;
}

Die nächste CSS-Regel setzt die background-color aller <tr> Elemente im Tabellenkopf (wie durch <thead> angegeben). Dann wird die untere Grenze des Kopfes auf eine Linie von zwei Pixel Breite gesetzt. Beachten Sie jedoch, dass wir den :nth-of-type Selektor verwenden, um die border-bottom Eigenschaft auf die zweite Zeile im Kopf anzuwenden. Warum? Weil der Kopf aus zwei Zeilen besteht, die von einigen der Zellen umspannt werden. Das bedeutet, dass tatsächlich zwei Zeilen vorhanden sind; das Anwenden des Stils auf die erste Zeile 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 zwei Kopfzellen "Beigetreten" und "Gekündigt" mit grünen und roten Tönen stylen, um das "Positive" eines neuen Mitglieds und das "Ärgernis" einer gekündigten Mitgliedschaft darzustellen. Hier graben wir uns in die letzte Zeile des Kopfbereichs der Tabelle mithilfe des :last-of-type Selektors und geben der ersten Kopfzelle darin (die "Beigetreten" Kopfzelle) eine grünliche Farbe und der zweiten Kopfzelle (die "Gekündigt" Kopfzelle) 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 auch die erste Spalte auffallen sollte, wird hier ebenfalls ein benutzerdefiniertes Styling hinzugefügt. Diese CSS-Regel stylt die erste Kopfzelle in jeder Zeile des Tabellenkörpers mit der text-align Eigenschaft, um die Namen der Mitglieder linksbündig auszurichten 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, die Lesbarkeit von Tabellendaten zu verbessern, indem Zeilenfarben alterniert werden. Dies wird manchmal als "Zebra-Streifen" bezeichnet. Lassen Sie uns ein bisschen background-color zu jeder geraden Zeile hinzufügen:

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

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

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

Schließlich wird dem Fußbereich der Tabelle ein ähnliches Styling wie dem Kopfbereich hinzugefügt, um ihn auch 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 Räumen anzeigen

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

Dieses Beispiel bietet eine Möglichkeit, Tabellen in kleinen Räumen anzuzeigen. Wir haben den HTML-Inhalt verborgen, da er sehr umfangreich ist und nichts Bemerkenswertes an ihm ist. Das CSS ist in diesem Beispiel nützlicher zu untersuchen.

CSS

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

Um die Tabellenköpfe auf der Seite zu belassen, während man nach unten scrollt, haben wir position sticky auf die <th> Elemente gesetzt. Beachten Sie, dass wir nicht border-collapse auf collapse gesetzt haben, da dies verhindert, dass der Kopf korrekt vom Rest der Tabelle getrennt wird.

Da das <table> eine feste Größe hat, ist das overflow mit dem Wert auto hier der wichtige Teil, 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 Fluss-Inhalt
Erlaubter Inhalt In dieser Reihenfolge:
  1. ein optionales <caption> Element,
  2. null oder mehr <colgroup> Elemente,
  3. ein optionales <thead> Element,
  4. entweder einer der folgenden:
    • null oder mehr <tbody> Elemente
    • ein oder mehr <tr> Elemente
  5. ein optionales <tfoot> Element
Tag-Auslassung Keine, sowohl das Start- als auch das End-Tag sind verpflichtend.
Erlaubte Eltern Jedes Element, das Fluss-Inhalt akzeptiert
Implizierte ARIA Rolle table
Erlaubte ARIA Rollen Jegliche
DOM-Schnittstelle [`HTMLTableElement`](/de/docs/Web/API/HTMLTableElement)

Spezifikationen

Specification
HTML
# the-table-element

Browser-Kompatibilität

Siehe auch