Minz schaut über den Tellerrand

Daten Tabellen Teil 1

20.11.2003

Datentabellen richtig in HTML auszuzeichnen ist eine Wissenschaft für sich. Sie barrierefrei auszuzeichnen noch viel mehr. Ich habe lange mit diesen Tabellen herumgekämpft, um überhaupt grundsätzlich die Thematik zu durchblicken. Am schlimmsten fand ich, dass Beispiele eher rar gesät sind, und man sich immer nur an Beschreibungen halten konnte. Also habe ich es mal gewagt ein paar eigene Beispiele hier zu posten. Es sind nur Schnellschüsse, daher bitte einfach kommentieren, sollte etwas falsch sein, oder fehlen. Es gab schon Anmerkungen, dass die Erklärungen etwas zu kurz geraten sind, daher werde ich diesen und den kommenden Artikel wohl nochmal etwas zusammenfassen.

Das scope Attribut

Das scope Attribut (die beste deutsche Übersetzung wäre wohl so etwas wie Bereich oder Reichweite) der einfachste Weg um Tabellendaten mit der dazugehörigen Tabellenüberschrift zu verknüpfen.

Scopes können sowohl horizontal (rows) als auch vertikal (cols) gerichtet sein. Hat man beispielsweise eine Spaltenüberschrift, die auch tatsächlich alle Zellen dieser Spalte beschreibt, beziehungsweise überschreibt , würde man scope="col" verwenden. Horizontale und vertikale scopes können beide innerhalb einer Tabelle benutz werden, wenn die Tabelle diese Anforderung stellt (wie in den Beispielen). Scopes können auch auf gruppierte Elemente angewandt werden, wie colgroup (siehe Beispiel 3).

Überschriften (Headers)

Es gibt zwei verschiedene Überschriftenelemente. Das th Element (th=Table Header) ist eine sogenannte Überschrift ersten Grades (first-level header). Normalerweise werden diese Elemente an oberster Stelle der Tabelle platziert, in der ersten (oder den ersten) Tabellenzeile(n). Jedoch sollte man das th Element überall dort in einer Tabelle verwenden, wo eine Tabellenzelle als Überschrift fungiert. Innerhalb der Tabelle gilt diese Überschrift dann für alle ihr folgenden Zeilen, nicht aber für die Zeilen darüber.

Eine Überschrift zweiten Grades (second-level header) ist das thead Element. thead diente ursprünglich rein gestalterischen Zwecken. Der Kopf der Tabelle sollte (ähnlich eines Briefkopfes) bei umfangreichen Tabellen immer dargestellt werden, während des Durchblätterns. Dies wird jedoch von keinem Browser unterstützt, und macht auch bei variablen Seitengrößen im Gegensatz zu gedruckten Werken keinen Sinn. Nichtsdestotrotz können damit Tabellenelemente gruppiert werden, indem man die Tabelle in Kopf (mit thead) und verschiedene Sektionen (mit tbody) aufteilt (wie in Beispiel 2 und 3).

Das Überschriften Elemente sollten bitte nicht mit dem headers Attribut verwechselt werden (ein Attribut der td, th Elemente), welches in Daten Tabellen Teil 2 behandelt wird.

Beispiele

Ich habe schon seitenweise Abhandlungen über Datentabellen in HTML gelesen, jedoch habe ich es nie wirklich verstanden. Dieses Mal habe ich eigene Testdateien angefertig, um es einmal auszuprobieren.

Die Beispiele verwenden CSS-Stile, die Attributs- und Nachbarschaftsselektoren verwenden. Um sie daher korrekt anzuzeigen sollte ein Browser verwendet werden, der diesen Selektoren-Syntax versteht(Mozilla/Gecko (empfohlen) oder Opera)

  1. Tabelle mit vertikalen und horizontalen scope-Attributen. Beispiel 1
  2. Selbe Tabelle mit thead und einer Reihe von tbody Sektionen. Beispiel 2
  3. Fast dieselbe Tabelle, unterteilt in Sektionen mehreren scopes und gruppierten Spalten via colgroup. Beispiel 3

Weiterführende Links

Alle verlinkten Seiten/Artikel sind englischsprachig:

  1. Joe Clarke's Building Accessible Websites Chapter 10: Tables and Frames
  2. HTML 4.01 Specifications Chapter 11: Tables
  3. WCAG HTML Techniques for Data Tables