HTML-Tabellen korrekt und barrierefrei aufbauen

Drei Elemente ermöglichen es, unterschiedliche Bereiche einer Tabelle anzugeben: <thead>, <tbody> und <tfoot>. Man kann diese Elemente verwenden, um Gruppen von Zeilen innerhalb der Tabellenstruktur als Kopfbereich der Tabelle festzulegen. (Dabei muss das <thead>-Element vor allen <tbody>-Abschnitten auftreten.) <tbody> definiert den Hauptteil (Body) der Tabelle und <tfoot> den Fußbereich. Falls diese Elemente verwendet werden, muss jedes mindestens eine Zeile enthalten. Das Starttag <tbody> ist immer erforderlich, außer wenn die Tabelle nur einen Tabellen-Body und weder Kopf- noch Fußbereich enthält. Der folgende Code zeigt, wie das obige Beispiel mit diesen Elementen umgeschrieben werden kann.

Wie zu sehen, erstreckt sich die Zelle innerhalb des <tfoot>-Elements über zwei Spalten, was mithilfe des Attributs colspan des <td>-Elements erreicht wird. Mit dem Attribut rowspan des <tr>-Elements wird erreicht, dass sich eine Zelle über mehrere Zeilen erstreckt. Apropos Attribute: Das Basiselement <table> verfügt über eine Reihe von nützlichen Attributen. In der folgenden Liste sind einige davon aufgeführt:

• summary: Bietet eine Zusammenfassung über Zweck und Struktur der Tabelle für nicht-grafikbasierte Browser, zum Beispiel Sprachausgabe oder Braille-Schrift.
• align: Veraltet seit HTML 4. Der Zweck war die Ausrichtung der Tabelle in Bezug auf das Dokument (left, center, right).
• width: Gibt die gewünschte Breite der gesamten Tabelle an.
• border: Gibt die Breite (in Pixeln) des Rahmens um die Tabelle an.
• cellspacing: Gibt an, wie viel Platz der Browser zwischen der jeweiligen Seite der Tabelle und der entsprechenden Seite der angrenzenden Zelle lassen soll. Das Attribut gibt auch den Platz zwischen den einzelnen Zellen an.
• cellpadding: Gibt an, wie viel Platz zwischen dem Rand einer Zelle und ihrem Inhalt bleiben soll. Falls der Wert dieses Attributs ein Pixelwert ist, gilt dieser für alle vier Seiten. Falls der Wert des Attributs eine Prozentangabe ist, wird der zur Verfügung stehende Platz auf gegenüberliegenden Seiten entsprechend diesem Prozentwert gleichmäßig aufgeteilt. Dies gilt gleichermaßen vertikal wie horizontal.

CSS ist eine Alternative zur Verwendung der Attribute align, width, border, cellspacing und cellpadding.

Ein Attribut, das hier nicht aufgeführt wurde, sollte nicht unerwähnt bleiben: das id-Attribut. Mit ihm können einzelnen Elementen eindeutige Namen zugewiesen werden, was recht nützlich ist, wenn per Programmcode auf Elemente zugegriffen wird. Darüber hinaus gibt es neben dem summary-Attribut noch weitere Features, die für Barrierefreiheit sorgen.