Колонки та комірки таблиці у вигляді «зебри»

таблиці

Звичайно, тут нічого нового немає. Цей метод робився тисячі разів. Такий вид осередків (як) допомагає легше розрізняти потрібну смугу інформації, так як смужки розділені різними кольорами. Ми пишемо «як би», оскільки якась Джессіка Ендерс (Jessica Enders) провела спеціальні дослідження і з'ясувала, що цей метод не дуже допомагає.

Навряд чи можна вигадати щось легше, ніж просто зробити таблицю смугастою. На програмному рівні ви можете задати певний клас кожному парному або непарному рядку «tr» (часто це темніший або світліший фон осередку) і, таким чином, отримати «зебру». Ще є інший метод: можна просто додати сторонній клас і використовувати селекторnth-of-type, тобто:

Селектор nth-of-typeтут слідкує за кожним непарним «tr» у «tbody», тобто. 1. 3, 5, 7 тощо.

Розуміючи це, ми можемо додати логіку до створення колонок як зебри. Тобто:

Ми також можемо скомбінувати ці методи для створення таблиці, де кожна комірка та колонка зафарбовуються одночасно, а потім використовуючи функцію параметра кольору rgba(), ми можемо зафарбовувати комірки так, щоб відобразити, де вони перетинаються. Ось код для простого комбінування методів:

Селектори, залучені до цього методу, підтримуються лише у тих браузерах, у яких є підтримкаCSS3, отже ми й не знаємо, що сказати про IE. Проте, враховуючи переваги зеброподібних таблиць, навряд чи варто дбати про крос-браузерну підтримку. Дослідження показують, що таблиці без зебри також ефективні, як із нею.

Звичайно ж, якщо вам хочеться, щоб все це працювало в IE, ви завжди можете повернутися до програмного методу додавання класуoddдо парних або непарних елементів th, tr і td.