Webstandard & Webdesign - CSS, HTML

 

Der Einsatz von Tabellen in Webseiten

Das Tabellen nicht zum Layouten genutzt werden sollten, sollte mittlerweile den meisten Webentwicklern und -designern bekannt sein. Struktur (HTML), Content und Layout ( CSS ) strikt zu trennen, ist das Thema zahlreicher Webseiten und Weblogs. Sie haben es sich auf die Fahne geschrieben, die Vorteile und den Nutzen von Webstandard bekannter zu machen. Trotzdem werden immer noch häufig fahrlässige Fehler im Umgang mit Webstandards begangen. Einer davon ist der falsche Einsatz einer Tabelle zur Darstellung von tabellarischen Daten. Dieser kleine Artikel soll Interessierten daher ein paar Infos und Beispiele mit an die Hand geben, wie dies einfach und unkompliziert umgesetzt werden kann. Spezialisten setzen Tabellen sogar mittels Divs oder Listen durch. Meiner Meinung nach sollte man nicht nur daran denken, wie etwas zu realisieren ist, sondern vorallem ob dies auch einen Sinn ergibt. Tabellen sind richtig eingesetzt, die optimale Lösung. Um eben dies ein wenig zu erläutern, habe ich diesen kleinen Artikel verfasst, da leider selbst Profis oft nicht in der Lage sind, dies richtig umzusetzen.

Als erstes sollte man sich immer vorher ein paar Gedanken machen ( wie bei der Umsetzung eines Layouts ), welche Informationen man bspw. aus einer Datenbank tabellarisch darstellen möchte. Denn es passiert schnell, dass nach dem erstellen des Grundgerüstes, weitere Spalten oder Reihen hinzukommen und manchmal die ganze Struktur durcheinander werfen. Der Umbau kann bei grossen Tabellen aufwändig werden ;o) Eine übersichtliche und so einfach wie mögliche Struktur ist von Vorteil, denn Tabellen werden erst dann im Browser angezeigt, wenn die letzte Zelle geladen wurde. Bei unübersichtlichen Verschachtelungen kann dies durchaus ein deutlicher Nachteil sein.

Aufbau eine Tabelle mittels bekannter Elemente

Die häufigsten Elemente die bei der Realisierung von Tabellen zum Einsatz kommen, sind table, tr ( table row ) und td ( table data ). Weitere Elemente die zur optimalen Auszeichnung einer Tabelle beitragen sind th ( table header ), tbody ( table body), tfoot ( table foot ). Die Elemente thead und tfoot dürfen pro Tabelle nur einmal angegeben werden, das Element tbody einmalig oder beliebig oft. Somit sind die Zellen in der ersten Reihe als Tabellenheader auch vom Quellcode her zu erkennen, ebenso der Body und der Footer. Über Styles können so die unterschiedlichen Bereiche definiert werden, ohne das bspw. für die Elemente unterschiedliche Styleklassen definiert werden müssen.

Tabellenelemente die (zu) selten zum Einsatz kommen

Zwei weitere weniger bekannte, aber nicht weniger nützliche Elemente sind caption und summary. Caption wird oberhalb der Tabelle, zur Verdeutlichung, definiert werden. Muss aber innerhalb des Quellcodes ( siehe Codebeispiel ) nach dem öffnenden table Tag kommen. Oft wird an dieser Stelle ein h1-h6 definiert, ein caption-Tag wäre hier von Vorteil, da er sich direkt auf die Tabelle bezieht. Der Summary Tag hingegen, wird innerhalb des öffnenden table Tags definiert. Sehenden Usern erschliesst sich der Inhalt der Tabelle durch ihren Aufbau. Einem Blinden ist dies nicht möglich. Da sie aber ebenso wie sehenden im Netz schnell und unkompliziert an Ihre Informationen kommen wollen, beschreibt dieser Tag mittels einer Zusammenfassung die Inhalte der Tabelle, so das sie mittels Braillezeile und Sprachausgabe ausgegeben werden. Dann kann der User die Tabelle überspringen, falls ihn der Inhalt nicht interessiert und muss sich so nicht die ganze Tabelle oder Teile dieser vorlesen lassen. Dem sehenden werden die Angaben im Browser nicht angezeigt.

Code-Beispiel
<table summary="Tabellenbeispiel für den Colgroupeinsatz">

<colgroup>
<col width="20%" span="2" />
<col width="15%" />
</colgroup>

<caption>
Diese Tabelle wird mit Spaltengruppen und ihren Attributen erzeugt.
</caption>

<thead>
<tr>
<th>Produktname</th>
<th>Herstellerfirma</th>
<th>Preis</th>
</tr>
</thead>

<tfoot>
<tr>
<td colspan="2">
Gesamtpreis aller georderten Produkte:
</td>
<td id="totalAmount">Summe x</td>
</tr>
</tfoot>

<tbody>

<tr>
<td>Produktname 1</td>
<td>Herstellerfirma 1</td>
<td>Preis 1</td>
</tr>

<tr>
<td>Produktname 2</td>
<td>Herstellerfirma 2</td>
<td>Preis 2</td>
</tr>

<tr>
<td>Produktname 3</td>
<td>Herstellerfirma 3</td>
<td>Preis 3</td>
</tr>

</tbody>

</table>


