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.

© 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.

© 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 lesen

Chronologische Liste und Netflix-Links -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Webdesign

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.
Facebook

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?
Online-Recht

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.
Online-Recht in der Cloud

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…
E-Commerce-Logistik

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.