Tabellen

HTML-Tabellen werden für die Anzeige von tabellarischen Daten mit Zeilen und Spalten verwendet. Die Entscheidung für ein <table>-Objekt sollte auf den jeweiligen Inhalten und den jeweiligen Anforderungen der Nutzer basieren. Wenn Daten präsentiert, verglichen, sortiert, berechnet oder verglichen werden, ist <table> wahrscheinlich die richtige Wahl. Wenn Sie einfach nicht tabellarische Inhalte, z. B. eine große Gruppe von Miniaturansichten, übersichtlich anordnen möchten, sind Tabellen nicht geeignet. Erstellen Sie stattdessen eine Bilderliste und gestalten Sie das Raster mit CSS.

In diesem Abschnitt besprechen wir alle Elemente, aus denen die Tabelle besteht, sowie einige Funktionen zur Barrierefreiheit und Nutzerfreundlichkeit, die Sie bei der Präsentation von Tabellendaten berücksichtigen sollten. Beim HTML-Lernen geht es zwar nicht im Grunde um CSS. Es gibt auch einen ganzen Kurs, der CSS erlernen muss. In diesem Kurs befassen wir uns mit einigen tabellenspezifischen CSS-Eigenschaften.

Tabellenelemente, in der richtigen Reihenfolge

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

In der <table> finden Sie die Kopfzeilen (<thead>), Textkörper (<tbody>) und optional Fußzeilen (<tfoot>) der Tabelle. Jede dieser Zeilen besteht aus Tabellenzeilen (<tr>). Die Zeilen enthalten eine Tabellenüberschrift (<th>) und die Zellen mit Tabellendaten (<td>), die wiederum alle Daten enthalten. Im DOM finden Sie möglicherweise zwei zusätzliche Elemente: die Tabellenunterschrift (<caption>) und Spaltengruppen (<colgroup>). Je nachdem, ob das <colgroup>-Attribut ein span-Attribut hat, kann es verschachtelte Tabellenspaltenelemente (<col>) enthalten.

Die untergeordneten Elemente der Tabelle sind in der folgenden Reihenfolge vorhanden:

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

Wir behandeln die untergeordneten Elemente der <table>-Elemente, die alle optional, aber empfohlen sind. Danach schauen wir uns die Zellen für Zeilen, Kopfzeilen und Tabellendaten an. Der <colgroup> wird zuletzt abgedeckt.

Bildunterschrift

<caption> ist ein natives, semantisches Element und die bevorzugte Methode, um einer Tabelle einen Namen zu geben. <caption> stellt einen beschreibenden, programmatisch verknüpften Tabellentitel bereit. Er 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. Dadurch wissen alle Nutzer sofort den Zweck der Tabelle, ohne den umgebenden Text lesen zu müssen. Alternativ können Sie aria-label oder aria-labelledby für das <table> verwenden, um einen zugänglichen Namen als Untertitel anzugeben. Das <caption>-Element hat keine elementspezifischen Attribute.

Die Bildunterschrift wird außerhalb der Tabelle angezeigt. Die Position des Untertitels kann mit der CSS-Eigenschaft caption-side festgelegt werden. Diese Methode eignet sich besser als die Verwendung des verworfenen Attributs align. Dadurch können die Untertitel oben und unten eingeblendet werden. Die linke und rechte Positionierung mit inline-start und inline-end wird noch nicht vollständig unterstützt. Oben ist die Standard-Browser-Präsentation.

Vorzugsweise sollten Datentabellen klare Überschriften und eine Bildunterschrift haben und einfach genug sein, um fast selbsterklärend zu sein. Denken Sie daran, dass nicht alle Nutzenden über die gleichen kognitiven Fähigkeiten Wenn die Tabelle „einen Punkt macht“ oder anderweitig interpretiert werden muss, geben Sie eine kurze Zusammenfassung des Hauptpunkts oder der Funktion der Tabelle an. Wo diese Zusammenfassung platziert wird, hängt von ihrer Länge und Komplexität ab. Wenn es kurz ist, verwende es als inneren Text für die Bildunterschrift. 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 Option ist, die Tabelle in eine <figure> einzufügen und die Zusammenfassung in <figcaption> zu platzieren.

