Om tabellen gemakkelijker leesbaar te maken, is het vaak handig om rijen met afwisselende achtergrondkleuren op te maken. Een van de meest gebruikelijke manieren om tabellen te stijlen is om de achtergrondkleur van elke andere rij in te stellen. Dit wordt vaak "zebrastrepen" genoemd.
U kunt dit bereiken door elke andere rij in te stellen met een CSS-klasse en vervolgens de stijl voor die klasse te definiëren. Dit werkt, maar is niet de beste of meest efficiënte manier om het te doen. Wanneer u deze methode gebruikt, moet u elke keer dat u de tabel moet bewerken, elke rij in de tabel bewerken om ervoor te zorgen dat elke rij consistent is met de wijzigingen. Als u bijvoorbeeld een nieuwe rij invoegt in uw tabel, moet in elke andere rij eronder de klasse worden gewijzigd.
CSS maakt het gemakkelijk om tafels met zebrastrepen te stylen. U hoeft geen extra HTML-kenmerken of CSS-klassen toe te voegen, u gebruikt gewoon de: n-of-type (n) CSS-kiezer.
De: n-of-type (n) selector is een structurele pseudo-klasse in CSS waarmee u elementen kunt stylen op basis van hun relaties met bovenliggende elementen en elementen uit de zusterorganisatie. U kunt het gebruiken om een of meer elementen te selecteren op basis van hun bronvolgorde. Met andere woorden, het kan overeenkomen met elk element dat het n-de kind is van een bepaald type van het bovenliggende element.
De letter n kan een sleutelwoord zijn (zoals oneven of even), een cijfer of een formule.
Als u bijvoorbeeld elke andere alineatag met een gele achtergrond wilt opmaken, bevat uw CSS-document het volgende:
p: nth-of-type (oneven) { achtergrond: geel;}
Begin met uw HTML-tabel
Maak eerst je tabel zoals je die normaal in HTML zou schrijven. Voeg geen speciale klassen toe aan de rijen of kolommen.
Voeg in uw stylesheet de volgende CSS toe:
tr: nth-of-type (oneven) { background-color: #ccc;}
Hiermee wordt elke andere rij met een grijze achtergrondkleur gemarkeerd, beginnend bij de eerste rij.
Stijl wisselende kolommen op dezelfde manier
U kunt dezelfde stijl toepassen op kolommen in uw tabellen. Om dit te doen, hoeft u alleen maar het tr in uw CSS-klasse in td te veranderen. Bijvoorbeeld:
td: nth-of-type (oneven) { background-color: #ccc;}
Formules gebruiken in een n-of-type (n) selector
De syntaxis voor een formule die wordt gebruikt in de selector is een + b.
- a is een getal dat de cyclus- of indexgrootte weergeeft.
- n is eigenlijk de letter "n" en vertegenwoordigt een teller, die op 0 staat.
- + is een operator, die ook "-" kan zijn
- b is een geheel getal en geeft de offsetwaarde weer, bijvoorbeeld hoeveel rijen omlaag als de selector de achtergrondkleur begint toe te passen. Dit is vereist als een operator deel uitmaakt van de formule.
Als u bijvoorbeeld een achtergrondkleur voor elke 3e rij wilt instellen, is uw formule 3n + 0. Uw CSS kan er als volgt uitzien:
tr: nth-of-type (3n + 0) { achtergrond: slategray;}
Handige tools voor het gebruik van n-type selector
Als je je een beetje ontmoedigd voelt door het formule-aspect van het gebruik van de pseudo-klasse n-of-type selector, probeer dan de: nth Tester-site als een nuttig hulpmiddel dat je kan helpen de syntaxis te definiëren om de gewenste look te bereiken. Gebruik het dropdown-menu om nth-of-type te selecteren (je kunt hier ook met andere pseudo-klassen experimenteren, zoals nth-child).
