Таблиця зебра на CSS

Таблиця зебра - це таблиця з чергуванням кольорів.

Для створення "зебри" в таблиці можна скористатися JS. Але такий метод буде досить клопіткий. Можна створити "зебру" вручну, тобто до кожного тегаtr додавати класи. Такий спосіб підійде для невеликих таблиць. А що, якщо рядків у таблиці багато? То тоді без автоматизації буде довго. А щоб не користуватися JS, можна використовувати псевдоклас CSS3:nth-child.

Псевдоклас:nth-child використовується для додавання стилю до елементів на основі нумерації дерева елементів.

Синтаксис

Значення можуть бути:

odd - Усі непарні номери елементів.

even - Усі парні номери елементів.

число - Порядковий номер дочірнього елемента щодо свого батька. Нумерація починається з 1, це буде перший елемент у списку.

вираз - Задається як an+b, де a і b цілі числа, а n — лічильник, який автоматично набуває значення 0, 1, 2.

Отже, приступимо до роботи, для початку нам треба створити таблицю.

Атрибутcellspacing визначає, скільки потрібно відступити між осередками. 0 - скасовує відступи.

Атрибутborder - це межі таблиці

Цим ми задали, що якщо тегtr буде по рахунку непарним, йому буде заданий колір фону #c8c8c8.

---