Datenabschnitte

Der Inhalt von Tabellen besteht aus bis zu drei Abschnitten: null oder mehr Tabellenüberschriften (<thead>), Tabellentexte (<tbody>) und Fußzeilen (<tfoot>). Alle sind optional, wobei null oder mehr davon unterstützt werden.

Diese Elemente unterstützen oder beeinträchtigen nicht die Zugänglichkeit der Tabelle, sind aber im Hinblick auf die Usability nützlich. Sie bieten Styling-Haken. Beispielsweise kann der Inhalt des Headers fixiert werden, während der Inhalt von <tbody> für Scrollen geeignet sein kann. Zeilen, die nicht in einem dieser drei Elemente verschachtelt sind, werden implizit von einem <tbody> umschlossen. Alle drei haben die gleiche implizite Rolle rowgroup. Keines dieser drei Elemente hat elementspezifische Attribute.

Was wir bisher erreicht haben:

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

Das <tfoot>-Element wurde ursprünglich aus Gründen der Zugänglichkeit so angegeben, dass es direkt nach dem <thead> und vor dem <tbody> erscheint. Deshalb kann es sein, dass Sie in Legacy-Codebasis auf diese nicht intuitive Quellreihenfolge stoßen.

Tabelleninhalt

Tabellen können in Tabellenüberschriften, Textkörper und Fußzeilen unterteilt werden, aber keine dieser Funktionen ist wirklich hilfreich, wenn die Tabellen keine Tabellenzeilen, ‐zellen und ‐inhalte enthalten. Jede Tabellenzeile (<tr>) enthält eine oder mehrere Zellen. Wenn eine Zelle eine Kopfzeile ist, verwenden Sie <th>. Andernfalls verwenden Sie <td>.

Bei User-Agent-Stylesheets wird der Inhalt in der Regel zentriert und fett in einer <th>-Tabellenkopfzelle angezeigt. Diese Standardstile und alle Stile lassen sich am besten mit CSS steuern und nicht mehr mit den verworfenen Attributen, die früher für einzelne Zellen, Zeilen oder sogar <table> verfügbar waren.

Es gab Attribute für den Abstand zwischen Zellen und innerhalb von Zellen, für Rahmen und für die Textausrichtung. „Zellenabstand“ und „Zellenabstand“, 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. Weitere Informationen zum Zuweisen von Stilen zu Tabellen finden Sie in diesem interaktiven Foliensatz mit tabellenbezogenen CSS-Stilen.

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

In diesem Beispiel haben wir eine Bildunterschrift, eine Tabellenüberschrift und einen Tabellentext. Die Kopfzeile hat eine Zeile mit drei <th>-Header-Zellen und somit drei Spalten. Der Textkörper enthält drei Datenzeilen: Die erste Zelle ist eine Kopfzeile für die Zeile. Daher wird <th> anstelle von <td> verwendet.

Die Zelle <th> hat eine semantische Bedeutung mit den impliziten ARIA-Rollen columnheader oder rowheader. Er definiert die Zelle als Überschrift für die Spalte oder Zeile von Tabellenzellen, abhängig vom Wert des Aufzählungsattributs scope. Der Browser verwendet standardmäßig col oder row, wenn scope nicht explizit festgelegt ist. Da wir semantisches Markup verwendet haben, hat die Zelle 1956 zwei Überschriften: Year und Lou Minious. Dieser Verband teilt uns mit, dass "1956" das "Jahr" der Abschlussfeier von "Lou Minious" ist. In diesem Beispiel ist die Verknüpfung, wie wir die gesamte Tabelle sehen können, visuell deutlich erkennbar. Wenn Sie <th> verwenden, wird die Verknüpfung auch dann hergestellt, wenn die Kopfzeile oder Zeile aus dem sichtbaren Bereich gescrollt wurde. Wir hätten <th scope="col">Year</th> und <th scope="row">Lou Minious</th> explizit festlegen können, aber mit einer einfachen Tabelle wie dieser funktionieren die enumerierten Standardwerte. Weitere Werte für scope sind rowgroup und colgroup, die für komplexe Tabellen nützlich sind.

