Teil 2: Workshop: Komplexe Tabellen mit CSS gestalten

Der betreffende Quelltext sieht dann etwa so aus:

Die Zelle innerhalb des <tfoot>-Elements erstreckt sich im Beispiel über alle drei Spalten. Dieser Effekt wird durch das Attribut colspan des <td>-Elements erzielt. Analog kann mit dem Attribut rowspan des <tr>-Elements erreicht werden, dass sich eine Zelle über mehrere Zeilen erstreckt.

Das Basiselement <table> verfügt über eine Reihe nützlicher Attribute. Dazu zählen:

• summary erlaubt es, eine unsichtbare Zusammenfassung der Tabelle einzutragen, die sowohl Suchmaschinen als auch Bildschirmlese-Software nutzen können; • align: Ausrichtung der Tabelle in Bezug zum Dokument (Attribut ist veraltet) • width: Tabellenbreite (in Pixeln) • border: Breite (in Pixeln) des Rahmens um die Tabelle • cellspacing: Platz zwischen angrenzenden Zellen sowie zwischen der jeweiligen Seite der Tabelle und der Seite der angrenzenden Zelle • cellpadding: Abstand des Textes zum Rand der Zelle; es sind sowohl Pixel- als auch Prozentwerte zulässig. Pixelwerte gelten generell für alle vier Seiten; im Falle einer Prozentangabe wird der Platz sowohl horizontal als auch vertikal gemäß der Prozenteverteilung aufgeteilt.

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

Das id-Attribut erlaubt es, Elementen einer Tabelle eindeutige Namen zuzuweisen, was immer dann hilfreich ist, wenn Sie im Quelltext explizit auf ein Element zugreifen wollen.

Der Einsatz von CSS zur visuellen Gestaltung von Tabellen hat aber auch noch einen anderen entscheidenden Vorteil: Er erlaubt das Einbinden von Interaktivität mittels Javascript. Im WebPro-Blog finden Sie dazu das Beispiel einer Tabelle, die die Bewegung der Maus anhand CSS-Klassen mittels Javascript mitverfolgt und die aktiven Zellen visuell hervorhebt.

Box-Modell visualisieren

Beim Einsatz von CSS- und HTML-Elementen kann man viele Schwierigkeiten vermeiden, wenn man sich ein Box-Modell visualisiert.

Es bedeutet, dass für alle Elemente im Dokumentbaum in CSS rechteckige Kästen erzeugt werden. Jeder Kasten besitzt einen Inhaltsbereich sowie optional um diesen herum angeordnete Auffüllungen, Rahmen und Außenbegrenzungen.

Halten Sie Kopfzeilen kurz, aber zum Thema. Sollten sich lange Kopfzeilen nicht vermeiden lassen, kann man dank des abbr-Attributs des <td>-Elements dem Anwender eine Kurzfassung der Kopfzeile bieten.

Mittels des scope-Attributs geben Sie an, ob eine Header-Zelle Informationen zu einer Zeile (row) oder Spalte (col) anbietet. Zulässige Werte sind hierbei nur col oder row.

Ersteres bedeutet, dass die Header-Informationen für die zugehörige Spalte gelten; Letzteres weist die Informationen der entsprechenden Zeile zu. Dies ist recht praktisch, insbesondere wenn es in einer Tabelle Header sowohl für Spalten als auch für Zeilen gibt.

Das scope-Attribut erlaubt insbesondere Bildschirmlesegeräten die richtige Zuordnung von Headern und Zellen.