Tabellen-Design mit CSS
Rahmen & Linien

DeveloperIT-ProjekteSoftware

Für das Design von Tabellen bietet CSS eine ganze Reihe interessanter Varianten. Der Workshop zeigt, wie Sie diese optimal einsetzen können.

Ärgernis: Browser

Tabellen-Design mit CSS

Dass man mit CSS Objekte optimal auf der Webseite positionieren kann, weiß fast jeder, der sich damit ein wenig beschäftigt hat. Dass man mit CSS aber auch Tabellen hervorragend gestalten kann, ist nur den wenigsten bekannt.

So viel sei vorweg gesagt: Auch wenn sich mit CSS gute Möglichkeiten für die Formatierung von Tabellen ergeben, besteht leider nach wie vor der ewige Ärger mit verschiedenen Browsern. Wirklich gut sehen CSS-formatierte Tabellen daher eigentlich nur im Firefox aus.


Rahmen gestalten

Tabellen-Design mit CSS

Wer mit CSS Tabellen gestaltet, definiert im Grunde nur zwei Dinge: das Aussehen der Rahmen und die Hintergrundfarbe oder -grafik. Als Erstes wenden Sie sich hier daher den Rahmen zu. Die erste und zugleich wichtigste Eigenschaft ist dabei border-collapse. Sie beschreibt, wie sich der Rahmen zu verhalten hat. CSS definiert dazu zwei Möglichkeiten: Mit dem Wert collapse werden aneinander liegende Rahmen zu einem zusammengefasst ? es gibt also keinen Zwischenraum zwischen zwei Rahmen. Bei dem Wert separate geschieht das Gegenteil, und jede Zelle sowie die Tabelle an sich erhält einen eigenen Rahmen. Ein Beispiel:


Wie im Beispiel zu sehen, gibt es zusätzlich noch die border-spacing-Eigenschaft. Mit ihr definiert man den Abstand zweier Rahmen, sofern border-collapse auf separate gesetzt ist, und entspricht damit weitestgehend dem HTML-Attribut cellspacing.


Hintergründe beschreiben

Tabellen-Design mit CSS

Wie eingangs erwähnt, spielt neben den Rahmen der Hintergrund für die Tabellengestaltung eine wichtige Rolle. Damit lassen sich Kopfzeilen farblich hervorheben oder die Fußzeile markieren. Doch auch Bilder können als Tabellenhintergrund eingesetzt werden, um besondere Effekte wie etwa Farbverläufe darzustellen. Wichtig hierfür sind die Eigenschaften background-color (Hintergrundfarbe) und background-image (Hintergrundbild).

Als Wert wird einfach der jeweilige Farbcode beziehungsweise der URL des Bildes notiert. Beachten Sie jedoch, dass URLs in CSS innerhalb von url() stehen müssen. Ein Beispiel:


Mit HTML war es oftmals so, dass leere Zellen einfach ausgeblendet wurden. Mit CSS kann man dies nun selbst bestimmen. Hierfür dient die empty-cells-Eigenschaft. Als Wert erhält sie entweder das Wort hide oder das Wort show. Mit dem ersten verschwinden leere Zellen ? mit dem zweiten bleiben sie. Ein Beispiel:


Nur wenig benutzt, aber dennoch sehr effektiv kann das HTML-Element caption sein. Es definiert zur entsprechenden Tabelle eine Art Überschrift. Mit CSS lässt sich dies jetzt noch verfeinern und mittels der caption-side-Eigenschaft die Position des Textes genau bestimmen. Als Werte können hier top (über) und bottom (unter) sowie left (links) und right (rechts) verwendet werden. So lassen sich dann zum Beispiel auch recht komfortabel Tabellenbeschreibungen unter die jeweilige Tabelle setzen. Der Beispiel-Code sieht so aus:









Unterschrift
...


Inhalte ausrichten

Tabellen-Design mit CSS

