Полосатая таблица

Очень часто, верстая таблицы, их приходится делать в виде "полосатых таблиц" - это когда цвет рядов чередуется друг за другом. Данный подход помогает представить табличный контент в более читабельном и наглядном виде.

Так как таблица получается "полосатой", то данный прием еще иногда называют таблица в стиле зебра.

В этой статье мы с вами поговорим о том, как такие таблицы реализуются.

Сперва давайте создадим стандартный HTML-каркас нашей будущей "полосатой" таблицы.

HTML

 		<table>
 			<thead>
	 		 	<tr>
	 				<th>Lorem</th>
	 				<th>Aut</th>
	 				<th>Rerum</th>
	 				<th>Mollitia</th>
	 			</tr>
 			</thead>
 			<tbody>
	 			<tr>
	 				<td>Lorem</td>
	 				<td>Quaerat</td>
	 				<td>Natus</td>
	 				<td>Debitis</td>
	 			</tr>
	 			<tr>
	 				<td>Lorem</td>
	 				<td>Eligendi</td>
	 				<td>Rerum</td>
	 				<td>Rem</td>
	 			</tr>
	 			<tr>
	 				<td>Lorem</td>
	 				<td>Numquam</td>
	 				<td>Accusamus</td>
	 				<td>Provident</td>
	 			</tr>
	 			<tr>
	 				<td>Lorem</td>
	 				<td>Reiciendis</td>
	 				<td>Consectetur</td>
	 				<td>Alias</td>
	 			</tr>
 			</tbody>
 		</table>

Обращаю ваше внимание, что шапку таблицы требуется обернуть в тег thead, а основной контент таблицы - в tbody. Это все нам нужно для того, чтобы в дальнейшем было проще сделать ряды таблицы "полосатыми".

И также давайте для таблицы пропишем базовые CSS стили.

CSS

table {
	width: 500px;
	margin: 50px auto;
	font: 14px Arial;
	text-align: left;
	border-collapse: collapse;
}

table th {
	background: #9edfff;
}

table th,
table td {
	padding: 5px;
}

Таким образом, мы с вами создали обычную таблицу без "полосатых" рядов. Пример можно посмотреть кликнув по кнопке "Демо".

Ну а теперь давайте перейдем к главной задаче данной статьи и разберем, как же можно сделать ряды таблицы "полосатыми"?

Способ 1 - Полосатая таблица на jQuery

Долгое время именно данный способ был основным решением в вопросе создания "полосатых" таблиц.

Его подход заключается в следующем.

Мы создаем два CSS правила, которые будут отвечать за задание фона четным и нечетным рядам.

CSS

.odd_row { /* Задаем стили для нечетных рядов таблицы */
	background: #fff;
}

.even_row { /* Задаем стили для четных рядов таблицы */
	background: #f2f6f8;
}

В нашем случае, мы сделали, что нечетные ряды будут иметь белый цвет, а четные - светло синий.

И теперь нам достаточно добавить небольшой скрипт написанный на jQuery, который будет для нечетных рядов таблицы добавлять класс odd_row, а для четных - even_row и тем самым, наша таблица станет "полосатой".

Вот собственно данный скрипт.

