Tabellen

HTML-Tabellen werden verwendet, um tabellarische Daten mit Zeilen und Spalten anzuzeigen. Die Entscheidung zur Verwendung eines <table> sollte auf die präsentierten Inhalte und die in Bezug auf diese Inhalte. Werden Daten präsentiert, verglichen, sortiert berechnet oder verglichen, dann ist <table> wahrscheinlich die richtige Wahl. Wenn Sie nicht tabellarische Inhalte einfacher gestalten möchten, wie eine große Gruppe von Miniaturansichten, sind Tabellen nicht geeignet. Erstellen Sie stattdessen eine Liste mit Bildern und Raster mit CSS gestalten.

In diesem Abschnitt werden wir alle Elemente besprechen, aus denen sich die Tabelle zusammensetzt, sowie einige Bedienungshilfen und Usability-Funktionen. die Sie bei der Präsentation von tabellarischen Daten berücksichtigen sollten. Bei „HTML lernen“ geht es nicht grundsätzlich um CSS und es gibt einen ganzen Kurs, der sich speziell dafür widmet lernen wir einige tabellenspezifische CSS-Eigenschaften.

Tabellenelemente, in der richtigen Reihenfolge

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

Im <table> befinden sich die Kopfzeilen der Tabelle (<thead>), die Textkörper (<tbody>) der Tabelle und optional die Fußzeilen der Tabelle (<tfoot>). Jede davon besteht aus Tabellenzeilen (<tr>). Zeilen enthalten Tabellenüberschriften (<th>) und Tabellendatenzellen (<td>), die wiederum alle Daten enthalten. Das DOM enthält vor jedem dieser Elemente zwei zusätzliche Elemente: die Tabellenunterschrift (<caption>) und Spaltengruppen (<colgroup>). Je nach ob die <colgroup> ein span-Attribut hat oder nicht, kann sie verschachtelte Tabellenspaltenelemente (<col>) enthalten.

Die untergeordneten Elemente der Tabelle sind in dieser Reihenfolge:

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

Wir beschäftigen uns mit den <table>-Elementen, die zwar optional sind, aber empfohlen werden, sehen Sie sich Zeilen, Kopfzeilenzellen und Tabellendatenzellen. <colgroup> wird zuletzt behandelt.

Tabellenbeschreibung

Da es sich um ein natives, semantisches Element handelt, wird <caption> bevorzugt. Methode zum Benennen einer Tabelle. Der <caption> bietet einen beschreibenden, programmatisch verknüpften Tabellentitel. Es 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 Nutzenden, direkt mit der Tabelle beginnen, ohne den umgebenden Text lesen zu müssen. Alternativ können Sie aria-label oder aria-labelledby verwenden. auf der <table>, um einen barrierefreien Namen als Untertitel anzugeben. Das <caption>-Element hat keine elementspezifischen Attribute.

Die Beschriftung erscheint außerhalb der Tabelle. Der Speicherort der Untertitel kann mit der CSS-Eigenschaft caption-side festgelegt werden. Dabei handelt es sich um eine ist eine bessere Vorgehensweise als das verworfene Attribut align. Hiermit kann die Bildunterschrift oben und unten festgelegt werden. Links und rechts seitliche Positionierung mit inline-start und inline-end wird noch nicht vollständig unterstützt. Oben ist die Standard-Browserpräsentation.

Datentabellen sollten vorzugsweise klare Überschriften und Beschriftungen haben und so einfach sein, dass sie fast selbsterklärend sind. Denken Sie daran: haben nicht alle Nutzenden die gleichen kognitiven Fähigkeiten. Wenn die Tabelle „einen Punkt darlegt“ oder anderweitig interpretiert werden muss, geben Sie eine kurze Zusammenfassung des Hauptpunkts oder der Funktion der Tabelle. 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 in der Absatz vor der Tabelle, durch die die beiden mit dem aria-describedby verknüpft werden. . Eine weitere Option ist das Einfügen der Tabelle in ein <figure> und das Einfügen der Zusammenfassung in die <figcaption>.

Datenabschnitte

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

Diese Elemente tragen nicht zur Barrierefreiheit der Tabelle bei, sind aber im Hinblick auf die Nutzerfreundlichkeit hilfreich. Sie bieten Stil-Hooks. Beispielsweise kann der Inhalt des Headers fixiert werden, und die Inhalte von <tbody> können gescrollt werden. Zeilen, die nicht in einem dieser drei Elemente verschachtelt sind, werden implizit in <tbody> eingeschlossen. Alle drei haben dieselbe implizite Rolle rowgroup. Keines dieser drei Elemente weist elementspezifische Attribute auf.

Bisheriges Ergebnis:

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

Aus Gründen der Barrierefreiheit wurde das <tfoot>-Element ursprünglich direkt nach <thead> und vor <tbody> angegeben. Deshalb können Sie in Legacy-Codebasen auf diese nicht intuitive Quellreihenfolge stoßen.

