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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…