tabellen gestalten mit der css3 pseudo-class nth-child (even) und (odd)

Bereits vor CSS3 machte es Spass, Tabellen zu gestalten. Aber mit CSS3 ist es nun wesentlich einfacher, gezielt auf bestimmte Spalten oder Zeilen einer Tabelle zuzugreifen. Ich kann mich noch an Zeiten entsinnen, da in PHP Schleifen programmiert wurden, um den alternierenden Zellen oder Zeilen einer Tabelle im HTML-Code die Klassen „even“ und „odd“ hinzuzufügen. Erst dann hatte der Webdesigner eine Chance, diese zu greifen und mit den gewünschten Eigenschaften zu versehen.

Ich kann mich allerdings auch noch daran erinnern, das man Tabellen zu Layoutzwecken mißbraucht und ganze Webseiten in Tabellen gezwängt bzw. darin erstellt hat. Mit dem ursprünglichen Sinn einer Tabelle hatte das beileibe nichts zu tun. (…)

CSS3 hat im Vergleich zu CSS level 2 einige neue Pseudoklassen hizubekommen, von denen ich mir heute :nth-child (n) zur Gestaltung einer Tabelle anschauen werde.

Presudoklasse heissen Pseudoklassen, weil sie keine echten Klassen (class=“name“) sind, die man im Quelltext finden könnte, sondern solche, die den Zustand oder die Position eines Elementes darstellen. Zustände entstehen unter anderem durch Interaktion des Besuchers mit der Webseite (:hover, :active, :focus, :checked), Positionen beschreiben den Ort eines Elementes im HTML-Dokument (:first-child, :last-child). – oder es werden Inhalte an bestimmter Stelle erzeugt (:before, :after).

Sie (die Pseudoklassen) greifen also erst dann, wenn ein Element diese bestimmte Eigenschaft oder diese Position besitzt.

Mit nth-child(n) kann man nun auf ein bestimmtes Element als Kind eines Elternelementes (z.B. die 5. Spalte, die 3. Zeile einer Tabelle, das 3. Listelement, usw.), also auf das „n-te“ (Kind-)Element zugreifen.

Wenn wir das (n), also den Platzhalter, durch einen mathematischen Begriff (2n+1) oder (2n) ersetzen, können wir ungerade bzw. gerade Positionen in einer Reihe von Elementen herausfinden und greifen. Die Begriffe „odd“ (ungerade, 2n+1) und „even“ (gerade, 2n) leisten genau das (natürlich könnte ich in diesem Beispiel hier auch „2n“ statt „even“ und „2n+1“ statt „odd“ zwischen die Klammern einsetzen). Und das ist es auch, was ich in meinem Beispiel für die Tabelle brauche, um abwechselde Spalten und Zeilen unterschiedlich darzustellen, „even“ und „odd“.

Als erstes möchte ich abwechselnde Hintergrundfarben für die (abwechselnden) Zeilen einer Tabelle.

Hier vorab das HTML-Grundgerüst meiner Tabelle:

und hier die entsprechende CSS:

Beschreibung „caption“ der Tabelle
Spalte 1 Spalte 2 Spalte 3 Spalte 4 Spalte 5
Z1-SP1 Z1-SP2 Z1-SP3 Z1-SP4 Z1-SP5
Z2-SP1 Z2-SP2 Z2-SP3 Z2-SP4 Z2-SP5
Z3-SP1 Z3-SP2 Z3-SP3 Z3-SP4 Z3-SP5
Fuss 1 Fuss 2 Fuss 3 Fuss 4 Fuss 5

Als nächstes möchte ich abwechselnde Hintergrundfarben für die (abwechselnden) Spalten.

Zuerst wieder der HTML-Code:

Die dazugehörige CSS:

Beschreibung „caption“ der Tabelle 2
Spalte 1 Spalte 2 Spalte 3 Spalte 4 Spalte 5
Z1-SP1 Z1-SP2 Z1-SP3 Z1-SP4 Z1-SP5
Z2-SP1 Z2-SP2 Z2-SP3 Z2-SP4 Z2-SP5
Z3-SP1 Z3-SP2 Z3-SP3 Z3-SP4 Z3-SP5
Fuss 1 Fuss 2 Fuss 3 Fuss 4 Fuss 5

Zum Schluss möchte ich das ganze natürlich auch noch mixen, hier wieder das HTML-Gerüst:

und die dazugehörige CSS:

Beschreibung „caption“ der Tabelle 3
Spalte 1 Spalte 2 Spalte 3 Spalte 4 Spalte 5
Z1-SP1 Z1-SP2 Z1-SP3 Z1-SP4 Z1-SP5
Z2-SP1 Z2-SP2 Z2-SP3 Z2-SP4 Z2-SP5
Z3-SP1 Z3-SP2 Z3-SP3 Z3-SP4 Z3-SP5
Z4-SP1 Z4-SP2 Z4-SP3 Z4-SP4 Z4-SP5
Z5-SP1 Z5-SP2 Z5-SP3 Z5-SP4 Z5-SP5
Z6-SP1 Z6-SP2 Z6-SP3 Z6-SP4 Z6-SP5
Z7-SP1 Z7-SP2 Z7-SP3 Z7-SP4 Z7-SP5
Z8-SP1 Z8-SP2 Z8-SP3 Z8-SP4 Z8-SP5
Z9-SP1 Z9-SP2 Z9-SP3 Z9-SP4 Z9-SP5
Z10-SP1 Z10-SP2 Z10-SP3 Z10-SP4 Z10-SP5
Fuss 1 Fuss 2 Fuss 3 Fuss 4 Fuss 5

Mit nth-child(n) lässt es sich übrigens nicht nur prima Tabellen, sondern auch tolle Listen gestalten. Weitere Beispiele folgen.

Kommentar (1)

  1. Pingback: nth-child und die Möglichkeiten, nthmaster.com | CSS3.de

Kommentare sind geschlossen.