Die HTML-Tabelle neu entdecken

KATEGORIE: (X)HTML & CSS VOM 08.09.2011 1

Tabellen haben immer noch einen schlechten Ruf, ihnen hängt nach wie vor das Etikett des "bösen" Tabellenlayouts der Jahrtausendwende an.

Die Tabelle, ein Kind der zweiten Stunde

Nachdem sich 1994 das „World Wide Web Consortium“ (kurz: W3C) gründete, wurde HTML mit der Version 3.2 deutlich erweitert und standardisiert. Mit HTML 3.2 wurde auch das HTML-Element Tabelle aus der Taufe gehoben. In der Empfehlung des W3C vom Januar 1997 steht zu der Tabelle unter anderem:

„[…] can be used to markup tabular material or for layout purposes.“

Diese Definition konnte schon fast als Aufforderung verstanden werden, Tabellen zur grafischen Gestaltung von Webseiten einzusetzen. Das wurde dann auch ausgiebig praktiziert, zumal das Interesse am Internet rasant zunahm und damit auch der Wunsch nach einem professionellen Erscheinungsbild der Webseiten. Daraus ergaben sich aber auch Probleme:

  • Das Laden der Tabellen dauert sehr lang. Der Browser stellt erst dann eine Tabelle dar, wenn die letzte Tabellenzelle berechnet ist. Bei mehrfach verschachtelten Tabellen kann das durchaus einige Zeit in Anspruch nehmen.
  • Das Layout ist unflexibel und Änderungen benötigen durch die Komplexität einen immensen Aufwand.
  • Sie sind nicht übertragbar auf internetfähige Endgeräte, wie Palm, Handy und Tablet.
  • Und, schlussendlich, ist die Zugänglichkeit für Menschen, die auf Sprach- oder Brailleausgabegeräte angewiesen sind, selten gewährleistet. Sie sind von einem solchen Internetangebot überwiegend ausgeschlossen.

In der Spezifikation des darauf folgenden HTML 4 ist das W3C auf die entstandene Problematik eingegangen, indem es empfiehlt Tabellen nicht ausschließlich als Mittel zum Strukturieren von (HTML-) Dokumenten zu nutzen.

Inzwischen ist mit CSS dem Anliegen nach grafisch gestalteten und strukturierten Webseiten Rechnung getragen worden. Die Trennung von Inhalt und Aussehen, allgemeine Zugänglichkeit, benutzerorientierte Navigation – vieles ist hinzu gekommen und hat sich weiterentwickelt. Das ist richtig und gut so. Das Tabellenlayout hinter sich zu lassen ist auch gut. Und die Tabelle sollte wieder zu dem Einsatz kommen, in dem sie am besten ist: der strukturierten Darstellung von Daten.

Tabelle reloaded: Der semantisch richtige Aufbau

Der semantisch richtige Aufbau eines HTML-Dokuments hat zwei Vorteile: die Suchmaschinen können den Inhalt besser durchsuchen und bewerten und zum zweiten ist der Inhalt für sehbehinderte Menschen zugänglicher. Für viele ist das zweite Argument nicht so stichhaltig, als dass sie sich mit semantisch korrektem Aufbau eines HTML-Dokuments beschäftigen möchten – es gibt ja schließlich nicht so viel Blinde. Allerdings möchten ganz viele Seitenbetreiber, dass ihre Seite bei Google gut gefunden wird. Beides hängt aber eng miteinander zusammen. Je strukturierter die Seite aufgebaut ist und HTML-Elemente korrekt ausgezeichnet sind, umso besser kann sowohl eine Suchmaschine den Inhalt durchsuchen als auch ein Screenreader für den blinden Nutzer Verständliches ausgeben. Man könnte es als eine Win-Win-Situation für alle beschreiben.

Beginnen wir einfach mal mit der Grundform der Tabelle, die allgemein aus den HTML-Tags <table><tr><td>Inhalt</td></tr></table> besteht. Die einzelnen Zellen können Datenzellen (td) oder, in der ersten Tabellenreihe, auch Zellenköpfe (th) sein.

Der Tabelle ist aber auch ein Element zugeordnet worden, das keinen besonders hohen Bekanntheitsgrad genießt: das Element caption, die Tabellenüberschrift. Diese wird direkt nach dem Eröffnungstag notiert, so dass die Grundtabelle nun so aussieht:

