Tabellen

In HTML-Tabellen werden tabellarische Daten mit Zeilen und Spalten dargestellt. Sie sollten sich für eine <table> entscheiden, die zum angezeigten Inhalt und den Bedürfnissen Ihrer Nutzer in Bezug auf diesen Inhalt passt. Wenn Daten präsentiert, verglichen, sortiert, berechnet oder abgeglichen werden, ist <table> wahrscheinlich die richtige Wahl. Wenn Sie nicht tabellarische Inhalte organisieren möchten, z. B. eine große Gruppe von Vorschaubildern, sind Tabellen nicht geeignet. Erstellen Sie stattdessen eine Liste mit Bildern und gestalten Sie das Raster mit CSS.

In diesem Abschnitt werden alle Elemente der Tabelle sowie einige Bedienungshilfen- und Usability-Funktionen beschrieben, die bei der Präsentation von tabellarischen Daten berücksichtigt werden sollten. In „HTML lernen“ geht es zwar nicht hauptsächlich um CSS, aber wir werden einige tabellenspezifische CSS-Eigenschaften behandeln. Weitere Informationen zu CSS finden Sie unter CSS lernen.

Tabellenelemente in der richtigen Reihenfolge

Das Tag <table> umschließt den Tabelleninhalt, einschließlich aller Tabellenelemente. Die implizite ARIA-Rolle von <table> ist table. Hilfstechnologien wissen, dass dieses Element eine Tabellenstruktur mit Daten ist, die in Zeilen und Spalten angeordnet sind. Wenn die Tabelle einen Auswahlstatus beibehält, eine zweidimensionale Navigation hat oder der Nutzer die Reihenfolge der Zellen ändern kann, legen Sie role="grid" fest. Wenn die Zeilen der grid maximiert und minimiert werden können, verwenden Sie stattdessen role="treegrid".

Im <table> finden Sie die Tabellenüberschriften (<thead>), Tabellenkörper (<tbody>) und optional Tabellenfußzeilen (<tfoot>). Jedes dieser Elemente besteht aus Tabellenzeilen (<tr>). Zeilen enthalten Tabellenüberschriften (<th>) und Tabellendatenzellen (<td>), die wiederum alle Daten enthalten. Im DOM finden Sie davor möglicherweise zwei zusätzliche Funktionen: die Tabellenüberschrift (<caption>) und Spaltengruppen (<colgroup>). Je nachdem, ob <colgroup> ein span-Attribut hat, kann es verschachtelte Tabellenspalten (<col>) enthalten.

Die untergeordneten Elemente der Tabelle sind in der folgenden Reihenfolge:

1. <caption>-Element
2. <colgroup>-Elemente
3. <thead>-Elemente
4. <tbody>-Elemente
5. <tfoot>-Elemente

Wir werden uns die untergeordneten Elemente von <table> ansehen, die alle optional, aber empfehlenswert sind, und uns dann Zeilen, Tabellenüberschriftenzellen und Tabellendatenzellen ansehen. Die <colgroup> wird zuletzt behandelt.

Tabellenunterschrift

Die bevorzugte Methode zum Benennen einer Tabelle ist das semantische Element <caption>. Mit <caption> wird ein beschreibender, programmatisch zugeordneter Tabellentitel angegeben. Sie ist standardmäßig für alle Nutzer sichtbar und verfügbar.

Das Element <caption> sollte das erste Element sein, das im Element <table> verschachtelt ist. So wissen alle Nutzer sofort, wozu die Tabelle dient, ohne den umgebenden Text lesen zu müssen. Alternativ können Sie aria-label oder aria-labelledby für das <table>-Element verwenden, um einen zugänglichen Namen als Untertitel anzugeben. Das <caption>-Element hat keine elementspezifischen Attribute.

Die Überschrift wird außerhalb der Tabelle angezeigt. Die Position der Bildunterschrift kann mit der CSS-Eigenschaft caption-side festgelegt werden. Das ist besser als die Verwendung des eingestellten Attributs align. So kann der Untertitel oben und unten platziert werden. Die Positionierung auf der linken und rechten Seite mit inline-start und inline-end wird noch nicht vollständig unterstützt. „Oben“ ist die Standarddarstellung im Browser.