Tabelleninhalt

Tabellen können in Kopfzeilen, Textkörper und Fußzeilen von Tabellen unterteilt werden, aber keine dieser Elemente bewirkt wirklich etwas, wenn die Tabellen dies nicht tun. Tabellenzeilen, -zellen und -inhalte enthalten. Jede Tabellenzeile „<tr>“ enthält eine oder mehrere Zellen. Wenn eine Zelle eine Headerzelle ist, verwenden Sie <th>. Andernfalls verwenden Sie <td>.

User-Agent-Stylesheets zeigen den Inhalt in der Kopfzeile einer <th>-Tabelle in der Regel zentriert und fett an. Diese Standardstile, und alle Stile lassen sich am besten mit CSS steuern statt mit den eingestellten Attributen, die früher für einzelne Zellen verfügbar waren. Zeilen und sogar <table>.

Es wurden Attribute hinzugefügt, um Abstände zwischen Zellen und innerhalb von Zellen, für Rahmen und für die Textausrichtung hinzuzufügen. Zellenabstand und Zellentaktung, die den Abstand zwischen dem Inhalt einer Zelle und ihrem Rahmen sowie zwischen den Rändern benachbarter Zellen definieren, sollten auf mit den CSS-Funktionen Border-Minimierung und border-spacing Eigenschaften. 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 zu Stilen von Tabellen finden Sie interaktive Präsentation tabellenbezogener CSS-Stile.

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

In diesem Beispiel haben wir eine Bildunterschrift, eine Kopfzeile und einen Tabellentext. Die Kopfzeile enthält eine Zeile mit drei <th>-Kopfzeilenzellen, wodurch drei Spalten erstellt werden. Der Text enthält drei Datenzeilen. Da die erste Zelle eine Kopfzeile für die Zeile ist, verwenden wir <th> anstelle von <td>.

Die Zelle <th> hat semantische Bedeutung, mit impliziten ARIA-Rollen für Spaltenüberschrift oder Zeilenkopfzeile aus. Sie definiert die Zelle als Überschrift für die Spalte oder Zeile der Tabellenzellen, abhängig vom Wert des aufgezählten Attributs scope. Der Browser verwendet standardmäßig col oder row, wenn scope nicht explizit festgelegt ist. Da wir semantisches Markup verwendet haben, enthält die Zelle 1956 zwei Überschriften: Year und Lou Minious. Dieser Verband sagt uns, dass „1956“ ist der "Jahr" für „Lou Minious“. In diesem Beispiel ist die Verknüpfung visuell erkennbar, da wir die gesamte Tabelle sehen können. Mit <th> wird die Verknüpfung auch dann hergestellt, wenn die Kopfzeilenspalte oder -zeile aus dem sichtbaren Bereich gescrollt wurde. Wir hätten explizit festlegen können, <th scope="col">Year</th> und <th scope="row">Lou Minious</th>, aber mit einer einfachen Tabelle wie dieser funktionieren die enumerierten Standardwerte. Weitere Werte für scope sind rowgroup und colgroup. Sie sind bei komplexen Tabellen nützlich.

Zellen zusammenführen

Ähnlich wie in Microsoft Excel, Google Tabellen und Google Numbers 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 verwendet, um Zellen über Zeilen hinweg zu verbinden. auf die Zelle in der obersten Zeile.

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. hat colspan="2". Dadurch werden zwei benachbarte Zellen verbunden. Die erste und die letzte Zelle enthalten rowspan="2". Dadurch werden die Zelle mit der Zelle verbunden. in die angrenzende Zeile, direkt darunter.

Die zweite Zeile in der Kopfzeile der Tabelle enthält zwei Zellen. die Zellen für die zweite und dritte Spalte in der zweiten Zeile. Für die erste oder letzte Spalte wurde keine Zelle deklariert, da die Zelle in der ersten und letzten Spalte in der ersten Zeile zwei Zeilen umfasst.

Wenn eine Zelle durch mehrere Headerzellen mit Verknüpfungen definiert ist, die nicht allein durch die scope-Attribute festgelegt werden können, Das Attribut headers mit einer durch Leerzeichen getrennten Liste der zugehörigen Header einschließen. Da dieses Beispiel eine komplexere Tabelle ist, definieren wir explizit Umfang der Header mit dem Attribut scope. Um noch deutlicher zu werden, 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 Ihrer Werkzeugleiste unbedingt vorhanden sein, werden Ihre Tabellen komplexer. Tabellen mit komplexen Strukturen, z. B. Tabellen, in denen Kopfzeilen oder Zellen zusammengeführt werden, oder Tabellen mit mehr als zwei Ebenen von Spaltenüberschriften oder Zeilenüberschriften erfordern, dass die zugehörigen Headerzellen explizit identifiziert werden. In solchen komplexen Tabellen Jede Datenzelle mit jeder entsprechenden Header-Zelle mit einer Liste von durch Leerzeichen getrennten id-Werten aller zugehörigen Überschriften verknüpfen als Wert des Attributs headers ein.

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

