Empfohlen

• Zahnarzt Weber Zürich
• Mezzoblue Markup Guide
• Das Zen des CSS Design
• Neuer HWG CSS-Kurs

Weiteres

• Kontakt
• Barrierefreiheit
• Englische Version

Artikel

• Barrierefreie Image maps
• Daten Tabellen (1)
• Daten Tabellen (2)

Involviert

• Research Kitchen
• <minz />
• Karl Haak
• Zausch

Daten Tabellen Teil 2

12/18/2003

Letztes Mal , sprach ich über die Herstellung von Beziehungen zwischen Tabellenüberschriften und Tabellendatenzellen mittels des scope Attributs.

Nun bietet HTML einen weiteren Mechanismus an, diese Beziehungen herzustellen. Während die Methode mit scope nur auf einer Ebene arbeitet (col/colgroup gilt nur für eine Spalte beziehungsweise Spaltengruppe und row/rowgroup nur für eine Zeile/Zeilengruppe), kann man die id/headers Methode bei komplexeren oder verzweigteren Tabellenüberschriften verwenden.

Id und headers

Eigentlich eine sehr einfache Geschichte, jedoch mit einem großen Auszeichnungsaufwand, wie unten stehende Beispiele zeigen werden.

1. Jede Kopf/Überschriftenzelle bekommt eine eigene id zugewiesen (indem man folgenden Syntax verwendet <th id="irgendwas">)
2. Füge das headers Attribut (mittels <td headers="irgendwas">) jeder Datenzelle hinzu und liste darin die entsprechende id der dazugehörigen Tabellenüberschrift auf. Gibt es mehr als eine Überschrift, die zu dieser Datenzelle gehört, werden die einzelnen ids durch ein Leerzeichen getrennt aufgelistet, beginnend mit der obersten Überschrift (<td headers="irgendwas irgendwann irgendwie">).

Beispiele

Diesesmal nur ein Beispiel, da die Geschichte bei weitem nicht so kompliziert ist, wie sie sich anhören mag.
Zusätzlich habe ich jedoch noch eine Variante von Daten Tabellen Teil 1, 3. Beispiel, erstellt, indem ich die Benutzung von scope="rowgroup" demonstieren und erklären möchte. Wen es interessiert, einfach dem Link zum 2. Beispiel folgen.

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 id-headers Beziehungen. Beispiel 1
2. Variation von Daten Tabellen Teil 1 Beispiel 3, welches die Verwendung von scope?rowgroup zeigt. Beispiel 2

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