Barrierefreies Webdesign — ein zugängliches und nutzbares Internet gestalten

Benimmregeln für Datentabellen Teil 2: Komplexe Datentabellen geschrieben von Tomas Caspers (2008)

Die Inhalte dieser Seite sind ursprünglich in einer vierteiligen Serie von der Extern: Aktion Mensch veröffentlicht worden. Auf www.barrierefreies-webdesign.de werden die ersten drei Teile auf mehreren Seiten verteilt präsentiert.

Spalten gruppieren mit COLGROUP

Während THEAD, TFOOT und TBODY für die horizontale Unterteilung einer Tabelle in größere Bereiche zuständig sind, gibt es mit COLGROUP (Spaltengruppe) ebenfalls ein Element für die Unterteilung in vertikale Bereichen und mit COL ein Element, um gezielt einzelne Spalten in diesen Bereichen anzusprechen.

Diese Methode haben wir uns im folgenden Beispiel zu Nutze gemacht, um die Tabelle in die für den konkreten Anwendungsfall üblichen Spalten und Spaltengruppen zu unterteilen. Diese können in Folge per CSS so formatiert werden, dass die Platzierung immer rechtsbündig steht, der Verein hingegen linksbündig, sowie die weiteren Daten (Spiele, Siege, Unentschieden, Niederlagen, Tore, Tordifferenz und Punkte) wieder rechtsbündig.

Bildschirmfotoausschnitt der Tabelle. Hervorgehoben werden COLGROUP + span und COL.

Erreicht wird dies über den folgenden Code, der unmittelbar zu Beginn der Tabelle, d.h. nach dem eröffnenden <table>-Tag und einer eventuell vorhandenen <caption>, aber noch vor dem <thead> stehen sollte:

<colgroup>
  <col class="platz">
  <col class="verein">
</colgroup>
<colgroup>
  <col class="bewegung">
</colgroup>
colgroup span="4" class="spiele"> </colgroup>
<colgroup span="3" class="ergebnisse"> </colgroup>

Hier sehen Sie schon die unterschiedlichen Varianten der Einteilung in Spaltengruppen: innerhalb des zwingend notwendigen COLGROUP (COL darf nicht für sich alleine stehen) können Sie entweder die betreffenden Spalten ausdrücklich angeben – in diesem Fall werden diese als einzelne <col> aufgelistet. Oder Sie geben an, für wie viele Spalten die Spaltengruppe gelten soll – in diesem Fall erhält <colgroup> ein SPAN-Attribut (<colgroup span="3">).

Eine Beschränkung hat das HTML-Tabellenmodell an dieser Stelle: Sie können COLGROUP nicht verschachteln, d.h. eine Spaltengruppe darf keine weiteren Spaltengruppen enthalten, sondern nur Spalten (COL). In der Praxis ist diese Beschränkung jedoch nicht so gravierend, da es kaum Datentabellen mit mehr als zwei Ebenen von Spaltenüberschriften gibt. Falls Sie tatsächlich Tabellen mit drei oder mehr Ebenen von Überschriftenzellen auszeichnen müssen, bleibt Ihnen nur noch der Rückgriff auf die Zuordnung per headers/id bei gleichzeitigen Verzicht auf COLGROUP.