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:
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:
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:
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:
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.
Mal wieder ein wunderbarer Artikel, vielen Dank.
Eine Frage habe ich aber noch: Da ich vorher noch nie etwas vom <col /> Element gehört habe, frage ich mich, ob sich damit dann mit CSS einfach Formatierungen auf alle Zellen einer Tabellenspalte oder wenigstens die Tabellenspalte selbst anwenden lassen (der einzige mir bisher bekannte Weg ist allen Zellen dieser Spalte die gleiche class zu geben).
Ja, es ist möglich, <col /> Formatierungen zu geben, die dann für alle Zellen dieser Spalte gültig sind. Jedoch gilt das nicht für alle Eigenschaften, sondern nur für border, background, width und visibility.
Das hat damit zu tun, dass Zellen nur Kinder von Zeilen, aber nicht Spalten sein können.
border funktioniert nur, wenn die Tabelle die Eigenschaft border-collapse:collapse; besitzt (Der Rahmen umfasst dann die Spalte[n], erzeugt aber kein horizontales Gitternetz). background funktioniert nur, wenn Zeile und Zelle transparent sind, da Spalten im Formatierungsmodell fast ganz hinten stehen. visibility kennt nur visible (Standardwert) und collapse. Bei letzterem bin ich mir aber nicht sicher, wer (ob überhaupt) das richtig implementiert hat.
Zitieren
