Egal ob Umsatzzahlen, Marktanalysen oder Bundesliga-Ergebnisse: Tabellen sind auch im Internet gefragt. Allerdings lassen sie sich dort lange nicht so schön gestalten wie das mit Illustrator oder  Excel und Co. möglich ist. Dank CSS3 können Sie Ihre Tabellen nun aber auch im Internet grafisch ansprechend aufbereiten. Teil 2 erläutert, wie Sie Spalten aufpeppen und bestimmten Zeilen automatisch ein anderes Aussehen geben können als dem Rest der Tabelle.

Die Zellen aufpeppen

Es folgen ein paar Anweisungen, die unsere Tabelle weiter verschönern. Da sind zum einen die Zellen des Tabellenkopfes, die einen Hintergrund und einen inneren Schatten erhalten (der in unserem Fall kein Schatten ist sondern eine Aufhellung. Weil dazu aber die CSS-Eigenschaft »box-shadow« verwendet wird, sprechen wir der Einfachheit halber trotzdem von Schatten).

th {
	background:#7aae5e;
	border-bottom:1px solid rgba(255,255,255,.7);
	-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
	-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
	-o-box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
	padding:6px 10px;}

td {
	border-bottom:1px solid #fafafa;
	border-bottom:1px solid rgba(255,255,255,.5);
	padding:6px 10px;
	color:rgba(0,0,0,.7);}

tr:last-child td {
	border-bottom:none;}

In unserem Fall wird die Schatten-Eigenschaft missbraucht, um die obere Kante des Tabellenkopfes etwas aufzuhellen. Das erhöht den Kontrast und sorgt für einen ganz leichten 3D-Effekt. Dabei wird zunächst der Wert inset eingegeben, weil der Schatten nach innen gehen soll. Dann folgen die vier Werte, die bereits weiter oben erklärt wurden.

Zuletzt bekommen die Zellen des Tabellenrumpfes eine untere Linie, etwas mehr Raum mittels padding sowie eine Farbe für die Schrift. Mit der Pseudoklasse :last-child wird für die letzte Zeile die Linie wieder aufgehoben.

Aufbessern der Spalten

Unsere Tabelle sieht nun schon ganz passabel aus, braucht aber noch etwas Feinschliff, weshalb wir uns jetzt um die einzelnen Spalten kümmern. Bei Spalte 1 möchten wir die Zahlen rechtbündig haben. Da wir keine Klassen vergeben haben im Quelltext, müssen wir das td-Element über den Pseudoklasse :first-child ansprechen.

Es folgt die wichtigste Spalte, die des Vereins. Diese ist über das a-Element leicht anzusprechen, da wir sonst in der gesamten Tabelle keinen Link vergeben haben.

/* 1. Spalte: Platz */

td:first-child {
	text-align:right;
	padding-right:24px;}

/* 2. Spalte: Verein */

td a {
	background:transparent url(vereine.png) 0 0 no-repeat;
	color:#000;
	font-weight:bold;
	opacity:.7;
	padding:3px 0 7px 30px;
	-webkit-transition:all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;}

Nun möchten wir natürlich die entsprechenden Vereinslogos für jeden Verein unterbringen. Zuvor haben wir ja schon ein Bild mit allen Logos eingebunden, lediglich die Position muss noch für jeden Verein angepasst werden. Aber wie findet CSS die einzelnen Vereine, wenn wir keine Klassen vergeben haben? Hier hilft uns nun der Attribut-Selektor. Dieser greift hier auf das HTML-Attribut href im Start-Tag des a-Elements zu. Im Quelltext haben wir ja jeden Verein verlinkt. Diesen Link können wir über CSS ausfindig machen. So sieht das ganze aus:

td a[href*="bremen"] {background-position:0 0;}
td a[href*="dortmund"] {background-position:0 -30px;}
td a[href*="frankfurt"] {background-position:0 -60px;}
td a[href*="freiburg"] {background-position:0 -90px;}
td a[href*="hamburg"] {background-position:0 -116px;}
td a[href*="hannover"] {background-position:0 -150px;}
td a[href*="hoffenheim"] {background-position:0 -180px;}
td a[href*="kaiserslautern"] {background-position:0 -210px;}
td a[href*="koeln"] {background-position:0 -240px;}
td a[href*="leverkusen"] {background-position:0 -267px;}
td a[href*="mainz"] {background-position:0 -300px;}
td a[href*="gladbach"] {background-position:0 -330px;}
td a[href*="bayern"] {background-position:0 -360px;}
td a[href*="nuernberg"] {background-position:0 -390px;}
td a[href*="pauli"] {background-position:0 -420px;}
td a[href*="schalke"] {background-position:0 -450px;}
td a[href*="stuttgart"] {background-position:0 -480px;}
td a[href*="wolfsburg"] {background-position:0 -510px;}

Im ersten Selektor wird also geprüft, ob die Zeichekette »bremen« im Link enthalten ist. So lässt sich nun jedem Verein über die Hintergrundposition das entsprechende Logo zuweisen.

Es folgt die Angabe zu :hover. Noch mal zurück zu den Links, hier hatten wir zuvor eine Transition angegeben. Dabei wird in unserem Beispiel für 0,2 Sekunden eine kleine Animation vollzogen, die auf alle Eigenschaften zutrifft, die sich beim Überfahren der Maus ändern. Zurzeit funktioniert dies nur in Webkitbrowsern wie Safari und Chrome, Firefox zieht aber mit Version 4 nach.

Spalten per :nth-child() ansprechen

Als Nächstes werden noch einzelne Spalten etwas verbessert wobei wir uns den CSS3-Pseudoklasse :nth-child() zunutze machen. Hiermit kann man gezielt einzelne Kind-Elemente ansprechen, in unserem Fall sind es die jeweiligen Zellen, die eine bestimmte Spalte bilden. td:nth-child(3) spricht also das dritte td an, welches Kindelement von tr ist. Damit können wir die gesamte dritte Spalte ansteuern.