Der HTML-Code:
<table>
<caption>Tabellenüberschrift</caption>
<tr>
<th>erste Kopfzelle</th>
<th>zweite Kopfzelle</th>
</tr>
<tr>
<td>erste Datenzelle</td>
<td>zweite Datenzelle</td>
</tr>
<tr>...</tr>
</table>

Die Tabellenüberschrift ist mit der Tabelle verbunden und bekommt dadurch auch eine inhaltliche Zuordnung. Die Tabellenüberschrift sollte demnach auch eine Übereinstimmung mit den Inhalten haben. Wie im obigen Code bereits zu sehen, können in einer Tabellenreihe die Zellen auch als Kopfzellen (th) ausgezeichnet werden. Ohne weitere Formatierungen werden sie in der Regel fett dargestellt, es kommt ihnen also eine besondere Bedeutung zu. Sie stellen Kategorien zu den Informationen in den unter ihnen folgenden Datenzellen dar. Damit wäre der erste Schritt zu einer logischen Auszeichnung getan.

Ein weiterer Schritt zur Strukturierung einer Tabelle ist die Unterteilung in Kopf (thead), Körper (tbody) und Fuß (tfoot). Gerade bei längeren Tabellen ist diese Aufteilung zu empfehlen, da es dem Browser dann möglich ist, den Tabellenkörper unabhängig von Tabellenkopf und –Fuß zu scrollen. Der Tabellenfuß wird, entgegen der anatomischen Logik, vor dem Tabellenkörper notiert. Der Browser berechnet den Kopf und Fuß bereits bevor die restlichen Daten der Tabelle übermittelt sind. Jeder Tabellenabschnitt (thead, tfoot, tbody) muss mindestens eine Reihe (tr) enthalten und die Anzahl der Zellen sollte gleich sein.

Der HTML-Code:
<table>
<caption>Tabellenüberschrift</caption>
<thead>
<tr>
<th>erste Kopfzelle</th>
<th>zweite Kopfzelle</th>
</tr>
</thead>
<tfoot>
<tr>
<td>erste Fußzelle</td>
<td>zweite Fußzelle</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>erste Datenzelle</td>
<td>zweite Datenzelle</td>
</tr>
<tr>...</tr>
</tbody>
</table>

Dürfen thead und tfoot nur einmal in einer Tabelle definiert werden, so kann tbody mehrmals vorkommen. Je nach Umfang der dargestellten Daten ist der Einsatz mehrerer tbody sogar sinnvoll. Die einzelnen tbody können mit CSS nach Bedarf unterschiedlich formatiert werden.

Feinschliff für die Sprachausgabe

Der Browser interpretiert ein HTML-Dokument von oben nach unten, zeilenweise von links nach rechts. Die Sprachausgabegeräte haben eine eigene Interpretation des HTML-Quelltextes. Probleme mit der Wiedergabe gibt es, wenn HTML-Elemente zweckentfremdet eingesetzt und/oder semantische Konventionen nicht eingehalten werden. Zusätzlich zu dem oben beschriebenen semantischen Aufbau einer Tabelle hält HTML einige Attribute bereit, die für die Sprach- oder Brailleausgabe zugeschnitten sind. Einige dieser Auszeichnungen möchte ich hier kurz vorstellen:

Zum Einen kann eine Zusammenfassung der Tabelle mit dem Attribut summary ausgegeben werden. Dies ist nicht zwingend notwendig, wenn sich der Inhalt der Tabelle aus der Überschrift und den Datenzellen ergibt. Bei komplexeren Tabellen kann eine Zusammenfassung durchaus sinnvoll sein.

Der HTML-Code:
<table summary="Diese Tabelle gibt einen Überblick über das Bevölkerungswachstum deutscher Großstädte von 1990 bis 2010 wieder, mit einer prozentualen Wachstumsrate von 2000 bis 2010.">
<caption>Bevölkerungswachstum deutscher Großstädte</caption>
<tr>
<th>Stadt</th>
<th>Einw. 1990</th>
<th>Einw. 2000</th>
<th>Einw. 2010</th>
<th>Veränderung in % (2000-2010)</th>
</tr>
<tr>...</tr>

