Дуже часто, верстаючи таблиці, їх доводиться робити в вигляді "смугастих таблиць" - це коли колір рядів чергується один за одним. Даний підхід допомагає уявити табличний контент в більш читабельному і візуального огляду.
Так як таблиця виходить "смугастої", то даний прийом ще іноді називають таблиця в стилі зебра.
У цій статті ми з вами поговоримо про те, як такі таблиці реалізуються.
Спершу давайте створимо стандартний HTML-каркас нашої майбутньої "смугастої" таблиці.
Звертаю вашу увагу, що шапку таблиці потрібно обернути в тег thead. а основний контент таблиці - в tbody. Це все нам потрібно для того, щоб в подальшому було простіше зробити ряди таблиці "смугастими".
І також давайте для таблиці пропишемо базові CSS стилі.
Таким чином, ми з вами створили звичайну таблицю без "смугастих" рядів. Приклад можна переглянути, натиснувши на кнопку "Демо".
Ну а тепер давайте перейдемо до головної задачі даної статті і розберемо, як же можна зробити ряди таблиці "смугастими"?
Спосіб 1 - Смугаста таблиця на jQuery
Довгий час саме цей спосіб був основним рішенням в питанні створення "смугастих" таблиць.
Його підхід полягає в наступному.
Ми створюємо два CSS правила, які будуть відповідати за завдання фону парних і непарних рядах.
У нашому випадку, ми зробили, що непарні ряди будуть мати білий колір, а парні - синього.
І тепер нам досить додати невеликий скрипт написаний на jQuery, який буде для непарних рядів таблиці додавати клас odd_row. а для парних - even_row і тим самим, наша таблиця стане "смугастої".
Ось власне даний скрипт.
За допомогою jQuery селектора $ ( "table tr: odd"). ми відбираємо всі непарні ряди таблиці, а за допомогою $ ( "table tr: even") - все парні.
Також зверніть увагу на конструкцію not ( "thead tr"). з її допомогою ми виключили з нашої вибірки шапку таблиці, адже її нам не потрібно стилізувати під "смугасту" таблицю, для неї ми з вами прописали окремі стилі.
І також подивіться, що в селекторі ми використовували thead tr (тег thead). Коли ми з вами тільки створювали HTML-каркас, я звернув увагу на те, що шапку таблиці краще обернути в thead. так ось, це ми зробили, щоб на даному етапі нам було легше виключити шапку з вибірки.
Ну і нарешті, за допомогою addClass ( "even_row") і addClass ( "odd_row") ми додає відповідний клас для парних і непарних рядів таблиці.
Результат можна подивитися в "Демо".
Спосіб 2 - Смугаста таблиця на CSS
Спосіб, який описаний вище, зрозуміло самий кросбраузерності і буде працювати в старих браузерах, але у нього є і великий недолік - це те, що нам доводиться використовувати сторонній jQuery скрипт.
Це не завжди буває хорошим підходом, тому давайте розберемо другий спосіб, який робить "смугасту" таблицю на чистому CSS.
Для цього нам в таблицю стилів досить додати всього лише два правила.
І все, тепер наша таблиця також стала "смугастої".
Весь секрет даного способу полягає у використанні псевдокласу: nth-child. З його допомогою ми засобами CSS відбираємо непарні і парні ряди і для них відразу ж ставимо фоновий колір, без застосування якихось скриптів.
nth-child (odd) - відбере всі непарні ряди і для них задасть білий фон, а: nth-child (even) - відбере парні ряди і задасть для них блакитний фон.
При цьому, також зверніть увагу, що в CSS селекторі table tbody tr ми використовуємо tbody. це все зроблено через те, що нам не потрібно робити "смугастої" шапку таблиці, ми робимо "смугастими" тільки ті ряди, які знаходяться в тезі tbody.
Що стосується кросбраузерності даного способу, то від працюватиме у всіх сучасних браузерах і IE9 +.
Тому якщо вам не потрібна підтримка IE8, то сміливо використовуйте його, якщо ж вам все ж потрібно його підтримувати, то тоді перший спосіб вам на допомогу.
невеликі рекомендації
Наостанок, хочу додати пару рад.
По-перше, описаний в даній статті підхід, ви можете застосовувати не обов'язково тільки для створення "смугастих" таблиць, також ви можете зробити "смугастий" маркований список.
Наприклад, якщо використовувати перший спосіб, то вам всього лише, потрібно змінити jQuery скрипт.
В іншому ж все залишиться без зміни.
А якщо використовувати другий підхід, то необхідно виправити CSS селектори у правил.
А по-друге, зверніть увагу на "Демо" наших "смугастих" списків. Нічого не помітили?
При використанні способу з jQuery. у нас перший елемент списку убрався в блакитний колір і далі кольору чергуються, а під час використання методу на чистому CSS - перший елемент має білий фон.
Чому ж початковий елемент списку при різних способах має різний колір?
Щоб це не вводило вас в ступор, поясню.
При використанні jQuery у нас починається нумерація елементів з нульового і так до останнього.
Тобто, $ ( "ul li: odd") буде відбирати всі непарні елементи. Наприклад: 1, 3, 5, 7 і т.д. А ось $ ( "ul li: even") буде відбирати все парні елементи починаючи з нульового. Наприклад: 0, 2, 4, 6 і т.д.
При використанні: nth-child ніякого нульового елемента там немає, вся нумерація йде з першого.
Звідси і йде така розбіжність, коли ми використовуємо спосіб з jQuery у нас перший елемент по суті є нульовим елементом і сприймається, як парний, тому йому задається блакитний фон.
У нашому ж прикладі з "смугастими" таблицями ніяких розбіжностей немає, тому що ми з вами за допомогою jQuery скрипта виключили ряд з шапкою таблиці (а цей ряд, не важко здогадатися, є якраз нульовим за рахунком). Так як, ми його позбулися, то нумерація у нас пішла в правильному порядку.
А ось в прикладі зі списками, ми не виключали жодної з лав, тому зіткнулися з даною проблемою. Тому майте це на увазі, якщо будете використовувати спосіб з jQuery.