Markup Webdesign Journal

Die Links zu den Vorgängern:

• Teil 1: Überschriften
• Teil 2: Textabsätze
• Teil 3: Listen

Die gute Nachricht vorweg: Tabellen dürfen weiter verwendet werden ;) Doch immer wieder liest man in Foren Fragen wie diese: “Darf ich weiter Tabellen verwenden, oder muss ich das alles mit CSS machen? Abgesehen davon, dass das Aussehen von Tabellen natürlich mit CSS gestaltet wird, werden Tabellen nachwievor gebraucht. Es wird sogar ausdrücklich um ihren Einsatz gebeten! Sie sollen allerdings nur eingesetzt werden für Dinge, für die sie gedacht sind. Für tabellarische Daten. Auch hier wieder der Hinweis, dass es sich nicht um ein Tutorial zur Erstellung von Tabellen handeln soll. Es geht darum, wo Tabellen eingesetzt werden und auf welche strukturellen und semantischen Dinge zu achten ist.

Alle verfügbaren Elemente nutzen

Tabellen haben mehr zu bieten, als viele vielleicht wissen. Es gibt nicht nur die den meisten bekannten Elemente <table>, <th>, <tr> und <td>. Für Tabellen werden noch andere Elemente mitgeliefert von denen, je komplexer oder umfangreicher der Datenbestand ist, auch unbedingt Gebrauch gemacht werden sollte. Sie helfen dabei, dem ganzen einen Sinn zu geben und Besuchern dabei, sich zurecht zu finden.

Tabellen werden für tabellarische Daten eingesetzt. Beispiele sind diverse Tabellen verschiedener Sportarten oder erfasste Daten zu einer statistischen Erhebung. Nicht-tabellarische Daten sind Kochrezepte, Links in Navigationsmenüs etc.

<caption>

Das caption-Element beschreibt die Tabelle, besser gesagt gibt ihr einen Titel, ist aber kein Muss. Es dient as zusätzliche Information für den Leser. Besser geeignet, vor allem für längere Beschreibungen, ist das summary-Element, das im nächsten Abschnitt beschrieben wird. Vor allem dann, wenn es darum geht, Sehbehinderten Benutzern zusätzliche Informationen zu bieten.

<table summary=”…”>

Die Zusammenfassung (summary) bietet vor allem Sehbehinderten oder gar Blinden Menschen Informationen - quasi eine Zusammenfassung - zur Tabelle. Sehenden erschließt sich die Tabelle durch ihren Aufbau, den ein Blinder allerdings nicht auf einen “Blick” erfassen kann. Wichtig ist das summary-Attribut, wenn kein caption-Element eingesetzt wird. Sprachbrowser lesen die Beschreibung vor und erklären den Tabellenaufbau, zur besseren Orientierung, vor allem bei sehr umfangreichen Tabellen.

<thead>, <tfoot>, <tbody>

Diese Reihenfolge ist zu beachten, wenn man diese drei Elemente einsetzt.

<thead> leitet den Kopfbereich einer Tabelle ein. In diesem befinden sich dann eine oder mehrere Reihen, wobei die erste die Überschriften (<th>) beinhaltet. In einer weiteren Zeile könnten sich dann beispielsweise noch Grafiken u.ä. befinden.

<tfoot> beinhaltet eine Fußnote. Sie kann etwa für Quellenangaben, Links etc. verwendet werden.

<tbody> ist der Tabellenrumpf. Hier befinden sich dann die eigentlichen Daten der Tabelle.

Eine Tabelle, die alle zur Verfügung stehenden Elemente nutzt, könnte dann so aussehen:


<table summary=”Die folgende Tabellen enthält Daten,
die keinen Sinn ergeben. Sie dienen nur dazu die Beispieltabelle
zur Demonstration zu füllen.”
style=”border: 1px solid #c0c0c0;”>
<caption style=”text-align: left; margin: 0.5em 0;”>Beispieltabelle
(<caption>)
</caption>
<thead>
<tr style=”background: #ececec;”>
<th>Überschrift 1</th>
<th>Überschrift 2</th>
<th>Überschrift 3</th>
<th>Überschrift 4</th>
</tr>
<tr style=”background: #dcdcdc;”>
<td>Grafik 1</td>
<td>Grafik 2</td>
<td>Grafik 3</td>
<td>Grafik 4</td>
</tr>
</thead>
<tfoot>
<tr style=”background: #ececec;”>
<td>URL 1</td>
<td>URL 2</td>
<td>URL 3</td>
<td>URL 4</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Daten 1</td>
<td>Daten 2</td>
<td>Daten 3</td>
<td>Daten 4</td>
</tr>
<tr>
<td>Daten 1 2</td>
<td>Daten 2 2</td>
<td>Daten 3 2</td>
<td>Daten 4 2</td>
</tr>
</tbody>
</table>


Es ist auch möglich, bei sehr langen Tabellen für den <tbody> in CSS eine feste Höhe anzugeben und der Eigenschaft overflow den Wert scroll zuzuweisen. So ist es möglich, die Tabelle zu scrollen, wobei der Tabellenkopf und der Tabellenfooter (Fußnote) fix bleiben und man so immer die Spaltenüberschriften sehen kann. Aber das kann wiederum leider nur der Firefox. Opera und IE nicht, soweit ich das bisher testen konnte. Auf Mac- oder Linux-Systemen mit Safari, Konqueror u.a. konnte ich leider nicht testen.

Aber eine gute Idee wäre nur halb so gut ohne einen Hack, falls nicht alle Browser alles können sollten. Es gibt eine Lösung, die allerdings etwas Javascript braucht. Hier zu finden. Wobei es dabei leider die Einschränkung gibt, dass es dann nur die neuesten Browsermodelle reibungslos hinbekommen.

Fazit

Für eine kleine Tabelle mit wenigen Spalten und Zeilen müssen nicht alle Elemente verwendet werden. Aber je umfangreicher die Tabelle wird, desto mehr profitieren alle Benutzer vom richtigen Einsatz der verschiedenen Bestandteile. Das Ergebnis ist mehr Übersicht und eine bessere Orientierung, vor allem auch für Menschen mit Sehbehinderungen.

Wer das ganze noch detailierter braucht kann es hier in der XHTML-Spezifikation nachlesen im Kapitel “Tables Module”.

Ende

Mit diesem Teil schließt die Serie “Sinnhafte Websites”. Es ging darum, die wichtigsten Elemente zu nennen und zu zeigen wann sie wie eingesetzt werden - und vor allem dass sie eingesetzt werden. Zusätzlich empfehle ich die Serie “Block vs. Inline”, die ich mit Erlaubnis von Tommy Olsson ins Deutsche übersetzt habe. Sie zeigt zusätzlich die Behandlung von Bereichen (DIV) und hilft dabei, das dimensionale Verhalten von Websites besser zu verstehen.

Zum Abschluss noch ein interessanter Link zu Molly Holzschlags Artikel “Integrated Web Design: The Meaning of Semantics (Take I)” bei Inform IT.