Eine einfache Zuordnung von Kopfzelle zu Datenzellen bietet das Attribut scope. Der Wert dieses Attributs ist entweder eine Reihe (row) oder eine Spalte (col). Die Angabe scope=“col“ in der Kopfzelle besagt, dass sich die darunter liegenden Datenzellen spaltenweise auf sie beziehen.

Der HTML-Code:
<table>
<caption>Bevölkerungswachstum deutscher Großstädte</caption>
<tr>
<th scope="col">Stadt</th>
<th scope="col">Einw. 1990</th>
<th scope="col">Einw. 2000</th>
<th scope="col">Einw. 2010</th>
<th scope="col">Veränderung in % (2000-2010)</th>
</tr>
<tr>
<td>Berlin</th>
<td>3.433.695</th>
<td>3.382.169</th>
<td>3.460.725</th>
<td>2,32</th>
</tr>

Einen variableren Bezug zwischen Kopfzelle zu Datenzellen stellt man mit eindeutigen ids her, die mittels headers den Datenzellen zugeordnet werden können. Diese Attribute können auch Datenzellen, die nicht in der gleichen Spalte oder Reihe liegen, einer bestimmten Kopfzelle zugeordnet werden.

Der HTML-Code:
<table>
<caption>Bevölkerungswachstum deutscher Großstädte</caption>
<tr>
<th id="f1">Stadt</th>
<th id="f2">Einw. 1990</th>
<th id="f3">Einw. 2000</th>
<th id="f4">Einw. 2010</th>
<th id="f5">Veränderung in % (2000-2010)</th>
</tr>
<tr>
<td headers="f1">Berlin</th>
<td headers="f2">3.433.695</th>
<td headers="f3">3.382.169</th>
<td headers="f4">3.460.725</th>
<td headers="f5">2,32</th>
</tr>

Zusätzlich kann auch noch eine Kurzfassung zu den einzelnen Daten voran gestellt werden. Dies wird mit dem Attribut abbr (abbr = abbreviated = verkürzt) erreicht. Das Sprachausgabesystem kann diesen Text vor dem eigentlichen Zelleninhalt ausgeben.

Der HTML-Code:
<table>
<caption>Bevölkerungswachstum deutscher Großstädte</caption>
<tr>
<th scope="col">Stadt</th>
<th scope="col">Einw. 1990</th>
<th scope="col">Einw. 2000</th>
<th scope="col">Einw. 2010</th>
<th scope="col" abbr="Zuwachs">Veränderung in % (2000-2010)</th>
</tr>
<tr>
<td>Berlin</th>
<td>3.433.695</th>
<td>3.382.169</th>
<td>3.460.725</th>
<td>2,32</th>
</tr>

Im Leben wie bei der Auszeichnung von Datentabellen für die Sprach- oder Brailleausgabe ist zu beherzigen, dass Mehr nicht mehr hilft. Texte werden per se von den Ausgabegeräten wiedergegeben, insofern sind gleiche Inhalte in speziellen Attributen ziemlich sinnbefreit – auch ein blinder Mensch muss die Information nicht dreimal ans Ohr gedrückt bekommen. Es gilt dort auszuzeichnen, wo ein sehender Mensch sich optisch orientiert, bspw. durch andere Hintergrundfarben, fette Schrift oder Gitterlinien. Wer sich näher mit diesem Thema beschäftigen möchte, findet beim W3C weitere Attribute und deren Erläuterung.

Fazit

Es erfordert nicht viel Aufwand eine Tabelle semantisch korrekt zu strukturieren. Der Mehrwert ist dafür umso größer: Die Suchmaschinen können einen sinnvollen Zusammenhang zwischen Überschrift und Inhalten herstellen und entsprechend indizieren. Der Browser kann eine Tabelle effektiver berechnen und gegebenenfalls schneller darstellen. Bei größeren Tabellen hat der Benutzer es leichter, die Tabelle zu nutzen. Die zusätzlich notwendigen Auszeichnungen für Sprachausgabegeräte halten sich auch in Grenzen, geben aber Sehbehinderten die Möglichkeit einen einfacheren Zugang zu den Inhalten der Tabelle zu finden. Es lohnt sich in mehrfacher Hinsicht umzudenken

Ein Kommentar zu „Die HTML-Tabelle neu entdecken“

  1. michael   31.05.2012, 12:39

    Danke für diese guten Hinweise