Für die Entwicklung von Webseiten spielen Tabellen keine bedeutende Rolle mehr - CSS, Frames und Layer haben sie abgelöst. Für Daten eignet sich die Tabellenform aber noch immer. Sie sollten allerdings barrierefrei und korrekt nach HTML 4 aufbereitet werden.
Jeder Webentwickler hat inzwischen wohl verinnerlicht, dass Tabellen für das Seitenlayout verpönt sind. Manche schießen allerdings über das Ziel hinaus und verzichten völlig auf den Einsatz von Tabellen. Der ursprüngliche Zweck von HTML-Tabellen war die Darstellung von Daten in Tabellenform. In diesem Artikel geht es daher noch einmal um die Grundlagen und die vielen Features, die das HTML-Element <table> mit sich bringt.
Daten organisieren
Die grundlegende Syntax von HTML-Tabellen ist für Entwickler sicher nichts neues, aber einige sehr nützliche Features geraten oft in Vergessenheit. Das folgende Code-Listing zeigt eine einfache Tabelle mit einer Kopfzeile sowie Daten in jeder Tabellenzelle.
Die Beispieltabelle weist neben dem Basiselement <table> drei Zeilen (<tr>-Element) mit jeweils zwei Zellen auf. Die erste Zeile verwendet Header-Elemente (<th>) für die Zellen der Kopfzeile.
Obwohl dieses erste Beispiel die Standardelemente einer Tabelle enthält, gibt es noch viele weitere Elemente, die man verwenden kann. Das <caption>-Element kann zum Beispiel für eine Kurzbeschreibung der Tabelle verwendet werden. Standardmäßig stellen die meisten Browser es zentriert oberhalb der Tabelle dar. 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. Wenn sie es eilig haben, vergessen Webentwickler manchmal, das Thema Barrierefreiheit zu berücksichtigen. Doch die Zahl der Menschen, die keine Standardbrowser verwenden, sondern zum Beispiel Bildschirmlesegeräte für Sehbehinderte, nimmt zu. HTML-Tabellen bieten unterschiedliche Möglichkeiten, mit solchen Benutzern zu interagieren - das summary-Attribut des <table>-Elements ist nur ein Beispiel hierfür.
Bildschirmlesegeräte bieten die Möglichkeit, Kopfzeilen von Datenzellen auf einer Seite besonders hervorzuheben. Aber diese Kopfzeilen können manchmal recht lang sein. Für solche Situationen ist es ratsam, das abbr-Attribut des <td>-Elements verwenden, um dem Benutzer eine gekürzte Version der Kopfzeile zu bieten.
Das scope-Attribut gibt an, ob eine Header-Zelle Informationen zu einer Spalte oder Zeile bietet. Es kann die Werte col oder row annehmen: col bedeutet, dass die Header-Informationen für die zugehörige Spalte gelten, row weist die Informationen der entsprechenden Zeile zu. Dies ist nützlich, wenn es in einer Tabelle Header sowohl für Spalten als auch für Zeilen gibt. Das scope-Attribut ermöglicht Bildschirmlesegeräten die korrekte Zuordnung von Headern und Zellen.
Eine weitere Technik, um Zellen bestimmten Headern zuzuordnen, ist die Verwendung des header-Attributs. Dabei weist man zuerst jedem Header eine eindeutige ID zu. Als Nächstes wird dann jede Zelle um ein header-Attribut ergänzt. Dieses Attribut enthält eine durch Leerzeichen getrennte Liste der IDs aller Header-Zellen, die sich auf diese Zelle beziehen.
Der Beispielcode wird um diese Attribute erweitert, um auch Nicht-Standardbrowser zu unterstützen. Außerdem gibt es jetzt einen Rahmen für die Tabelle, und es wurden Werte für cellspacing und cellpadding angegeben.
Viele Optionen
Die Verwendung von HTML-Tabellen für das Seitenlayout ist zwar verpönt (obwohl immer noch von Entwicklern eingesetzt), aber zur Präsentation von Daten in Tabellenform sind sie durchaus zulässig. Einen umfassenden Überblick über die Optionen zur Tabellenformatierung erhält man in der Onlineversion des HTML-Standards[1].
URLs in diesem Artikel:
[1] = http:/