Schluss mit der Verwirrung darüber, wann eine echte HTML-Tabelle (“semantisch”) verwendet werden sollte und wann Divs und Spalten die Aufgabe übernehmen können.
Der wichtigste Unterschied
Es ist wichtig zu verstehen, sowohl für Entwickler als auch für Benutzer, die Seiten und Beiträge mit Daten erstellen, ob es sich dabei um echte Tabellendaten handelt oder nicht.
Für Entwickler (technisch)
<table> sollte verwendet werden, wenn die darzustellenden Daten von Natur aus tabellarisch sind, wie z. B. bei einer Tabellenkalkulation oder einem strukturierten Informationsraster, bei dem es eine klare Beziehung zwischen Zeilen und Spalten gibt. Wenn du zum Beispiel eine Liste von Produkten mit Attributen wie Preis, Lagerbestand und Bewertungen anzeigst, ist dies perfekt für eine Tabelle, da jede Zeile ein anderes Produkt darstellt und jede Spalte bestimmte Attribute repräsentiert.
Ich weiß, dass ich hier vielleicht als „Captain Obvious“ rüberkomme, aber ich werde es trotzdem aussprechen: Ein <div> ist ein digitales Chamäleon. Es kann so gestaltet werden, dass es wie viele Dinge aussieht, aber es ist immer noch ein generisches Blockelement, das hauptsächlich für das Layout und die Strukturierung von Inhalten verwendet wird. Es hat keine semantische Bedeutung und eignet sich daher nicht für die Darstellung von Tabellendaten. Zwar kann man es zum Aufbau von Abschnitten, Überschriften oder anderen Layout-Komponenten verwenden, aber der Versuch, Tabellenstrukturen mit <div>-Elementen zu imitieren, kann die Barrierefreiheit beeinträchtigen. Diese Vorgehensweise beeinträchtigt Bildschirmlesegeräte und andere Hilfstechnologien, da diese auf semantisches HTML angewiesen sind, um Beziehungen zwischen Daten korrekt zu interpretieren.
Für Content Ersteller (nicht technisch)
Stell dir <table> wie einen Tisch vor, den du in einem Restaurant sehen kannst. Jede Zeile steht für einen Kunden und jede Spalte kann Dinge wie die Bestellung oder die Ankunftszeit auflisten. Tabellen eignen sich ideal für Informationen, die in Zeilen und Spalten strukturiert werden müssen, wobei jedes Element eindeutig mit einem anderen verbunden ist.
Ein <div> hingegen ist eher ein Kasten, mit dem du Elemente auf einer Webseite organisieren oder gruppieren kannst. Es ist so, als würde man Dinge in verschiedene Kisten packen, um Ordnung zu schaffen – es hilft bei der Organisation, aber es impliziert nicht, dass die Dinge in einer Kiste mit den Dingen in einer anderen Kiste zusammenhängen, wie es bei einer Tabelle der Fall wäre. Wenn du versuchst, eine Tabelle aus Kästchen (oder divs) zu bauen, sieht das zwar wie eine Tabelle aus, aber sie funktioniert nicht richtig, wenn jemand mit Sehbehinderung eine spezielle Software zum Navigieren auf der Seite verwendet.
Wann eine Tabelle verwendet werden sollte:
Eine Tabelle wird verwendet, wenn du Daten hast, die in Zeilen und Spalten strukturiert werden müssen, z. B. beim Vergleich von Produkten, Finanzzahlen oder Zeitplänen.
Wann ein div verwendet werden sollte:
Verwende <div>, wenn du Inhalte organisierst, die keine klare Zeilen- und Spaltenbeziehung haben, wie Textabsätze, Bilder oder andere Elemente für Layoutzwecke.
Kurz gesagt: Tabellen für Daten, Divs für das Layout. Wenn du das Falsche verwendest, kann deine Website für alle schwieriger zu bedienen sein, insbesondere für Menschen, die Bildschirmlesegeräte benutzen.
Darstellung von Daten in einer Tabelle mit der Greyd.Suite
Die Suite bietet einen Tabellenblock, der eine Variante der Post Übersicht ist und es dir ermöglicht, Beitragsinhalte in Tabellenform anzuzeigen. Hier findest du ein Tutorial, wie du den Tabellenblock verwenden kannst.
Eine tolle Podcast-Episode über Tabellen und Barrierefreiheit
Es gibt einen wunderbaren Podcast namens Accessibility Craft. Es ist eine Kombination aus unbeschwertem Plaudern über Craft Getränke, bevor das ernste und stets lehrreiche Gespräch über einen Aspekt der Barrierefreiheit beginnt. Es gibt eine großartige Folge über Tabellen. Hier und da wird es ein bisschen technisch, aber es gibt eine Menge Kontext für weniger technisch versierte Content Manager.
In dieser Folge endet der Crafts Teil bei 10:15 und von da an sprechen sie über Tabellen.
Möchtest du mehr über die Greyd.Suite erfahren?
