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.

Weiterlesen