Ein besonderes Feature findet man in der text-align-Eigenschaft von CSS. Bei normalen Elementen beschreibt sie die Ausrichtung des Textes nach links, rechts, der Mitte oder als Blocksatz ? bei Tabellenzellen kann sie noch mehr: Ab der Version 2 von CSS ist es bei Tabellenzellen nämlich möglich, ein Zeichen anzugeben, an dem die Inhalte ausgerichtet werden sollen. Alle Vorkommen des Zeichens stehen dann untereinander. Voraussetzung dafür ist natürlich, dass sich das Zeichen in den meisten der auszurichtenden Zellen wiederfindet. Besonders bei Tabellen mit Rechnungen, in denen Kommastellen auftreten, wäre damit eine gute Formatierung möglich:


Leider liegen hier Theorie und Wirklichkeit wieder einmal um einige Jahre auseinander: Bei Tests konnte leider kein Browser die Inhalte richtig am Komma ausgerichtet darstellen.


XML-Tabellen formatieren

Tabellen-Design mit CSS

HTML-Tabellen zu formatieren ist so weit noch recht einfach, da der Browser zumindest ungefähr weiß, was er wie darzustellen hat. Deutlich schwerer wird
es schon, wenn via CSS eine XML-Datei formatiert wird und darin eine Tabelle vorkommen soll. Als Grundlage für die folgenden Beschreibungen soll eine kleine Beispieldatenbank einer imaginären Bücherei dienen. Die entsprechende XML-Datei könnte dann folgendermaßen aussehen:





HTML
3-7723-7006-3
25,00 EUR

Sie haben also eine Datei mit Büchern, die jeweils einen Titel, eine ISBN und einen Preis besitzen. Außerdem wurde im Dateikopf die CSS-Datei xmltabellen.css eingebunden, in der Sie später Ihre Formatierungen notieren werden.


Elementtypen definieren

Tabellen-Design mit CSS

Sieht man sich obige XML-Datei in einem Browser an, lässt das nur wenig von einer Tabelle erkennen. Der Browser weiß schließlich nicht, was mit Buecherei, Buch oder Titel gemeint ist.

Um dem entgegenzuwirken, müssen Sie dem Browser also sagen, was Sie mit den einzelnen Elementen meinen. In CSS gibt es dazu die display-Eigenschaft. Sie beschreibt, wie ein Element dargestellt werden soll. Für Sie sind in diesem Zusammenhang vor allem die Werte table, table-row und table-cell wichtig, die sich auf Grund der schon recht tabellenhaften Struktur der XML-Datei gut einsetzen lassen:

Buecherei { display: table; }
Buch { display: table-row; }
Titel, ISBN, Preis { display: table-cell; }

Mit dieser CSS-Datei sehen die Daten zwar immer noch nicht wirklich gut aus, es lässt sich aber schon zumindest die Tabellenstruktur auch im Browser (nicht im Internet Explorer) erkennen.


Der letzte Feinschliff?

Tabellen-Design mit CSS

Da der Browser jetzt zumindest weiß, worum es bei den Elementen geht, können Sie nun mit den gleichen Eigenschaften wie bei HTML-Tabellen zur Tat schreiten und die Beispieldatenbank mit Rahmen und Hintergrund formatieren. Das Resultat könnte dann so aussehen und lässt sich im Browser schon recht hübsch betrachten:

Buecherei{ display: table; border: 3px outset #0051A5;
width: 300px; margin: 10px; border-collapse: separate;
border-spacing: 3px; }
Buch { display: table-row; }
Titel, ISBN, Preis { display: table-cell; padding: 5px;
border: 2px outset #0051A5; }
Titel{ background-color: #E7F3FF; font-weight: bold; }
ISBN, Preis{ background-color: #F4F9FD; }
Preis{ font-style: italic; }

Die margin- und padding-Eigenschaften sorgen für ein wenig Luft zwischen Rahmen und Text.