Datentabellen sollten möglichst aussagekräftige Überschriften und eine Bildunterschrift haben und so klar sein, dass sie fast selbsterklärend sind. Denken Sie daran, dass nicht alle Nutzer dieselben kognitiven Fähigkeiten haben. Wenn die Tabelle einen bestimmten Punkt verdeutlicht oder anderweitig interpretiert werden muss, fassen Sie den Hauptpunkt oder die Funktion der Tabelle kurz zusammen. Wo diese Zusammenfassung platziert wird, hängt von ihrer Länge und Komplexität ab. Wenn er kurz ist, verwenden Sie ihn als inneren Text der Bildunterschrift. Wenn sie länger ist, fassen Sie sie in der Bildunterschrift zusammen und geben Sie die Zusammenfassung im Absatz vor der Tabelle an. Verknüpfen Sie die beiden mit dem Attribut aria-describedby. Eine weitere Möglichkeit besteht darin, die Tabelle in ein <figure> und die Zusammenfassung in ein <figcaption> zu setzen.

Datenaufteilung

Der Inhalt von Tabellen besteht aus bis zu drei Abschnitten: null oder mehr Tabellenüberschriften (<thead>), Tabellenkörper (<tbody>) und Tabellenfußzeilen (<tfoot>). Alle sind optional und es werden null oder mehr von jedem unterstützt.

Diese Elemente beeinträchtigen die Barrierefreiheit der Tabelle nicht, sind aber in Bezug auf die Nutzerfreundlichkeit hilfreich. Sie bieten Styling-Hooks. So kann beispielsweise der Header-Inhalt fixiert werden, während der <tbody>-Inhalt scrollt. Zeilen, die nicht in einem dieser drei enthaltenden Elemente verschachtelt sind, werden implizit in ein <tbody>-Element eingeschlossen. Alle drei haben die gleiche implizite Rolle rowgroup. Keines dieser drei Elemente hat elementspezifische Attribute.

Das haben wir bisher:

<table>
  <caption>MLW Students</caption>
  <thead></thead>
  <tbody></tbody>
  <tfoot></tfoot>
</table>

Das <tfoot>-Element sollte ursprünglich aus Gründen der Barrierefreiheit direkt nach dem <thead>- und vor dem <tbody>-Element stehen. Daher kann es sein, dass Sie in Legacy-Codebasen auf diese nicht intuitive Quellreihenfolge stoßen.

Tabelleninhalt

Tabellen können in Tabellenüberschriften, ‑körper und ‑fußzeilen unterteilt werden. Diese Elemente haben jedoch keine Funktion, wenn die Tabellen keine Tabellenzeilen, ‑zellen und ‑inhalte enthalten. Jede Tabellenzeile <tr> enthält eine oder mehrere Zellen. Wenn eine Zelle eine Kopfzeilenzelle ist, verwenden Sie <th>. Verwenden Sie andernfalls <td>.

In User-Agent-Stylesheets wird der Inhalt einer <th>-Tabellenkopfzelle in der Regel zentriert und fett dargestellt. Diese Standardstile und alle anderen Formatierungen lassen sich am besten mit CSS steuern, anstatt mit den eingestellten Attributen, die früher für einzelne Zellen, Zeilen und sogar für das <table> verfügbar waren.

Es gab Attribute zum Hinzufügen von Innen- und Außenabstand zwischen Zellen, für Rahmen und für die Textausrichtung. „cellpadding“ und „cellspacing“, mit denen der Abstand zwischen dem Inhalt einer Zelle und ihrem Rahmen sowie zwischen den Rahmen benachbarter Zellen definiert wird, sollten mit den CSS-Eigenschaften border-collapse bzw. border-spacing festgelegt werden. Border-spacing hat keine Auswirkungen, wenn border-collapse: collapse festgelegt ist. Wenn border-collapse: separate; festgelegt ist, können leere Zellen mit empty-cells: hide; vollständig ausgeblendet werden. Hier finden Sie eine interaktive Präsentation mit CSS-Stilen für Tabellen.

In den Beispielen haben wir mit CSS einen Rahmen für die Tabelle und jede einzelne Zelle hinzugefügt, um einige Funktionen deutlicher zu machen:

In diesem Beispiel haben wir eine Bildunterschrift, einen Tabellenheader und einen Tabellenkörper. Der Header hat eine Zeile mit drei <th>-Headerzellen, wodurch drei Spalten erstellt werden. Der Textkörper enthält drei Datenzeilen. Die erste Zelle ist eine Kopfzeile für die Zeile. Daher verwenden wir <th> anstelle von <td>.