Zellen zusammenführen

Ähnlich wie in MS Excel, Google Tabellen und Zahlen ist es möglich, mehrere Zellen zu einer einzigen Zelle zu verbinden. Dies geschieht mit HTML! Das Attribut colspan wird verwendet, um zwei oder mehr benachbarte Zellen innerhalb einer einzelnen Zeile zu verbinden. Das Attribut rowspan wird zum Zusammenführen von Zellen über Zeilen hinweg verwendet, die sich in der Zelle in der obersten Zeile befinden.

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

Die zweite Zeile in der Kopfzeile der Tabelle enthält zwei Zellen; dies sind die Zellen für die zweite und dritte Spalte in der zweiten Zeile. Für die erste oder letzte Spalte ist keine Zelle deklariert, da sich die Zelle in der ersten und letzten Spalte in der ersten Zeile über zwei Zeilen erstreckt.

In Fällen, in denen eine Zelle durch mehrere Headerzellen mit Verknüpfungen definiert wird, die nicht durch das Attribut scope allein festgelegt werden können, fügen Sie das Attribut headers in eine durch Leerzeichen getrennte Liste der zugehörigen Kopfzeilen ein. Da es sich in diesem Beispiel um eine komplexere Tabelle handelt, definieren wir den Bereich der Header explizit mit dem Attribut scope. Um noch verständlicher zu sein, haben wir das headers-Attribut in jede Zelle eingefügt.

In einem so einfachen Anwendungsfall waren die headers-Attribute möglicherweise nicht erforderlich. Sie sollten sie aber immer zur Hand haben, wenn Ihre Tabellen immer komplexer werden. Bei Tabellen mit komplexen Strukturen, z. B. Tabellen mit zusammengeführten Überschriften oder Zellen oder mit mehr als zwei Ebenen von Spalten- oder Zeilenköpfen, müssen die zugehörigen Kopfzeilenzellen explizit identifiziert werden. Verknüpfen Sie in solch komplexen Tabellen jede Datenzelle explizit jeder entsprechenden Headerzelle mit einer Liste von durch Leerzeichen getrennten id-Werten aller zugehörigen Header als Wert des Attributs headers.

Das Attribut headers ist häufiger bei <td>-Elementen zu finden, ist aber auch für <th> gültig.

Allerdings können komplexe Tabellenstrukturen für alle Nutzenden schwer verständlich sein, nicht nur für Nutzer von Screenreadern. Kognitiv und im Hinblick auf die Screenreader-Unterstützung sind einfachere Tabellen mit wenigen oder keinen ausgefüllten Zellen zu verstehen, auch ohne den Umfang und die Überschriften hinzuzufügen. Außerdem ist sie einfacher zu verwalten.

Stile für Tabellen festlegen

Es gibt zwei relativ unklare Elemente, die kurz erwähnt wurden: die Spaltengruppe <colgroup>, das Element und das einzige Nachfolgerelement, das leere Spaltenelement <col>. Mit dem Element <colgroup> werden Gruppen von Spalten oder <col>-Elementen in einer Tabelle definiert.

Wenn sie verwendet wird, sollte die Spaltengruppierung im <table> direkt nach <caption> und vor allen Tabellendaten verschachtelt sein. Wenn sie mehr als eine Spalte umfassen, verwenden Sie das Attribut span.

In der Regel sieht die Gliederung des Inhalts einer Tabelle wie folgt aus, wobei <table> und <caption> die beiden Elemente sind, 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 eingeschränkte Spaltenstile, wie z. B. das Festlegen einer Breite für die Spalte mit CSS.

Mit <col>-Stilen wird ein Spaltenstil gestaltet, sofern es keine <td>- oder <th>-Stile gibt, die diesen Stil überschreiben. Wenn <colspan> beispielsweise verwendet wird, um Zellen in einigen Zeilen einer Tabelle, aber nicht in allen Zellen zu verbinden, können Sie nicht sicher sein, dass ein Selektor wie tr > *:nth-child(8), mit dem das 8. untergeordnete Element jeder Zeile ausgewählt wird, die 8. Spalte vollständig oder die 8. Spalte für mehrere Zeilen markiert, aber mit einer Abteilung der 9. und 10. Spaltenzellen, je nachdem, welche Zeilen- oder Spaltenzellen zusammengeführt wurden.