Ein weiteres Element ( wie in dem kleinen Tabellenbeispiel unten zu erkennen ), welches noch seltener zum Einsatz kommt und ein bescheidenes Dasein fristet, ist colgroup. Seit HTML 4.0 wird eine Syntax angeboten, die es dem Browser ermöglicht gleich zu Beginn der Tabelle mitzuteilen, wieviel Spalten und welche Definitionen ( siehe Tabellenbeispiel ) diese besitzten. Dadurch können bereits Bereiche einer Tabelle angezeigt werden, bevor die gesamte Tabelle geladen ist. Attribute wie width, span, scope oder axis ermöglichen mehrere col Tags zu einer weiteren Gruppe zusammenzufassen und Ihnen eine bestimmte Breite der Spalte zuweisen. Bei grossen umfangreichen Tabellen ist der Einsatz solcher Attribute daher von Vorteil, um eine Beziehung zu den einzelnen Zellen der Tabelle zu erzeugen. Leider unterstützen nicht sämtliche Browser ( vor allem die älteren ) diese Definitionen ausnahmslos, was wohl noch zu dem geringen Einsatz dieses Tags führt.

Die Angaben der Elemente thead, tfoot, tbody, summary und colgroup sind allesamt freiwillig und für eine Definition einer Tabelle nicht nötig, sie erleichtern dem User bzw. der vom User genutzten Software, die Erkennung der Daten. Dieser kann somit schneller entscheiden, ob die Daten für Ihn nützlich sind oder nicht. Um mehrere Daten darzustellen oder miteinander zu vergleichen wie in dem obigen Beispiel, sind ideales Terrain für Tabellen. Sie können alle möglichen Informationen vergleichbar aufbereiten und bieten daher auch aus Accessibility-Sicht einen grossen und nicht vergleichbaren Mehrwert. Weitere Informationen zum korrekten Einsatz von Tabellen findet ihr innerhalb der Barrierefreien Informationstechnik-Verordnung BITV.

Ebenso wie die Webstandards CSS und (X)HTML eine saubere Struktur benötigen, bedarf es auch bei Tabellen einer gewissen Ordnung, damit die dargestellten Daten in dem richtigen Zusammenhang, so schnell wie möglich verstanden werden können. Ich hoffe dieser knappe Artikel trägt zumindest ein wenig dazu bei, die erwähnten Elemente und Attribute ein wenig öfter zum Einsatz kommen zu lassen, damit auch alle die Daten so bekommen, wie sie sie benötigen.

Update 28.12.05: Der Einwurf von Simon zeigt, das leider immer noch nicht deutlich ist, wann Tabellen eingesetzt werden sollen und wann nicht. Eine Tabelle mit nur einer Spalte macht nicht wirkich Sinn, denn was will man damit darstellen?

Beispiel für den Einsatz einer Tabelle

Vom Sinn her ist dies eher eine Aufzählung und kann deshalb als Liste dargestellt werden. Sobald einem Objekt ein Spalte mit einem Attribute hinzugefügt wird, bspw. einem Produkt aus dem Supermarkt einen Preis, erfüllt es den Sinn einer Tabelle. Der Ausbau der einzelnenen Ebenen ( Produtke, Preise, Abteilung, abgelaufenes Datum, Lieferant etc. ) erfüllt den Tatbestand einer Tablelle erst Recht und kann als solche umgesetzt werden.

Beispiel für keinen Einsatz einer Tabelle

Ein Kochrezept mit Zutaten und ihrer jeweiligen Mengenangabe hingegen würde ich als eine Liste dastellen, da die Mengenangabe separat für sich keine Vergleichswert mit den anderen Mengenangaben bietet. Das eine entspricht einer Stückzahl, das andere Teelöffel oder Grammangaben etc. Diese gehören für mich direkt hinter die jeweilige Zutat und deshalb nicht in eine Tabelle wo sie einen Vergleichswert, wie Beispielesweise Stück für die Supermarktprodukte, darstellen. Navigationen, Listen, Textblöcke und was es noch allen gibt ( weitere Missbrauchsvarianten von Tabellen bitte kommentieren ) sollten, wenn sie sich dem Webstandard verpflichtet fühlen, nicht mittels Tabellen umgesetzt werden.

Zum Abschluss wünsche ich noch allen eine erfolgreiche letzte Woche und einen guten Rutsch ins neue Jahr 2006, in dem die Webstandards hoffentlich noch ein wenig mehr Einzug in die deutschen Webseitenlandschaft halten werden ;o)

Update: 04.01.06
Einfache ein- oder zweispaltige und nicht verschachtelte Layouttabellen sind stellen seitens der Barrierefreiheit kein Problem dar, da diese auch von alternativen Ausgabemedien linearisiert dargestellt werden können, wie von Peter (siehe Kommentar) richtig beschrieben. Nachteil hier ist, das durch den Einsatz von Tabellen Probleme in anderen Ausgabemedien, wie mobilen Endgeräten entstehen können. Zu Zwecken der genauen Definition, von Zugänglichkeitsrichtlinien in Sachen Tabellen, hier noch ein paar Links.

• Einfach für alle: BITV - Tabellen
• Bedingungen der BITV der Anforderung 5 (Tabellen)
• W3C Zugänglichkeitsrichtlinien für Web-Inhalte 1.0