Die Zelle <th> hat eine semantische Bedeutung mit den impliziten ARIA-Rollen columnheader oder rowheader. Sie definiert die Zelle als Header für die Spalte oder Zeile von Tabellenzellen, je nach Wert des aufgezählten Attributs scope. Wenn scope nicht explizit festgelegt ist, wird im Browser standardmäßig col oder row verwendet. Da wir semantisches Markup verwendet haben, hat die Zelle 1956 zwei Überschriften: „Year“ und „Lou Minious“. Diese Zuordnung gibt an, dass „1956“ das „Jahr“ des Abschlusses von „Lou Minious“ ist. In diesem Beispiel ist die Assoziation visuell erkennbar, da wir die gesamte Tabelle sehen. Wenn Sie <th> verwenden, wird die Zuordnung auch dann beibehalten, wenn die Kopfspalte oder -zeile aus dem Blickfeld gescrollt wurde. Wir hätten <th scope="col">Year</th> und <th scope="row">Lou Minious</th> explizit festlegen können, aber bei einer Tabelle wie dieser funktionieren die aufgezählten Standardwerte. Andere Werte für scope sind rowgroup und colgroup, die bei komplexen Tabellen nützlich sind.

Zellen verbinden

Ähnlich wie in MS Excel, Google Sheets und Numbers können Sie mehrere Zellen zu einer einzigen Zelle zusammenführen. Dazu können Sie die HTML-Attribute colspan und rowspan verwenden:

• Mit colspan werden zwei oder mehr benachbarte Zellen in einer einzelnen Zeile zusammengeführt.
• Mit rowspan werden Zellen über Zeilen hinweg zusammengeführt, wenn es der Zelle in der ersten der zusammengeführten Zeilen hinzugefügt wird.

In diesem Beispiel enthält der Tabellenheader zwei Zeilen. Die erste Überschriftenzeile enthält drei Zellen, die sich über vier Spalten erstrecken. Die mittlere Zelle enthält colspan="2". Dadurch werden zwei benachbarte Zellen zusammengeführt. Die erste und die letzte Zelle enthalten rowspan="2". Dadurch wird die Zelle mit der Zelle in der angrenzenden Zeile direkt darunter zusammengeführt.

Die zweite Zeile in der Tabellenüberschrift enthält zwei Zellen. Das sind die Zellen für die zweite und dritte Spalte in der zweiten Zeile. Für die erste oder letzte Spalte wird keine Zelle deklariert, da sich die Zelle in der ersten und letzten Spalte in der ersten Zeile über zwei Zeilen erstreckt.

Wenn eine Zelle durch mehrere Kopfzellen mit Zuordnungen definiert wird, die nicht allein durch die scope-Attribute festgelegt werden können, fügen Sie das headers-Attribut mit einer durch Leerzeichen getrennten Liste der zugehörigen Überschriften ein. Da es sich bei diesem Beispiel um eine komplexere Tabelle handelt, definieren wir den Umfang der Überschriften explizit mit dem Attribut scope. Zur besseren Übersicht haben wir jeder Zelle das Attribut headers hinzugefügt.

Die Attribute headers waren in diesem Fall möglicherweise nicht erforderlich, aber es ist wichtig, sie im Hinterkopf zu behalten, wenn Ihre Tabellen komplexer werden. Bei Tabellen mit komplexen Strukturen, z. B. Tabellen, in denen Überschriften oder Zellen zusammengeführt werden oder die mehr als zwei Ebenen von Spalten- oder Zeilenüberschriften haben, müssen die zugehörigen Überschriftenzellen explizit angegeben werden. In solchen komplexen Tabellen müssen Sie jede Datenzelle explizit mit jeder entsprechenden Header-Zelle verknüpfen. Verwenden Sie dazu eine Liste mit durch Leerzeichen getrennten id-Werten aller zugehörigen Headern als Wert des Attributs headers.

Das Attribut headers wird häufiger für <td>-Elemente verwendet, ist aber auch für <th> gültig.

Komplexe Tabellenstrukturen können jedoch für alle Nutzer, nicht nur für Screenreader-Nutzer, schwer zu verstehen sein. Kognitiv und in Bezug auf die Unterstützung von Screenreadern sind einfachere Tabellen mit wenigen bis gar keinen überspannten Zellen, auch ohne das Hinzufügen von Bereich und Überschriften, besser verständlich. Außerdem sind sie einfacher zu verwalten.

Tabellen formatieren

Es gibt zwei relativ unbekannte Elemente, die kurz erwähnt wurden: das Spaltengruppenelement <colgroup> und sein einziges untergeordnetes Element, das leere Spaltenelement <col>. Mit dem Element <colgroup> werden Gruppen von Spalten oder <col>-Elemente in einer Tabelle definiert.

