Auch wenn Tabellen als Layout fürs Webdesign dank CSS passé sind, so gibt es nach wie vor jede Menge Inhalte, deren Präsentation im Internet einer Tabelle bedarf. Seien es Preislisten im Online-Shop, Tarife für Flüge oder Hotelbuchungen oder Ergebnisse von Sportvereinen. Wie Sie solche Tabellen mit CSS2 und CSS3 ansprechend und dynamisch gestalten, erfahren Sie in diesem zweiteiligen Tutorial.

Die Bundesliga ist vor kurzem in die 48. Saison gestartet und zurzeit haben wir noch eine Tabelle, in der die Bayern mal nicht an erster Stelle stehen und sich ein vermeintlicher Underdog auf den oberen Plätzen sonnen darf. Da sich das im Laufe der Saison sicher ändern wird, schieben wir die Reihenfolge der Vereine mal auf Seite und machen uns an die Arbeit.

In diesem Tutorial werden wir verschiedene CSS2-/CSS3-Selektoren anwenden, die uns Eingriffe in das HTML ersparen. Auch das Einbinden von Grafiken wird so überflüssig, denn Verläufe und Schatten erzeugen wir kurzerhand mit CSS. Dazu kommen weitere kleine CSS3-Schnipsel, die unsere Tabelle für moderne Browser bereichern. Hier ist ein Ausschnitt, wie unsere Tabelle nachher im Safari oder Firefox aussehen wird:

So wird die fertige Tabelle später in Webkit-Browsern aussehen.

Die HTML-Basis kommt ohne IDs und Klassen aus

Schauen wir uns nun mal eine Bundesligatabelle an. Davon gibt’s im Netz genug, ich habe mir mal die des Kicker rausgepickt. Die Tabelle die wir hier finden, sieht zwar ganz nett aus und gibt uns alle Informationen, ist aber ein wahres Code-Monster, wie der Quelltext einer einzigen Zelle zeigt:

<td ><div id="ctl00_PlaceHolderContent_ctl01_ctl00_repBegegnungen_ctl01_ctl03_showMe">
<div id="ctl00_PlaceHolderContent_ctl01_ctl00_repBegegnungen_ctl01_ctl03_verlinkt">
<a href="/news/fussball/bundesliga/vereine/1-bundesliga/2010-11/vfl-wolfsburg-24/vereins
informationen.html" id="ctl00_PlaceHolderContent_ctl01_ctl00_repBegegnungen_ctl01_ctl03_NameA"
class="link" style="">VfL Wolfsburg</a>
</div>
</div>
</td>

Wir werden unsere Tabelle wesentlich einfacher erstellen, nämlich ganz ohne Klassen, IDs oder gar zusätzliche Div-Container. Warum? Weil es mehrer Vorteile bietet:

• übersichtlicherer Code
• kürzere Ladezeiten
• weniger Wartungsbedarf.

Legen wir also los:

Unsere Tabelle enthält ein caption-Element, in dem ein kurzer Titel zur Erläuterung des Inhalts enthalten ist. Es folgt der Tabellenkopf (thead) mit den Spaltenüberschriften sowie der Tabellenrumpf (tbody) mit den Inhalten der Tabelle. scope="col" wird zudem verwendet, um deutlich zu machen, dass sich die Tabellenköpfe auf die gesamte Spalte beziehen.

Nachdem wir unser Grundgerüst erstellt haben, können wir uns direkt an die Gestaltung machen. Zurzeit sieht unsere Tabelle noch so aus:

Zuerst nehmen wir noch ein paar grundsätzliche Einstellungen vor:

* {
	margin:0;
	padding:0;}

body {
	font: 13px/1.5 Arial, sans-serif;
	margin:50px;}

h1 {
	font-size:20px;
	margin-bottom:10px;}

Damit setzen wir alle Innen- und Außenabstände auf 0 und definieren die Grundeinstellung der Schrift und Abstände für body und h1.

Die Grundgestaltung der Tabelle

/* Tabelle */

table {
	background:#e9eae8;
	background:rgba(105,115,100,.15);
	-webkit-border-radius:0 0 10px 10px;
	-moz-border-radius:0 0 10px 10px;
	border-radius:0 0 10px 10px;
	border-collapse:collapse;
	border-spacing:0;
	text-align:left;
	width:660px;}

