HTML <table> Tag

Der <table>-Tag definiert eine HTML-Tabelle. Er ist ein Container für die Elemente, die die Zeilen, Zellen und Kopfzeilen der Tabelle aufbauen, und stellt tabellarische Daten dar — Informationen, die eine bedeutungsvolle Beziehung über Zeilen und Spalten hinweg haben.

Diese Seite erklärt, wie eine Tabelle korrekt strukturiert wird, wie sie für Screenreader zugänglich gemacht wird und welche CSS-Eigenschaften die alten Präsentationsattribute ersetzen, die in HTML5 nicht mehr gültig sind.

Tabellenstruktur

Eine Tabelle wird aus mehreren zusammenwirkenden Elementen aufgebaut:

<tr> definiert eine Tabellenzeile.
<th> definiert eine Kopfzelle — ihr Text ist standardmäßig fett und zentriert.
<td> definiert eine Datenzelle.
<caption> gibt der Tabelle einen Titel.
<thead>, <tbody> und <tfoot> gruppieren die Kopf-, Rumpf- und Fußzeilen.
<colgroup> ermöglicht die Gestaltung ganzer Spalten.

Das Gruppieren von Zeilen mit <thead> und <tbody> ist mehr als ordentliches Markup: Es teilt dem Browser (und der assistiven Technologie) mit, welche Zeile der Header ist. Außerdem kann der Rumpf scrollen, während der Header fixiert bleibt, und Header- und Rumpfzeilen lassen sich separat gestalten.

Tipp

Verwende <th> für jede Zelle, die eine Zeile oder Spalte beschriftet. Ihr wichtigster Wert ist die Barrierefreiheit: Screenreader kündigen den Header beim Vorlesen einer Datenzelle an, sodass ein Nutzer, der das Raster nicht sehen kann, dennoch weiß, was jeder Wert bedeutet. Als Bonus sind Kopfzellen standardmäßig fett und zentriert und helfen Suchmaschinen, die Struktur der Tabelle zu verstehen.

Syntax

Der <table>-Tag kommt in Paaren. Der Inhalt wird zwischen dem öffnenden (<table>) und schließenden (</table>) Tag geschrieben.

Beispiel des HTML `<table>`-Tags:

HTML <table> Tag

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 80%;
        margin: 30px auto;
        border-collapse: collapse;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>Upcoming release dates</caption>
      <thead>
        <tr>
          <th scope="col">Month</th>
          <th scope="col">Date</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">June</th>
          <td>10.06.2018</td>
        </tr>
        <tr>
          <th scope="row">July</th>
          <td>15.07.2018</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Probier es selbst »

Ergebnis

Tabellen barrierefrei gestalten

Ein visuell formatiertes Raster lässt sich mit den Augen leicht durchsuchen, aber ein Screenreader liest Zellen einzeln vor. Diese Funktionen geben ihm den nötigen Kontext:

<caption> ist der barrierefreie Name der Tabelle. Platziere es als erstes Kind von <table>. Screenreader-Nutzer hören es, wenn sie auf die Tabelle stoßen, sodass sie wissen, worum es bei den Daten geht, bevor sie sie erkunden.
<th scope="col"> kennzeichnet eine Zelle als Header für die gesamte Spalte; <th scope="row"> kennzeichnet sie als Header für ihre Zeile. Mit diesen Angaben kann ein Screenreader „Month: June" ankündigen statt nur „June" — so wird jeder Wert mit seiner Beschriftung verknüpft.

Bei komplexen Tabellen — bei denen sich eine Zelle auf Header bezieht, die sich nicht einfach am Anfang ihrer Spalte oder Zeile befinden (z. B. Header, die mehrere Spalten umfassen) — reicht scope nicht aus. Verwende das headers/id-Muster: Gib jedem <th> eine eindeutige id und liste die relevanten IDs im headers-Attribut jedes <td> auf.

<table>
  <caption>Quarterly revenue by region</caption>
  <thead>
    <tr>
      <th id="region">Region</th>
      <th id="q1">Q1</th>
      <th id="q2">Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="europe" headers="region">Europe</th>
      <td headers="europe q1">120</td>
      <td headers="europe q2">150</td>
    </tr>
  </tbody>
</table>

Attribute

Gefahr

