Як створити смугасті таблиці Zebra за допомогою CSS

Для полегшення читання таблиць часто корисно стилізувати рядки з фоновими кольорами, що чергуються. Один з найбільш поширених способів стилізації таблиць - встановити колір тла для кожного рядка. Це часто називають «смугами зебри».

Це можна зробити, встановивши кожен другий рядок за допомогою класу CSS, а потім визначивши стиль для цього класу. Це працює, але це не найкращий або найефективніший спосіб зробити це. Якщо ви використовуєте цей метод кожного разу, коли вам потрібно редагувати цю таблицю, вам, можливо, доведеться редагувати кожен рядок у таблиці, щоб переконатися, що кожен рядок відповідає змінам. Наприклад, якщо ви вставляєте новий рядок у вашу таблицю, у кожному іншому рядку під ним необхідно змінити клас.

CSS дозволяє легко оформляти таблиці зі смужками зебри. Вам не потрібно додавати якісь додаткові атрибути HTML або CSS-класи, ви просто використовуєте CSS-селектор: nth-of-type (n) .

Селектор: nth-of-type (n) - це структурний псевдоклас в CSS, який дозволяє стилізувати елементи на основі їх відносин з батьківськими та родинними елементами. Ви можете використовувати його для вибору одного або декількох елементів залежно від їх вихідного порядку. Іншими словами, він може відповідати кожному елементу, який є n-м дочірнім елементом певного типу його батька.

Літера n може бути ключовим словом (наприклад, непарне або парне), числом або формулою.

Наприклад, щоб стилізувати будь-який інший тег абзацу з жовтим фоновим кольором, ваш CSS-документ повинен містити:

p: nth-of-type (непарний) {
фон: жовтий;}

Почніть з вашої таблиці HTML

По-перше, створіть свою таблицю так, як ви зазвичай пишете її в HTML. Не додавайте жодних спеціальних класів до рядків або стовпчиків.

Додайте до таблиці стилів наступний CSS:

tr: nth-of-type (odd) {
background-color: #ccc;
}

Це буде стиль кожного другого ряду з сірим кольором фону, починаючи з першого ряду.

Стиль стовпчиків у такий самий спосіб

Ви можете зробити такий самий стиль для стовпчиків у ваших таблицях. Для цього просто змініть tr у своєму класі CSS на td. Наприклад:

td: nth-of-type (odd) {
background-color: #ccc;
}

Використання формул у селекторі nth-типу (n)

Синтаксис формули, яку використовують у селекторі, - + b.

• a - це число, що представляє розмір циклу або індексу.
• n насправді літера «n» і представляє лічильник, який зірок на 0.
• + є оператором, який також може бути «-»
• b є цілим числом і представляє значення зміщення - наприклад, скільки рядків вниз, якщо селектор почне застосовувати колір тла. Це необхідно, якщо у формулу включено оператор.

Наприклад, якщо ви бажаєте встановити колір тла для кожного третього рядка, ваша формула буде 3n + 0. Ваш CSS може виглядати так:

tr: nth-of-type (3n + 0) {
фон: сланецгрей;}

Корисні інструменти для використання селектора n-типу

Якщо вас не влаштовує аспект формули при використанні селектора псевдокласу nth-of-type, спробуйте сайт: nth Tester як корисний інструмент, який допоможе вам визначити синтаксис для досягнення бажаного виду. Використовуйте спадне меню для вибору nth-типу (ви також можете поекспериментувати з іншими псевдокласами тут, такими як nth-child).