Tabellen

HTML-Tabellen werden zum Darstellen tabellarischer Daten mit Zeilen und Spalten verwendet. Die Entscheidung, ob Sie eine <table> verwenden, sollte auf den von Ihnen präsentierten Inhalten und den Anforderungen Ihrer Nutzer in Bezug auf diese Inhalte basieren. Wenn Daten präsentiert, verglichen, sortiert, berechnet oder abgeglichen werden, ist <table> wahrscheinlich die richtige Wahl. Wenn Sie nicht tabellarische Inhalte wie eine große Gruppe von Thumbnails übersichtlich darstellen möchten, 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 Funktionen für Barrierefreiheit und Nutzerfreundlichkeit beschrieben, die Sie bei der Darstellung tabellarischer Daten berücksichtigen sollten. In diesem Kurs geht es nicht hauptsächlich um CSS. Es gibt einen ganzen Kurs, der sich dem Lernen von CSS widmet. Wir werden jedoch einige tabellenspezifische CSS-Eigenschaften behandeln.

Tabellenelemente, sortiert

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

Innerhalb der <table> finden Sie die Tabellenüberschriften (<thead>), Tabellenkörper (<tbody>) und optional Tabellenfußzeilen (<tfoot>). Jedes dieser Elemente besteht aus Tabellenzeilen (<tr>). Zeilen enthalten Zellen für Tabellenüberschriften (<th>) und Tabellendaten (<td>), die wiederum alle Daten enthalten. Im DOM finden Sie vor diesen Elementen möglicherweise zwei weitere Elemente: die Tabellenüberschrift (<caption>) und Spaltengruppen (<colgroup>). Je nachdem, ob die <colgroup> ein span-Attribut hat, kann sie verschachtelte Elemente der Tabellenspalte (<col>) enthalten.

Die untergeordneten Elemente der Tabelle sind in der Reihenfolge:

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

Wir beginnen mit den untergeordneten Elementen von <table>, die alle optional, aber empfohlen sind. Anschließend sehen wir uns Zeilen, Tabellenüberschriftenzellen und Tabellendatenzellen an. Die <colgroup> werden als Letztes behandelt.

Tabellenüberschrift

Da <caption> ein natives, semantisches Element ist, ist dies die bevorzugte Methode, um einer Tabelle einen Namen zu geben. <caption> enthält einen aussagekräftigen, programmatisch verknüpften Tabellentitel. Sie ist standardmäßig für alle Nutzer sichtbar und verfügbar.

Das <caption>-Element sollte das erste Element sein, das im <table>-Element verschachtelt ist. So wissen alle Nutzer sofort, welchen Zweck die Tabelle hat, ohne den umgebenden Text lesen zu müssen. Alternativ können Sie auf der <table> die Tasten aria-label oder aria-labelledby drücken, um einen barrierefreien Namen als Untertitel anzugeben. Das <caption>-Element hat keine elementspezifischen Attribute.

Die Bildunterschrift 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 veralteten Attributs align. Dadurch kann die Bildunterschrift 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 vorzugsweise klare Überschriften und eine Bildunterschrift haben und so einfach sein, dass sie fast selbsterklärend sind. Denken Sie daran, dass nicht alle Nutzer die gleichen kognitiven Fähigkeiten haben. Wenn die Tabelle einen bestimmten Punkt verdeutlichen soll 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 sie kurz ist, verwenden Sie sie als inneren Text der Bildunterschrift. Bei längeren Texten fassen Sie ihn in der Bildunterschrift zusammen und fügen Sie die Zusammenfassung in den Absatz vor der Tabelle ein. Verknüpfen Sie beides mit dem Attribut aria-describedby. Eine weitere Möglichkeit besteht darin, die Tabelle in eine <figure> und die Zusammenfassung in die <figcaption> zu setzen.

Datensegmentierung

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 davon unterstützt.

Diese Elemente tragen weder zur Barrierefreiheit der Tabelle bei noch beeinträchtigen sie sie, sind aber in Bezug auf die Nutzerfreundlichkeit nützlich. Sie bieten Stilelemente. So können Sie beispielsweise den Inhalt des Headers fixieren, während der Inhalt des <tbody> scrollbar ist. Zeilen, die nicht in einem dieser drei enthaltenden Elemente verschachtelt sind, werden implizit in ein <tbody>-Element eingeschlossen. Alle drei haben dieselbe implizite Rolle rowgroup. Keines dieser drei Elemente hat elementspezifische Attribute.

Bisher haben wir:

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

Das <tfoot>-Element wurde ursprünglich aus Gründen der Barrierefreiheit direkt nach dem <thead> und vor dem <tbody> angegeben. Daher finden Sie diese nicht intuitive Quellreihenfolge möglicherweise in älteren Codebases.

