Tabellen standardkonform für Layouts nutzen

Teil 2: Workshop: Komplexe Tabellen mit CSS gestalten

Der betreffende Quelltext sieht dann etwa so aus:

<table summary="Tabelle 1 beinhaltet
eine Übersicht der Mitarbeiterzahlendeutscher DAX-Unternehmen."><caption>Tabelle 1: Übersicht der
Mitarbeiterzahlen</caption><thead><tr><th>Firma</th><th>Mitarbeiter</th></tr></thead><tbody><tr><td>XYZ AG</td><td>50000</td></tr><tr><td>ABC AG</td><td>2500</td></tr></tbody><tfoot><tr><th colspan="3">
Mitarbeiter gesamt: 52500</th></tfoot></table>

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.

CSS-Praxis

© Archiv

Setzt man die Eigenschaft border-collapse auf den Wert collapse, kleben die Zellen aneinander.

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.

CSS-Praxis

© Archiv

Eine mittels CSS formatierte Tabelle mit der noch experimentellen Eigenschaft border-radius (abgerundete Ecken).

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.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".