Komplexe Tabellenstrukturen können jedoch für alle Nutzenden schwer zu verstehen sein, nicht nur für Nutzer von Screenreadern. Kognitiv Und in Bezug auf die Screenreader-Unterstützung sind einfachere Tabellen mit wenigen oder gar keinen Zellen, auch ohne den Umfang und die Überschriften hinzuzufügen, verstanden wird. Außerdem sind 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>. Die Mit dem <colgroup>-Element werden Spaltengruppen oder <col>-Elemente innerhalb einer Tabelle definiert.

Bei Verwendung sollte die Spaltengruppierung in <table> direkt nach <caption> und vor jeglichen Tabellendaten verschachtelt werden. Wenn sie mehr als eine Spalte umfassen, verwenden Sie das Attribut span.

Die Inhaltsübersicht für eine Tabelle sieht im Allgemeinen so 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, wenn es darum geht, die Tabelle besser zugänglich zu machen, aber sie ermöglichen es. für eingeschränkte Spaltenstile, einschließlich der Festlegung einer Spaltenbreite mit CSS.

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

Leider werden nur einige Eigenschaften unterstützt, die Stile werden nicht in die Zellen übernommen und die einzige Möglichkeit, die <col> zu verwenden in Targeting-Zellen hat einen komplexen Selektor wie den relationalen Selektor :has().

Wenn sowohl <table> als auch <colgroup> eine Hintergrundfarbe haben, wird das background-color von <colgroup> oben angezeigt. Die Reihenfolge der Zeichnungen lautet: Tabelle, Spaltengruppen, Spalten, Zeilengruppen, Zeilen, wobei die Zellen zuletzt und oben stehen, wie im Schema der Tabelle gezeigt. Ebenen Die Elemente <td> und <th> sind keine Nachfolger von <colgroup>- oder <col>-Elementen und übernehmen nicht ihren Stil.

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

Tabellen sind standardmäßig nicht responsiv. Vielmehr wird die Größe standardmäßig an den jeweiligen Inhalt angepasst. Zusätzliche Maßnahmen sind erforderlich, um einen Tisch zu erhalten Layout-Stile verwenden, um effektiv auf einer Vielzahl von Geräten zu funktionieren. Wenn Sie die CSS-Anzeigeeigenschaft für Tabellenelemente ändern, gilt Folgendes: enthalten ARIA-role-Attribute. Das mag redundant klingen, aber die CSS-Eigenschaft display kann sich in einigen Browsern auf die Barrierefreiheitsstruktur auswirken.

Daten präsentieren

Tabellenelemente haben semantische Bedeutungen, die von Hilfstechnologien verwendet werden, um das Navigieren durch die Zeilen und Spalten zu ermöglichen ohne sich zu verlieren. Das <table>-Element sollte nicht für eine Präsentation verwendet werden. Wenn eine Überschrift in einer Liste angezeigt werden soll, verwenden Sie einen header. und eine Liste. Wenn Sie Inhalte in mehreren Spalten anordnen möchten, verwenden Sie das mehrspaltige Layout. Wenn Sie Inhalte in einem Raster anordnen möchten, verwenden Sie CSS-Raster. Verwenden Sie nur eine Tabelle für Daten. Stellen Sie sich das so vor: Wenn Sie für Ihre Daten während eines Meetings eine Tabelle benötigen, verwenden Sie <table>. Wenn Sie die Funktionen von Präsentationssoftware wie Keynote oder PowerPoint verwenden möchten, benötigen Sie wahrscheinlich eine Beschreibungsliste.

Das Sortieren von Tabellenspalten ist zwar der Aufgabenbereich von JavaScript, aber das Auszeichnen Ihrer Überschriften, damit die Nutzer wissen, dass die Spalte sortiert werden kann, ist HTML. Informieren Sie Ihre Nutzer darüber, dass die Tabellenspalten mit aufsteigenden, absteigenden oder unsortierten Symbolen sortiert werden können. Die aktuell sortierte Spalte sollte Fügen Sie das Attribut aria-sort mit dem Aufzählungswert der Sortierrichtung ein. Das <caption> kann Aktualisierungen zur Sortierreihenfolge höflich über aria-live und einen -Span, 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 keine <table>. Wenn Sie eine Tabelle für die Präsentation verwenden, legen Sie role="none" fest.

Viele Entwickler verwenden Tabellen, um Formulare anzuordnen, aber dies ist nicht erforderlich. Sie müssen jedoch über HTML-Formulare Bescheid wissen. Darauf gehen wir als Nächstes ein.

Wissen testen

Testen Sie Ihr Wissen über Tabellen.