Um Tabellen besser lesbar zu machen, ist es oft hilfreich, Zeilen mit abwechselnden Hintergrundfarben zu gestalten. Eine der gebräuchlichsten Methoden zum Gestalten von Tabellen besteht darin, die Hintergrundfarbe jeder zweiten 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 Methode. Wenn Sie diese Methode verwenden, müssen Sie jedes Mal, wenn Sie diese Tabelle bearbeiten müssen, möglicherweise 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 in jeder zweiten Zeile darunter die Klasse geändert werden.
CSS macht es einfach, Tische mit Zebrastreifen zu stylen. Sie müssen nichts extra hinzufügen HTML Attribute oder CSS-Klassen verwenden Sie einfach Folgendes: nth-of-type (n) CSS-Selektor.
Der: nth-of-type (n)-Selektor ist eine strukturelle Pseudoklasse in CSS, mit der Sie Elemente basierend auf ihren Beziehungen zu übergeordneten und gleichgeordneten Elementen formatieren können. Sie können es verwenden, um ein oder mehrere Elemente basierend auf ihrer Quellreihenfolge auszuwä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 ungerade oder gerade), eine Zahl oder eine Formel sein.
Um beispielsweise jedes zweite Absatz-Tag mit einer gelben Hintergrundfarbe zu gestalten, würde Ihr CSS-Dokument Folgendes enthalten:
p: n-ter Typ (ungerade) {
Hintergrund: gelb;
}
Beginnen Sie mit Ihrer HTML-Tabelle
Erstellen Sie zunächst Ihre Tabelle, wie Sie sie normalerweise in HTML schreiben würden. Fügen Sie den Zeilen oder Spalten keine speziellen Klassen hinzu.
Fügen Sie in Ihrem Stylesheet das folgende CSS hinzu:
tr: n-Typ (ungerade) {
Hintergrundfarbe:#ccc;
}
Dadurch wird jede zweite Reihe mit einer grauen Hintergrundfarbe formatiert, beginnend mit der ersten Reihe.
Abwechselnde Spalten auf die gleiche Weise gestalten
Sie können Spalten in Ihren Tabellen auf die gleiche Weise formatieren. Ändern Sie dazu einfach das tr in Ihrer CSS-Klasse in td. Beispielsweise:
td: n-ter Typ (ungerade) {
Hintergrundfarbe:#ccc;
}
Verwenden von Formeln in einem Selektor vom Typ n (n)
Die Syntax für eine im Selektor verwendete Formel ist an+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 beginnt.
- + ist ein Operator, der auch "-" sein kann
- b ist eine ganze Zahl und stellt den Offset-Wert dar – zum Beispiel, wie viele Zeilen nach unten der Selektor beginnen soll, die Hintergrundfarbe anzuwenden. Dies ist erforderlich, wenn ein Operator in der Formel enthalten ist.
Wenn Sie beispielsweise für jede dritte Zeile eine Hintergrundfarbe festlegen möchten, lautet Ihre Formel 3n+0. Ihr CSS könnte so aussehen:
tr: n-ter Typ (3n+0) {
Hintergrund: Schiefergrau;
}
Hilfreiche Tools zur Verwendung des n-ten-Typ-Selektors
Wenn Sie der Formelaspekt bei der Verwendung des Pseudoklassenselektors nth-of-type ein wenig eingeschüchtert ist, Versuchen Sie es mit der: n-ten 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 hier auch mit anderen Pseudoklassen experimentieren, z. B. nth-child).