jQuery

			$(document).ready(function(){
				$("table tr:odd").not("thead tr").addClass("odd_row");
				$("table tr:even").not("thead tr").addClass("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.

Для этого нам в таблицу стилей достаточно добавить всего лишь два правила.

CSS

table tbody tr:nth-child(odd){ /* Задаем стили для нечетных рядов таблицы */
	background: #fff;
}

table tbody tr:nth-child(even){ /* Задаем стили для четных рядов таблицы */
	background: #f2f6f8;
}

И все, теперь наша таблица также стала "полосатой".

Весь секрет данного способа заключается в использовании псевдокласса :nth-child. С его помощью мы средствами CSS отбираем нечетные и четные ряды и для них сразу же задаем фоновый цвет, без применения каких-то скриптов.

:nth-child(odd) - отберет все нечетные ряды и для них задаст белый фон, а :nth-child(even) - отберет четные ряды и задаст для них светло синий фон.

При этом, также обратите внимание, что в CSS селекторе table tbody tr мы используем tbody, это все сделано из-за того, что нам не нужно делать "полосатой" шапку таблицы, мы делаем "полосатыми" только те ряды, которые находятся в теге tbody.

Что касается кроссбраузерности данного способа, то от будет работать во всех современных браузерах и IE9+.

Поэтому если вам не нужна поддержка IE8, то смело используйте его, если же вам все же требуется его поддерживать, то тогда первый способ вам в помощь.

Небольшие рекомендации

Напоследок, хочу добавить пару советов.

Во-первых, описанный в данной статье подход, вы можете применять не обязательно только для создания "полосатых" таблиц, также вы можете сделать "полосатый" маркированный список.

Например, если использовать первый способ, то вам всего лишь, потребуется изменить jQuery скрипт.

jQuery

			$(document).ready(function(){
				$("ul li:odd").addClass("odd_row");
				$("ul li:even").addClass("even_row");
			});

В остальном же все останется без изменения.

А если использовать второй подход, то необходимо исправить CSS селекторы у правил.

CSS

ul li:nth-child(odd){ /* Задаем стили для нечетных рядов списка */
	background: #fff;
}

ul li:nth-child(even){ /* Задаем стили для четных рядов списка */
	background: #f2f6f8;
}

А во-вторых, обратите внимание на "Демо" наших "полосатых" списков. Ничего не заметили?

При использовании способа с jQuery, у нас первый элемент списка окрасился в светло синий цвет и далее цвета чередуются, а при использовании способа на чистом CSS - первый элемент имеет белый фон.

Почему же начальный элемент списка при разных способах имеет разный цвет?

Чтобы это не вводило вас в ступор, поясню.

При использовании jQuery у нас начинается нумерация элементов с нулевого и так до последнего.

То есть, $("ul li:odd") будет отбирать все нечетные элементы. Например: 1, 3, 5, 7 и т.д. А вот $("ul li:even") будет отбирать все четные элементы начиная с нулевого. Например: 0, 2, 4, 6 и т.д.

При использовании :nth-child никакого нулевого элемента там нет, вся нумерация идет с первого.

Отсюда и идет такое расхождение, когда мы используем способ с jQuery у нас первый элемент по сути является нулевым элементом и воспринимается, как четный, поэтому ему задается светло синий фон.

В нашем же примере с "полосатыми" таблицами никаких расхождений нет, потому что мы с вами с помощью jQuery скрипта исключили ряд с шапкой таблицы (а этот ряд, не трудно догадаться, является как раз нулевым по счету). Так как, мы от него избавились, то нумерация у нас пошла в правильном порядке.

А вот в примере со списками, мы не исключали ни какой из рядов, поэтому столкнулись с данной проблемой. Поэтому имейте это ввиду, если будете использовать способ с jQuery.

Понравилась статья?

Тогда оставь свой комментарий или расскажи о ней своим друзьям и коллегам.

Комментарии ВКонтакте

Добавить комментарийКомментариев (2)

Сергей 26 апреля 2015 г. в 02:33

Да!в самый раз при необходимости вставить в подходящий дизайн!

Ответить

Павел 22 апреля 2015 г. в 21:32

Просто понятно полезно!

Ответить
Наверх

Скачивание материалов доступно
только подписчикам!

Если вы подпишитесь, то сможете сразу же получить доступ ко всем материалам этого блога

Подписка бесплатная и займет у вас
не более 1 минуты

Получение доступа к материалам

Для получения доступа, заполните форму ниже. Введите свое настоящее имя и e-mail

« Вернуться назад

Проверьте свой почтовый ящик

и подтвердите подписку

После этого вы сразу же получите доступ ко всем материалам этого блога

Введите e-mail, который вы указывали при подписке

Мы проверим его по базе подписчиков и если вы на самом деле подписывались, то доступ для вас сново будет открыт

« Вернуться назад