Wenn die Spaltengruppierung verwendet wird, sollte sie in <table> verschachtelt werden, direkt nach <caption> und vor allen Tabellendaten. Wenn sie sich über mehrere Spalten erstrecken, verwenden Sie das Attribut span.

Die Reihenfolge der Inhaltsübersicht für eine Tabelle ist in der Regel wie folgt, wobei <table> und <caption> die beiden Elemente sind, die enthalten sein sollten:

<table>
  <caption>Table Caption</caption>
  <colgroup>
    <col/>
  </colgroup>
  <thead>...

<colgroup> und <col> haben keine semantische Bedeutung, die sich auf die Barrierefreiheit von Tabellen auswirken würde. Sie können damit jedoch Spalten mit CSS formatieren, z. B. die Breite festlegen.

Die Stile <td> und <th> überschreiben die Stile <col>. In CodePen haben wir colspan festgelegt, um einige, aber nicht alle Zeilen der Tabelle zusammenzuführen. Wenn der CSS-Selektor nth-child auf <tr> angewendet wird, kann sich das je nach zusammengeführter Zeile oder Spalte auf den Stil auswirken.

Leider werden nur wenige Eigenschaften unterstützt. Stile werden nicht in die Zellen übernommen. Die einzige Möglichkeit, Zellen mit <col> anzusprechen, ist die Verwendung eines komplexen Selektors wie dem :has()-Beziehungsselektor.

Wenn sowohl <table> als auch <colgroup> eine Hintergrundfarbe haben, wird die background-color von <colgroup> oben angezeigt. Die Reihenfolge der Darstellung ist: Tabelle, Spaltengruppen, Spalten, Zeilengruppen, Zeilen, mit Zellen als Letztes und oben, wie im Schema der Tabellenebenen dargestellt. Die Elemente <td> und <th> sind keine untergeordneten Elemente von <colgroup>- oder <col>-Elementen und übernehmen deren Formatierung nicht.

Um eine Tabelle zu schraffieren, sind CSS-Strukturselektoren hilfreich. Mit tbody tr:nth-of-type(odd) {background-color: rgba(0 0 0 / 0.1);} wird beispielsweise jeder ungeraden Zeile im Tabellenkörper ein durchscheinendes Schwarz hinzugefügt, während Hintergrundeffekte, die für <colgroup> festgelegt sind, durchscheinen.

Tabellen sind standardmäßig nicht responsiv. Stattdessen werden sie standardmäßig an ihren Inhalt angepasst. Damit die Formatierung des Tabellenlayouts auf verschiedenen Geräten effektiv funktioniert, sind zusätzliche Maßnahmen erforderlich. Wenn Sie die CSS-Eigenschaft „display“ für Tabellenelemente ändern, fügen Sie ARIA-Attribute role ein. Das mag redundant klingen, aber die CSS-Eigenschaft display kann sich in einigen Browsern auf den Barrierefreiheitsbaum auswirken.

Daten präsentieren

Tabellenelemente haben semantische Bedeutungen, die von assistiven Technologien verwendet werden, um Nutzern die Navigation durch die Zeilen und Spalten zu erleichtern. Das Element <table> sollte nicht für die Darstellung verwendet werden. Wenn Sie eine Überschrift über einer Liste benötigen, verwenden Sie eine Überschrift und eine Liste. Wenn Sie Inhalte in vielen Spalten anordnen möchten, verwenden Sie das Mehrspaltenlayout. Wenn Sie Inhalte in einem Raster anordnen möchten, verwenden Sie CSS-Raster.

Verwenden Sie nur eine Tabelle für Daten.

Wenn Ihre Daten in einer Tabelle präsentiert werden müssen, verwenden Sie <table>. Wenn Sie die Funktionen von Präsentationssoftware wie Google Präsentationen oder PowerPoint nutzen möchten, benötigen Sie wahrscheinlich eine Beschreibungsliste.

Kurz gesagt: Wenn Sie keine tabellarischen Daten präsentieren, verwenden Sie kein <table>. Wenn Sie eine Tabelle für die Präsentation verwenden, legen Sie role="none" fest.

Viele Entwickler verwenden Tabellen, um Formulare zu gestalten, aber das ist nicht erforderlich. Sie müssen sich mit HTML-Formularen auskennen.

Wissen testen

Testen Sie Ihr Wissen zu Tabellen.