Um Tabellen leichter lesbar zu machen, ist es oft hilfreich, Zeilen mit abwechselnden Hintergrundfarben zu gestalten. Eine der gebräuchlichsten Methoden zum Stilisieren von Tabellen besteht darin, die Hintergrundfarbe jeder anderen Zeile festzulegen. Dies wird oft als "Zebrastreifen" bezeichnet.
Sie können dies erreichen, indem Sie jede zweite Zeile mit einer CSS-Klasse festlegen und dann den Stil für diese Klasse definieren. Dies funktioniert, ist aber nicht die beste oder effizienteste Vorgehensweise. Bei dieser Methode müssen Sie jedes Mal, wenn Sie diese Tabelle bearbeiten müssen, jede einzelne Zeile in der Tabelle bearbeiten, um sicherzustellen, dass jede Zeile mit den Änderungen übereinstimmt. Wenn Sie beispielsweise eine neue Zeile in Ihre Tabelle einfügen, muss die Klasse in jeder zweiten Zeile darunter geändert werden.
CSS macht es einfach, Tabellen mit Zebrastreifen zu gestalten. Sie müssen keine zusätzlichen HTML-Attribute oder CSS-Klassen hinzufügen. Verwenden Sie einfach den CSS-Selektor: nth-of-type (n).
Der: nth-of-type (n) -Selektor ist eine strukturelle Pseudoklasse in CSS, mit der Sie Elemente basierend auf ihren Beziehungen zu übergeordneten Elementen und gleichgeordneten Elementen gestalten können. Sie können damit ein oder mehrere Elemente basierend auf ihrer Quellreihenfolge auswählen. Mit anderen Worten, es kann mit jedem Element übereinstimmen, das das n-te Kind eines bestimmten Typs seines Elternteils ist.
Der Buchstabe n kann ein Schlüsselwort (wie gerade oder ungerade), eine Zahl oder eine Formel sein.
Um beispielsweise alle anderen Absatz-Tags mit einer gelben Hintergrundfarbe zu gestalten, enthält Ihr CSS-Dokument Folgendes:
p: nth-of-type (ungerade) { Hintergrund: gelb;}
Beginnen Sie mit Ihrer HTML-Tabelle
Erstellen Sie zunächst Ihre Tabelle so, wie Sie sie normalerweise in HTML schreiben würden. Fügen Sie keine speziellen Klassen zu den Zeilen oder Spalten hinzu.
Fügen Sie in Ihrem Stylesheet das folgende CSS hinzu:
tr: nth-of-type (ungerade) { Hintergrundfarbe: #ccc;}
Dadurch wird jede zweite Zeile mit einer grauen Hintergrundfarbe versehen, die mit der ersten Zeile beginnt.
Stil Abwechselnde Spalten auf dieselbe Weise
Sie können Spalten in Ihren Tabellen auf dieselbe Art gestalten. Ändern Sie dazu einfach das tr in Ihrer CSS-Klasse in td. Zum Beispiel:
td: nth-of-type (ungerade) { Hintergrundfarbe: #ccc;}
Verwenden von Formeln in einem n-ten (n) Selektor
Die Syntax für eine im Selector verwendete Formel lautet a + b.
- a ist eine Zahl, die die Zyklus- oder Indexgröße darstellt.
- n ist eigentlich der Buchstabe "n" und stellt einen Zähler dar, der bei 0 steht.
- + ist ein Operator, der auch "-" sein kann
- b ist eine ganze Zahl und stellt den Versatzwert dar. Beispielsweise, um wie viele Zeilen sollte der Selektor die Hintergrundfarbe anwenden. Dies ist erforderlich, wenn in der Formel ein Operator enthalten ist.
Wenn Sie beispielsweise für jede 3. Zeile eine Hintergrundfarbe festlegen möchten, lautet Ihre Formel 3n + 0. Ihr CSS könnte so aussehen:
tr: nth-of-type (3n + 0) { Hintergrund: Slategray;}
Hilfreiche Tools für die Verwendung des n-ten Selektors
Wenn Sie sich durch den Formelaspekt der Verwendung des Selektors Pseudo-Klasse nth-of-type etwas erschreckt fühlen, probieren Sie die: nth Tester-Site als nützliches Werkzeug, mit dem Sie die Syntax definieren können, um das gewünschte Aussehen zu erzielen. Verwenden Sie das Dropdown-Menü, um nth-of-type auszuwählen (Sie können auch hier mit anderen Pseudoklassen experimentieren, z. B. nth-child).