Die Attribute des <table>-Tags werden in HTML5 nicht unterstützt. Zur Gestaltung von Tabellen verwende die unten aufgeführten CSS-Eigenschaften.

Attribut	Wert	Beschreibung	CSS-Eigenschaft
align	left center right	Legt fest, wie die Tabelle im Verhältnis zum umgebenden Text ausgerichtet werden soll. In HTML5 nicht unterstützt.	margin
bgcolor	rgb(x,x,x) #xxxxxx colorname	Legt die Hintergrundfarbe einer Tabelle fest. In HTML5 nicht unterstützt.	background-color
border	1 0	Legt die Größe des Rahmens um die Tabelle fest. In HTML5 nicht unterstützt.	border
cellpadding	pixels	Legt den Abstand zwischen der Zellwand und dem Zellinhalt fest. In HTML5 nicht unterstützt.	padding
cellspacing	pixels	Legt den Abstand zwischen den Zellen fest. In HTML5 nicht unterstützt.	border-spacing
frame	void above below hsides lhs rhs vsides box border	Legt fest, welche Seite des Rahmens um die Tabelle angezeigt werden soll. In HTML5 nicht unterstützt.	border-style border-width
rules	none groups rows cols all	Legt fest, welche Teile der inneren Rahmen sichtbar sein sollen. In HTML5 nicht unterstützt.	border (Diese Eigenschaft entsprechend mit thead, tbody, tfoot, col oder colgroup HTML-Tags verwenden).
width	pixels	Legt die Breite einer Tabelle fest. In HTML5 nicht unterstützt.	width

Der <table>-Tag unterstützt auch die globalen Attribute und die Ereignisattribute.

Alte Attribute durch CSS ersetzen

Die oben genannten Präsentationsattribute (border, cellpadding, cellspacing, align, bgcolor usw.) sind in HTML5 veraltet. Gestalte die Tabelle stattdessen mit CSS. Dieses Beispiel reproduziert eine umrahmte, gepolsterte und zentrierte Tabelle ohne veraltete Attribute:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        /* width="80%" + align="center" */
        width: 80%;
        margin: 30px auto;
        /* cellspacing="0" — collapse the double borders */
        border-collapse: collapse;
        /* bgcolor on the table */
        background-color: #f9f9f9;
      }
      th,
      td {
        /* border="1" */
        border: 1px solid #666;
        /* cellpadding="10" */
        padding: 10px;
        /* align="left" inside cells */
        text-align: left;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>Styled with CSS, not attributes</caption>
      <thead>
        <tr>
          <th scope="col">Month</th>
          <th scope="col">Date</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">June</th>
          <td>10.06.2018</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Eine schnelle Zuordnung der häufigsten Attribute zu ihren CSS-Entsprechungen:

border → border
cellpadding → padding auf <th>/<td>
cellspacing → border-spacing oder border-collapse: collapse zum Entfernen der Abstände
align → margin (Tabelle) oder text-align (Zellen)
bgcolor → background-color
width → width

Tabellen nicht für das Layout verwenden

Ein <table> sollte nur tabellarische Daten enthalten — Inhalte mit echten Zeilen-/Spaltenbeziehungen. Verwende ihn nicht, um Seitenbereiche wie Seitenleisten, Navigation oder Textspalten zu positionieren. Layout-Tabellen verwirren Screenreader (die versuchen, Header-/Zellen-Beziehungen anzukündigen, die nicht existieren) und sind starr und schwer responsiv zu gestalten.

Für das Seitenlayout verwende stattdessen modernes CSS:

CSS Grid für zweidimensionale Layouts (Zeilen und Spalten) — der natürliche Ersatz für rasterartige Seitenstrukturen.
Flexbox für eindimensionale Layouts, wie eine Kartenreihe oder eine Navigationsleiste.

Siehe HTML-Layout-Vorlagen für vorgefertigte Strukturen.

Übung

Welche Aussage über HTML-Tabellenelemente ist korrekt?

Das td-Element definiert eine Datenzelle, das th-Element definiert eine Kopfzelle und tr definiert eine Zeile.Das th-Element wird verwendet, um eine Fußnote am Ende der Tabelle zu erstellen.Das td-Element ist die einzige Möglichkeit, Bilder in eine Webseite einzufügen.Das caption-Element muss nach dem schließenden table-Tag platziert werden.