Aby tabele były łatwiejsze do odczytania, często pomocne jest stylowanie wierszy z naprzemiennymi kolorami tła. Jednym z najczęstszych sposobów stylu tabel jest ustawienie koloru tła w każdym innym wierszu. Jest to często określane jako "paski zebr."
Możesz tego dokonać, ustawiając co drugi wiersz klasą CSS, a następnie definiując styl tej klasy. Działa to, ale nie jest najlepszym lub najskuteczniejszym sposobem rozwiązania tego problemu. Podczas korzystania z tej metody za każdym razem, gdy trzeba edytować tę tabelę, może być konieczne edytowanie każdego wiersza w tabeli, aby zapewnić, że każdy wiersz jest zgodny ze zmianami. Na przykład, jeśli wstawisz nowy wiersz do tabeli, każdy inny wiersz poniżej musi mieć zmienioną klasę.
CSS ułatwia stylowanie tabel za pomocą pasków zebry. Nie musisz dodawać żadnych dodatkowych atrybutów HTML ani klas CSS, wystarczy użyć selektora CSS: nth-of-type (n).
Selektor: nth-of-type (n) jest pseudo-klasą strukturalną w CSS, która pozwala na stylizowanie elementów na podstawie ich relacji z elementami rodzica i rodzeństwa. Możesz go użyć do wybrania jednego lub więcej elementów na podstawie ich kolejności źródłowej. Innymi słowy, może dopasować każdy element, który jest n-ty dzieckiem określonego typu jego rodzica.
Litera n może być słowem kluczowym (np. Nieparzystym lub parzystym), liczbą lub formułą.
Na przykład, aby styl każdego innego znacznika akapitu miał żółty kolor tła, dokument CSS zawierałby:
p: nth-of-type (odd) { tło: żółty;}
Zacznij od swojej tabeli HTML
Najpierw utwórz tabelę tak, jak normalnie napiszesz w HTML. Nie dodawaj żadnych specjalnych klas do wierszy lub kolumn.
W swoim arkuszu stylów dodaj następujące CSS:
tr: nth-of-type (odd) { background-color: #ccc;}
Spowoduje to stylizację każdego innego wiersza na szarym tle, zaczynając od pierwszego wiersza.
Style Alternatywne kolumny w ten sam sposób
Możesz zrobić ten sam styl w kolumnach w tabelach. Aby to zrobić, zmień po prostu tr w swojej klasie CSS na td. Na przykład:
td: nth-of-type (odd) { background-color: #ccc;}
Używanie formuł w selektorze n-tego typu (n)
Składnia formuły zastosowanej w selektorze to + b.
- a to liczba reprezentująca rozmiar cyklu lub indeksu.
- n jest właściwie literą "n" i reprezentuje licznik, który jest gwiazdą o wartości 0.
- + to operator, który może również być "-"
- b jest liczbą całkowitą i reprezentuje wartość przesunięcia - na przykład, ile wierszy w dół, gdy selektor zacznie stosować kolor tła. Jest to wymagane, jeśli operator jest uwzględniony w formule.
Jeśli na przykład chcesz ustawić kolor tła dla co trzeciego wiersza, Twoja formuła będzie miała wartość 3n + 0. Twój CSS może wyglądać tak:
tr: nth-of-type (3n + 0) { tło: slategray;}
Przydatne narzędzia do używania selektora n-tego typu
Jeśli czujesz się trochę zniechęcony aspektem formalnym używania pseudoklasowego selektora n-tego typu, wypróbuj stronę: nth Tester jako przydatne narzędzie, które pomoże Ci zdefiniować składnię, aby uzyskać pożądany wygląd. Użyj menu rozwijanego, aby wybrać nth-of-type (możesz także eksperymentować z innymi pseudo-klasami również tutaj, na przykład n-dziecko).