Tabelleninhalt

Tabellen können in Tabellenüberschriften, Tabellenkörper und Fußzeilen unterteilt werden. Dies hat jedoch keine Auswirkungen, wenn die Tabellen keine Tabellenzeilen, Zellen und Inhalte enthalten. Jede Tabellenzeile <tr> enthält eine oder mehrere Zellen. Wenn es sich um eine Kopfzeilenzelle handelt, verwenden Sie <th>. Verwenden Sie andernfalls <td>.

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

Es gab Attribute, um Abstände zwischen und innerhalb von Zellen, für Rahmen und für die Textausrichtung hinzuzufügen. „Cellpadding“ und „cellspacing“, die den Abstand zwischen dem Inhalt einer Zelle und ihrem Rahmen sowie zwischen den Rahmen benachbarter Zellen definieren, sollten mit den CSS-Eigenschaften border-collapse und 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. Weitere Informationen zum Formatieren von Tabellen finden Sie in der interaktiven Foliensammlung zu CSS-Stilen für Tabellen.

In den Beispielen haben wir der Tabelle und jeder einzelnen Zelle mit CSS einen Rahmen hinzugefügt, um einige Funktionen besser sichtbar zu machen:

In diesem Beispiel sehen Sie eine Bildunterschrift, eine Tabellenüberschrift und einen Tabellenkörper. Die Kopfzeile besteht aus einer Zeile mit drei Kopfzeilenzellen <th>, wodurch drei Spalten entstehen. 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. Je nach Wert des aufgezählten Attributs scope definiert es die Zelle als Überschrift für die Spalte oder Zeile der Tabellenzellen. Wenn scope nicht explizit festgelegt ist, verwendet der Browser standardmäßig col oder row. Da wir semantisches Markup verwendet haben, hat die Zelle 1956 zwei Überschriften: „Jahr“ und „Lou Minious“. Diese Verknüpfung gibt an, dass „1956“ das „Jahr“ des Abschlusses von „Lou Minious“ ist. In diesem Beispiel ist die Verknüpfung visuell erkennbar, da wir die gesamte Tabelle sehen. Mit <th> wird die Verknüpfung auch dann hergestellt, wenn die Kopfzeilenspalte oder -zeile nicht mehr sichtbar ist. Wir hätten <th scope="col">Year</th> und <th scope="row">Lou Minious</th> auch explizit festlegen können, aber bei einer einfachen Tabelle wie dieser funktionieren die aufgezählten Standardwerte. Andere Werte für scope sind rowgroup und colgroup, die sich für komplexe Tabellen eignen.

Zellen zusammenführen

Ähnlich wie in MS Excel, Google Tabellen und Numbers ist es möglich, mehrere Zellen zu einer einzigen Zelle zusammenzuführen. Das geschieht mit HTML. Mit dem colspan-Attribut können zwei oder mehr benachbarte Zellen innerhalb einer Zeile zusammengeführt werden. Mit dem Attribut rowspan können Zellen über Zeilen hinweg zusammengeführt werden. Es wird in der Zelle in der obersten Zeile platziert.

In diesem Beispiel enthält die Tabellenüberschrift 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 benachbarten Zeile direkt darunter zusammengeführt.

Die zweite Zeile in der Tabellenüberschrift enthält zwei Zellen, 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 die Zelle in der ersten und letzten Spalte in der ersten Zeile zwei Zeilen umfasst.

Wenn eine Zelle durch mehrere Kopfzellen mit Verknüpfungen definiert ist, 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 hinzu. Da es sich bei diesem Beispiel um eine komplexere Tabelle handelt, definieren wir den Umfang der Überschriften explizit mit dem scope-Attribut. Zur besseren Veranschaulichung haben wir jeder Zelle das Attribut headers hinzugefügt.

Die headers-Attribute waren in einem so einfachen Anwendungsfall möglicherweise nicht erforderlich, aber sie sollten in Ihrem Werkzeugkasten sein, wenn Ihre Tabellen komplexer werden. Bei Tabellen mit komplexen Strukturen, z. B. Tabellen, in denen Überschriften oder Zellen zusammengeführt sind 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 der entsprechenden Kopfzeilenzelle verknüpfen. Verwenden Sie dazu eine Liste mit id-Werten aller zugehörigen Überschriften, die durch Leerzeichen getrennt sind, als Wert des headers-Attributs.

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

Komplexe Tabellenstrukturen können jedoch für alle Nutzer, nicht nur für Nutzer von Screenreadern, schwer verständlich sein. Einfachere Tabellen mit wenigen bis gar keinen zusammenhängenden Zellen sind kognitiv und in Bezug auf die Unterstützung von Screenreadern leichter verständlich, auch wenn Sie keinen Gültigkeitsbereich und keine Überschriften hinzufügen. Außerdem sind sie einfacher zu verwalten.

