Strict verstehen, Teil 6: Tabellen strukturell voll ausnutzen
Tabellen? Wo man doch immer von tabellenlosen Designs spricht? Natürlich, denn für tabellarische Daten soll man sie selbstverständlich noch verwenden! ;)
Dennoch sind Tabellen das Unzugänglichkeitselement Nummer Eins. Das wird sich vermutlich erst ändern, wenn Autoren begreifen, dass Tabellen mehr sind als eine Anhäufung von <table>, <tr> und <td>.
Tabellen strukturell voll ausnutzen
Jede Tabelle beginnt mit dem einleitenden <table> Tag. Das einzig nenenswerte Attribut in diesem Element hört auf den namen summary.
Das summary-Attribut kann ein bis zwei Sätze enthalten, die bei einer möglichen Sprachausgabe Sinn und Zweck der Tabelle kurz wiedergeben.
Das meist verwendete Attribut in diesem Element ist jedoch border, zusammen mit dem Wert 0. Das ist sehr unsinnig, denn der Standardwert dieses Attributs ist bereits 0, da die Formatierung der Tabelle eigentlich Sache von Stilangaben ist.
Vor dem tatsächlichen Inhalt der Tabelle ist noch vieles möglich
Die Tabellenüberschrift
Über das Element <caption> kann eine Überschrift für die Tabelle bestimmt werden. Diese Überschrift hat strukturell einen ähnlichen Wert wie die Überschriftenelemente.
Beispiel:
HTML-Code:
<table>
<caption>Jahresbericht 2006</caption>
[...]
</table>
Grundstruktur der Spalten
Achtung, ich gebe freiwillig einen Hinweis für Tabellenlayouts, das will was bedeuten! ;)
Aber vor allem wenn eine Tabelle viele Daten enthält kann es sinnvoll sein, die Grundstruktur der Spalten bereits im Voraus zu definieren. Ein Browser kann sich dann an den gemachten Angaben orientieren und zeigt die gesamte Seite unter Umständen schneller an.
Zunächst muss eine Spaltengruppe erstellt werden, das geschieht durch die Verwendung von einer oder mehreren <colgroup> Elementen. Allein bezieht sich dieses Element auf alle Spalten der Tabelle. Es kann jedoch das Attribut span enthalten, wodurch sich das Element nur auf die x-ten Spalten nach einer möglichen vorherigen Gruppe bezieht.
Beispiel:
HTML-Code:
<!-- Angenommen die Tabelle hat insgesamt 6 Spalten. -->
<table>
<caption>Jahresbericht 2006</caption>
<colgroup span="2"></colgroup><colgroup span="4"></colgroup>
[...]
</table>
Die erste Gruppe bezieht sich auf die ersten beiden Spalten, die zweite auf die letzten vier.
Innerhalb dieser Gruppen können die die einzelnen Spalten dieser Gruppe spezialisiert über das <col /> Element angesprochen werden.
Alleinstehend gilt das <col /> Element für eine einzelne Spalte, es kann jedoch auch das span-Attribut enthalten, wodurch sich Formate, die für das Element bestimmt wurden, sich auf weitere Spalten ebenfalls auswirken.
Beispiel:
HTML-Code:
<!-- Angenommen die Tabelle hat insgesamt 6 Spalten. -->
<table>
<caption>Jahresbericht 2006</caption>
<colgroup><col /><col span="4" /><col /></colgroup>
<!-- Hier ausnahmsweise die XHTML-Schreibweise. In HTML genügt <col> als ungeschlossenes Element. -->
[...]
</table>
Die erste und die letzte Spalte könnten hier mit identischen Formatierungen belegt werden. Für die vier Spalten in der Mitte könnten dagegen ganz andere Formatierunen gesetzt werden.
Der eigentliche Inhalt der Tabelle
Um eine Tabellenzeile zu erstellen verwendet man das <tr> Element (table-row), in ihm können beliebig viele <td> (Tabellendaten) und <th>Elemente vorkommen. Letzteres steht für Tabellenüberschrift und ist je nach Verwendung Überschrift für Spalte oder Zeile der Tabelle.
Ist kein <colgroup> Element vorhanden gibt der Inhalt des ersten <tr> Elements die Anzahl der Spalten der Tabelle an.
Beispiel:
HTML-Code:
<!-- Angenommen die Tabelle hat insgesamt 6 Spalten. -->
<table>
<caption>Jahresbericht 2006</caption>
<colgroup><col /><col span="4" /><col /></colgroup>
<tr><th>Monat / Anteil</th><th>Internet Explorer</th><th>Firefox</th><th>Opera</th><th>Konqueror / Safari</th></tr>
<tr><th>Januar</th><td>25%</td><td>25%</td><td>25%</td><td>25%</td></tr>
[...]
</table>
Wie man sehr schön sieht kann <th> sowohl als Überschrift für eine Zeile als auch als Überschrift für eine Spalte verwendet werden.
Sehr problematisch ist der Inhalt der Tabellen. <th> und <td> sind weder Blockelemente noch Inlineelemente, sondern ganz banal Tabellenzellen. Je nach Inhalt kann es für Textbrowser, die der Besucher visuell verwendet Vorteile und Nachteile haben, den Inhalt von <td> zusätzlich innerhalb von Blockelementen zu strukturieren.
Besondere Attribute für <td> und <th>
Für td- und th-Elemente gibt es drei Attribute, die vor allem in Verbindung mit einer möglichen Sprachausgabe stehen. abbr, axis und headers. Von diesen sind allerdings nur die letzten beiden wirklich interessant. Das abbr-Attribut führt eher zu Redundanz, anstatt dass es helfen würde.
Die anderen Elemente verbinden den Inhalt verschiedener Zellen miteinander, allerdings ist das Grundliegende Konzept dafür etwas zu komplex, um es hier zu behandeln.
Gruppierungen des Tabelleninhalts
Tabellenzeilen können strukturell in drei oder mehr Gruppen geteilt werden. Einen Tabellenkopf (<thead>), einen Tabellenfuß (<tfoot>) und einen oder mehrere Tabellenkörper (<tbody>). Die Elemente, die in dieser Reihenfolge im Quelltext notiert werden müssen, gruppieren eine oder mehrere Tabellenzeilen (<tr />).
Der Vorteil dieser Elemente liegt nicht sofort auf der Hand. Zeilen, die mit diesen Elementen gruppiert wurden können gemeinsam Stilangaben zugewiesen bekommen. Sie können ihren Nutzen aber vor allem in der Druckausgabe von Tabellen sinnvoll sein.
Ist eine Tabelle zu groß, so dass sie nicht auf einer Seite gedruckt werden kann, dann erhält die Druckausgabe auf jeder Seite Tabellenkopf und -fuß angehängt, was eine erhebliche Arbeitserleichterung für den Besucher darstellt.
Durch mehrere <tbody>Elemente können Bereiche der Tabelle sinnvoll gegliedert werden. Mit CSS und möglicherweise JavaScript liesen sich diese Bereiche noch um Funktionalität erweitern.