Leider werden nur einige Eigenschaften unterstützt. Die Stile werden nicht in die Zellen übernommen. Sie können das <col>-Element nur mit einem komplexen Selektor verwenden, einschließlich des relationalen Selektors :has().

Wenn sowohl <table> als auch <colgroup> eine Hintergrundfarbe haben, wird die background-color des <colgroup> oben angezeigt. Zeichnungsreihenfolge: Tabelle, Spaltengruppen, Spalten, Zeilengruppen, Zeilen, wobei die Zellen am Ende und oben stehen, wie im Schema von Tabellenebenen dargestellt. Die Elemente <td> und <th> sind keine Nachfolger von <colgroup>- oder <col>-Elementen und übernehmen ihren Stil nicht.

Für das Striping von Tabellen sind CSS-Strukturselektoren praktisch. Beispielsweise fügt tbody tr:nth-of-type(odd) {background-color: rgba(0 0 0 / 0.1);} jeder ungeraden Zeile im Textkörper der Tabelle ein durchscheinendes Schwarz hinzu, sodass alle für <colgroup> festgelegten Hintergrundeffekte sichtbar sind.

Tabellen sind nicht standardmäßig responsiv. Stattdessen wird die Größe standardmäßig an ihren Inhalt angepasst. Damit der Tabellenlayoutstil auf verschiedenen Geräten effektiv funktioniert, sind zusätzliche Maßnahmen erforderlich. Wenn Sie die CSS-Anzeigeeigenschaft für Tabellenelemente ändern, fügen Sie die ARIA-Attribute role ein. Das mag überflüssig klingen, die CSS-Eigenschaft display kann sich aber in einigen Browsern auf die Struktur der Bedienungshilfen auswirken.

Daten präsentieren

Tabellenelemente haben semantische Bedeutungen, die von assistiven Technologien verwendet werden, um das Navigieren durch die Zeilen und Spalten zu ermöglichen, ohne „verloren zu gehen“. Das <table>-Element sollte nicht für die Präsentation verwendet werden. Wenn Sie eine Überschrift in einer Liste benötigen, verwenden Sie einen Header und eine Liste. Wenn Sie Inhalte in viele Spalten anordnen möchten, verwenden Sie ein mehrspaltiges Layout. Wenn Sie Inhalte in einem Raster anordnen möchten, verwenden Sie das CSS-Raster. Verwenden Sie eine Tabelle nur für Daten. Stellen Sie es sich so vor: Wenn Ihre Daten eine Tabelle erfordern, um bei einer Besprechung präsentiert zu werden, verwenden Sie <table>. Wenn Sie die in Präsentationssoftware wie Keynote oder PowerPoint verfügbaren Funktionen nutzen möchten, benötigen Sie wahrscheinlich eine Beschreibungsliste.

Das Sortieren von Tabellenspalten dient dem JavaScript-Bereich. Das Auszeichnen der Überschriften, um Nutzer darüber zu informieren, dass die Spalte sortierbar ist, ist jedoch Bestandteil von HTML. Informieren Sie Ihre Nutzer darüber, dass die Tabellenspalten sortiert werden können. Symbole zeigen aufsteigend, absteigend oder unsortiert an. Die aktuell sortierte Spalte sollte das Attribut aria-sort mit dem Aufzählungswert der Sortierrichtung enthalten. Die <caption> kann Aktualisierungen der Sortierreihenfolge höflich über aria-live und einen Span ansagen, der dynamisch aktualisiert wird und für Screenreader-Nutzer sichtbar ist. Da die Spalte durch Klicken auf den Inhalt der Kopfzeile sortiert werden kann, sollte der Inhalt der Kopfzeile ein <button> sein.

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

Viele Entwickler verwenden Tabellen, um Formulare anzuordnen, aber das ist nicht erforderlich. Sie müssen jedoch über HTML-Formulare Bescheid wissen, daher beschäftigen wir uns als Nächstes damit.

Wissen testen

Testen Sie Ihr Wissen über Tabellen.