Den Hintergrund geben wir in RGBA (RGB plus Alpha-Kanal) an. Das ist deshalb sinnvoll, weil wir später noch verschiedene Grauabstufungen des Farbwerts verwenden und wir dann nur den Alpha-Kanal ändern müssen. Als Fallback-Lösung notieren wir in der Zeile davor den Hexadezimal-Wert für unseren Freund den Internet Explorer, der bis einschließlich Version 8 kein RGBA versteht.

Dann folgt die Anweisung für abgerundete Ecken in der Kurzschreibweise, wobei die Werte ähnlich wie zum Beispiel bei margin im Uhrzeigersinn angegeben werden, hier also oben links, oben rechts, unten rechts, unten links. Dann weisen wir noch an, dass die Zellenrahmen übereinander liegen sollen und der Text linksbündig ist. Zum Schluss erhält die Tabelle noch eine Breite, die verhindert, dass die sie bei einem kleineren Browserfenster unschön zusammengeschoben wird.

Die Tabellenüberschrift (»caption«)

caption {
	background:#656e70;
	background:-webkit-gradient(linear, left top, left bottom, from(#656e70),
color-stop(50%, #515b5c), color-stop(50.1%, #465153), to(#323e40));
	background:-moz-linear-gradient(top, #656e70, #515b5c 50%, #465153 50.1%, #323e40);
	background:linear-gradient(top, #656e70, #515b5c 50%, #465153 50.1%, #323e40);
	-webkit-border-radius:10px 10px 0 0;
	-moz-border-radius:10px 10px 0 0;
	border-radius:10px 10px 0 0;
	color:#fff;
	font-size:15px;
	font-weight:bold;
 	padding:10px 0 10px 10px;
 	text-align:left;
	text-shadow:0 -1px 1px rgba(0,0,0,.5);}

small {
	color:#a3a8a9;}

Hier schlägt uns einiges an CSS entgegen, was in diesem Fall an den Farbverläufen liegt, die wir rein mit CSS erstellen. Diese werden über die bekannte CSS-Eigenschaft backgrund realisiert, allerdings wird der Wert in den Vorreitern Safari und Firefox unterschiedlich angegeben. Aber der Reihe nach. Zunächst definieren wir die Fallback-Lösung für Browser, die noch keine Verläufe darstellen können, wie Opera oder der Internet Explorer. Anschließend folgt der Verlauf für Webkit-Browser, der wie folgt entsteht: Zunächst kommt der Typ, hier ein linearer Verlauf, dann folgt der Startpunkt left top, sowie der Endpunkt left bottom, wir erhalten also einen senkrechten Verlauf.

Es folgt die Farbe für den Verlaufsstart. Bei einem einfachen Verlauf würde nun die Farbe für das Verlaufsende folgen, in unserem Fall möchten wir aber einen leichten Spiegelungseffekt erzielen und brauchen dafür zwei Farben mehr. Dazu gibt man einen color-stop an, der bei der Hälfte der Box einsetzt, angegeben durch einen Prozentwert. Es folgt ein zweiter color-stop, der direkt an den vorherigen anschließt, deshalb ein Wert von 50.1%, sowie die Schlussfarbe, mit der der Verlauf endet. Puh, geschafft.

Die nun folgende Firefox-Anweisung liest sich dagegen wesentlich leichter, ist intuitiver und drückt das gerade beschriebene in wesentlich weniger Code aus. Zuletzt wird die offizielle W3C-Deklaration geschrieben, die aber glücklicherweise genau der von Firefox entspricht, sodass wir sie einfach ohne Browserpräfix übernehmen können.

Es folgen wieder abgerundete Ecken, kennen wir ja, sowie weitere Einstellungen bzgl. der Schriftanzeige, unter anderem ein text-shadow, der nach oben gerichtet für einen leichten Einstanz-Effekt sorgt. Die vier Werte, die angegeben werden sind der Abstand nach links, der Abstand nach oben (in diese Fall ist der Wert negativ, sodass der Schatten nach oben zeigt), die Unschärfe (je höher der Wert, desto weicher wird der Schatten) und die Farbe. Hier hilf RGBA, den Schatten noch realistischer zu machen.

Zuletzt wird noch mit small unser Datum gestylt.

Das war jetzt eine Menge Holz, mündet aber schon in einem schönen Effekt. So sieht unsere Tabelle jetzt aus:

Das lesen Sie im zweiten Teil:

• Die Zellen aufpeppen
• Aufbessern der Spalten

(mm),