Jak tworzyć tabele w paski Zebra za pomocą CSS?

Używanie :nth-of-type(n) z tabelami

Aby ułatwić czytanie tabel, często pomocne jest stylizowanie wierszy z naprzemiennymi kolorami tła. Jednym z najczęstszych sposobów stylizowania tabel jest ustawienie koloru tła każdego innego wiersza. Jest to często określane jako „paski zebry”.

Możesz to osiągnąć, ustawiając co drugi wiersz klasą CSS, a następnie definiując styl dla tej klasy. To działa, ale nie jest najlepszym ani najskuteczniejszym sposobem na to. Korzystając z tej metody, za każdym razem, gdy trzeba edytować tę tabelę, może być konieczne edytowanie każdego wiersza w tabeli, aby upewnić się, że każdy wiersz jest zgodny ze zmianami. Na przykład, jeśli wstawisz nowy wiersz do tabeli, każdy kolejny wiersz poniżej musi mieć zmienioną klasę.

CSS ułatwia stylizację stołów w paski zebry. Nie musisz dodawać żadnych dodatkowych HTML atrybutów lub klas CSS, wystarczy użyć: n-tego typu(n) Selektor CSS .

Selektor: nth-of-type(n) to strukturalna pseudoklasa w CSS, która umożliwia stylizowanie elementów na podstawie ich relacji z elementami rodzica i rodzeństwa. Możesz go użyć, aby wybrać jeden 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-tym dzieckiem określonego typu jego rodzica.

Litera n może być słowem kluczowym (na przykład nieparzystym lub parzystym), liczbą lub formułą.

Na przykład, aby wystylizować każdy inny znacznik akapitu z żółtym kolorem tła, Twój dokument CSS będzie zawierał:

nieokreślony

|_+_|

Zacznij od swojej tabeli HTML

Najpierw utwórz tabelę tak, jak zwykle piszesz ją w HTML. Nie dodawaj żadnych specjalnych klas do wierszy ani kolumn.

W arkuszu stylów dodaj następujący kod CSS:

|_+_|

Spowoduje to stylizację każdego drugiego wiersza na szary kolor tła, zaczynając od pierwszego wiersza.

Styl naprzemiennych kolumn w ten sam sposób

Ten sam rodzaj stylizacji można zastosować do kolumn w tabelach. Aby to zrobić, po prostu zmień tr w swojej klasie CSS na td. Na przykład:

|_+_|

Używanie formuł w selektorze n-tego typu(n)

Składnia formuły używanej w selektorze to an+b.

• a to liczba reprezentująca rozmiar cyklu lub indeksu.
• n jest w rzeczywistości literą „n” i reprezentuje licznik, który zaczyna się od 0.
• + to operator, którym może być również '-'
• b jest liczbą całkowitą i reprezentuje wartość przesunięcia — na przykład, o ile wierszy w dół selektor powinien zacząć stosować kolor tła. Jest to wymagane, jeśli w formule uwzględniono operator.

Na przykład, jeśli chcesz ustawić kolor tła dla każdego trzeciego wiersza, Twoja formuła będzie wynosić 3n+0. Twój CSS może wyglądać tak:​

|_+_|

Pomocne narzędzia do korzystania z selektora n-tego typu

Jeśli czujesz się trochę zniechęcony aspektem formuły używania pseudoklasowego selektora typu nth-of-type, wypróbuj: n-tą stronę testera jako przydatne narzędzie, które może pomóc w zdefiniowaniu składni w celu uzyskania pożądanego wyglądu. Użyj menu rozwijanego, aby wybrać nth-of-type (możesz też tutaj poeksperymentować z innymi pseudoklasami, takimi jak nth-child).