/* Spalten zentrieren */
td:nth-child(3),
td:nth-child(7),
td:nth-child(8),
td:nth-child(9) {
	text-align:center;}

/* 9. Spalte: Punkte */

td:nth-child(9) {
	font-weight:bold;}

/* 10. Spalte: Hinweise */

td:nth-child(10) {
	font-size:11px;
	font-style:italic;}

Letze Verfeinerung: Die Zeilen

Nachdem wir nun unsere Spalten aufgepeppelt haben, verdienen ebenso die einzelnen Zeilen eine genauere Betrachtung. Und zwar wollen wir hier die Bedeutung der Platzierungen noch etwas deutlicher hervorheben. Es geht natürlich um die ersten fünf Plätze, die in den europäischen Fußball führen, sowie die letzten drei Plätze, die den Abstieg bedeuten beziehungsweise bedeuten können. Zum Schluss noch mal ein deftiger Brocken Code, der unsere Zeilen dezent verändert:

/* Zeile 1-3 Championsleague + Quali */

tr:nth-child(-n+3) td {
	background:#c3c7c1;
	background: -webkit-gradient(linear, left top, left bottom, from(#d9dcd8),
color-stop(50%, #d2d5d0), color-stop(50.1%, #cbcec9), to(#c3c7c1));
	background: -moz-linear-gradient(top, #d9dcd8, #d2d5d0 50%, #cbcec9 50.1%, #c3c7c1);
	background: linear-gradient(top, #d9dcd8, #d2d5d0 50%, #cbcec9 50.1%, #c3c7c1);}

/* Zeile 4-5 Euroleague */

tr:nth-child(-n+5):not(:nth-child(-n+3)) td {
	background:rgba(105,115,100,.07)}

/* Zeile 16-18 Absteiger und Relegation */	

tr:nth-last-child(-n+3) td {
	background:rgba(105,115,100,.07)}

tr:nth-last-child(-n+2) td {
	background:rgba(105,115,100,.13)}

tr:last-child td:first-child {
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-bottom-left-radius: 10px;}

tr:last-child td:last-child {
	-webkit-border-bottom-right-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	border-bottom-right-radius: 10px;}

Es gibt zahlreiche Bundesliga-Tabellen die hier viel mit Farbe arbeiten und dadurch die Tabelle schön (oder weniger schön) bunt machen. Unsere Tabelle soll hier eher dezent bleiben und ist durch die Vereinslogos schon bunt genug. Deshalb verändern wir lediglich den Grauwert der Spalten beziehungsweise gönnen uns für die ersten drei, die immerhin Championsleague-Luft schnuppern (können) noch einmal einen leichten Spiegeleffekt. »Die ersten drei Zeilen«, das bedeutet in der CSS-Sprache td:nth-child(-n+3). Heißt auf deutsch, nehmen wir für n irgendeine positive Zahl, ob jetzt 1, 5 oder 5.000, so wird die Summe innerhalb der Klammern nie größer als drei und deckt somit die ersten drei Zeilen ab. Diese erhalten einen Verlauf und heben sich so etwas von den übrigen Plätzen ab. Ich verzichte hier darauf, dem Qualifikationsplatz eine gesonderte Gestaltung zu geben, das wäre zu viel des guten und nicht unbedingt übersichtlicher. In der Hinweisspalte sieht man immer noch, dass es sich nur um einen Quali-Platz handelt.

Zeilen 4 und 5 gezielt ansprechen

Etwas abheben möchten wir allerdings noch die Europaleague-Plätze, diese erhalten einen dunkleren Hintergrund. Um jetzt nur die Zeilen 4 und 5 anzusprechen, greifen wir noch tiefer in die CSS-Trickkiste. Der erste Teil der Anweisung tr:nth-child(-n+5) ähnelt unserem vorherigen Beispiel, allerdings jetzt für die ersten fünf Zeilen. Da wir aber die ersten drei Zeilen nicht verändern wollen, müssen wir sie wieder ausschließen, was uns mit Hilfe der Pseudoklasse :not() gelingt. Die Anweisung in der Klammer wird also nicht berücksichtigt, somit bleiben Zeile 4 und 5 übrig.

Abdunkeln per RGBA

Etwas anders gehen wir bei den Absteigern beziehungsweise dem Relegationsplatz vor. Hier machen wir uns den Vorteil von RGBA zu nutze, indem wir zunächst die letzten drei Zeilen etwas abdunkeln und dann die letzten beiden Zeilen noch mal etwas dunkler machen. Somit sind wir fast am Ziel.

Ein Klick aufs Bild öffnet eine Demoseite.

Ein kurzer Check in den wichtigsten Browsern zeigt uns, ob die Tabelle überall funktioniert. Der Internet Explorer (bis Version 8 ) hinkt hier natürlich weit hinterher, da er mit CSS3 nichts anfangen kann. Dennoch wird die Tabelle »unfallfrei« dargestellt und alle Information sind abrufbar, weshalb hier auf eine spezielle Behandlung verzichtet wird.

Tipp: Wer jedoch dennoch die Darstellung für den Internet-Explorer aufbessern möchte, kann per Javascript mithilfe von Selectivizr nachhelfen.

Achtung – Browserunterstützung

Je nach Browserstatistik ist natürlich abzuwägen, wie viel CSS3 bei einer Website verwendet werden kann. Kleinere Effekte, die das Aussehen in modernen Browsern verbessern und das »Look and Feel« einer Website bereichern, gehen eigentlich immer. Insofern kann man auch schon jetzt CSS3 in Kundenprojekten einsetzen.