Tabellen formatieren

Es gibt zwei relativ unbekannte Elemente, die kurz erwähnt wurden: das Element „Spaltengruppe“ <colgroup> und sein einziger untergeordneter Knoten, das leere Spaltenelement <col>. Mit dem Element <colgroup> werden Spaltengruppen oder <col>-Elemente in einer Tabelle definiert.

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

Die Inhaltsübersicht für eine Tabelle sieht in der Regel so aus. <table> und <caption> sind die beiden Elemente, die enthalten sein sollten:

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

Weder <colgroup> noch <col> haben eine semantische Bedeutung, um die Barrierefreiheit der Tabelle zu verbessern. Sie ermöglichen jedoch eine eingeschränkte Spaltenformatierung, einschließlich der Festlegung einer Breite für die Spalte mit CSS.

<col>-Stile werden für eine Spalte verwendet, sofern keine <td>- oder <th>-Stile dieses Design überschreiben. Wenn Sie beispielsweise mit <colspan> Zellen in einigen Zeilen einer Tabelle, aber nicht in allen zusammenführen, können Sie nicht sicher sein, dass ein Auswahltool wie tr > *:nth-child(8), mit dem das 8. untergeordnete Element jeder Zeile ausgewählt wird, die 8. Spalte vollständig oder für mehrere Zeilen, aber mit einigen Zellen der 9. und 10. Spalte hervorhebt, je nachdem, welche Zeilen- oder Spaltenzellen zusammengeführt wurden.

Leider werden nur wenige Properties unterstützt, die Stile werden nicht in die Zellen übernommen und das <col>-Element kann nur mit einem komplexen Selector verwendet werden, der den relationalen :has()-Selector enthält.

Wenn sowohl <table> als auch <colgroup> eine Hintergrundfarbe haben, wird die background-color von <colgroup> überlagert. Die Reihenfolge des Zeichnens ist: Tabelle, Spaltengruppen, Spalten, Zeilengruppen, Zeilen, wobei die Zellen zuletzt und oben gezeichnet werden, wie im Schema der Tabellenebenen dargestellt. Die <td>- und <th>-Elemente sind keine untergeordneten Elemente von <colgroup>- oder <col>-Elementen und übernehmen deren Stil nicht.

Für die Erstellung von Tabellen mit Streifen eignen sich CSS-Strukturselektoren. Mit tbody tr:nth-of-type(odd) {background-color: rgba(0 0 0 / 0.1);} wird beispielsweise jeder ungeraden Zeile im Textkörper der Tabelle ein durchsichtiges Schwarz hinzugefügt, sodass alle Hintergrundeffekte, die für <colgroup> festgelegt sind, durchscheinen.

Tabellen sind standardmäßig nicht responsiv. Stattdessen werden sie standardmäßig anhand ihres Inhalts skaliert. Es sind zusätzliche Maßnahmen erforderlich, damit das Tabellenlayout auf einer Vielzahl von Geräten effektiv funktioniert. Wenn Sie die CSS-Eigenschaft „display“ für Tabellenelemente ändern, fügen Sie ARIA-role-Attribute hinzu. Das mag redundant klingen, aber die CSS-Eigenschaft display kann sich in einigen Browsern auf den Baum für Barrierefreiheit auswirken.

Daten präsentieren

Tabellenelemente haben semantische Bedeutungen, die von Hilfstechnologien verwendet werden, um sich durch die Zeilen und Spalten zu bewegen, ohne sich zu verlaufen. Das <table>-Element sollte nicht für die Präsentation verwendet werden. Wenn Sie eine Überschrift über einer Liste benötigen, verwenden Sie einen Header und eine Liste. Wenn Sie Inhalte in vielen Spalten anordnen möchten, verwenden Sie das Layout mit mehreren Spalten. Wenn Sie Inhalte in einem Raster anordnen möchten, verwenden Sie CSS-Raster. Verwenden Sie nur eine Tabelle für Daten. Stellen Sie sich Folgendes vor: Wenn Ihre Daten in einer Tabelle präsentiert werden müssen, verwenden Sie <table>. Wenn Sie die Funktionen von Präsentationssoftware wie Keynote oder PowerPoint verwenden möchten, benötigen Sie wahrscheinlich eine Beschreibungsliste.

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 layouten, aber das ist nicht nötig. Sie sollten jedoch mit HTML-Formularen vertraut sein. Das werden wir als Nächstes besprechen.

Wissen testen

Testen Sie Ihr Wissen zu Tabellen.