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

Прошу прощения за столь долгую задержку в выпусках новых материалов, но был очень загружен работой, поэтому не было абсолютно времени на написание скриптов. Сегодня для Вас я подготовил простой, но достаточно полезный материал, который уверен многим пригодится в использовании на своем сайте. Ну что же, перейдем сразу к теме нашего урока под названием - таблица зебра на css и сразу же хочу отметить, что в будущем будет урок аналогичен этому, но с применением JavaScript.

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

Первая часть. HTML. 

Пожалуй, самая простая часть нашего скрипта, это создание таблиц и с классом table. Но, для начала подключим файл demo.css, который будет содержать css-свойства.

<link type="text/css" rel="stylesheet" href="css/demo.css">

Теперь создадим таблицу с шестью строками и тремя столбцами, и дадим ей класс table.

Одной из колонок дадим ссылку, для различия контента.

<table class="table">
<thead>
<tr>
	<td>Первая колонка</td>
	<td>Вторая колонка</td>
	<td>Третья колонка</td>
</tr>
</thead>

<tbody>

<tr>
	<td># 1</td>
	<td>Первая</td>
	<td><a href="http://roothelp.ru/lessons/table_zebra_na_css" target="_blank">Ссылка</a></td>
</tr>
		
<tr>
	<td># 2</td>
	<td>Вторая</td>
	<td><a href="http://roothelp.ru/lessons/table_zebra_na_css" target="_blank">Ссылка</a></td>
</tr>
		
<tr>
	<td># 3</td>
	<td>Третья</td>
	<td><a href="http://roothelp.ru/lessons/table_zebra_na_css" target="_blank">Ссылка</a></td>
</tr>
		
<tr>
	<td># 4</td>
	<td>Четвертая</td>
	<td><a href="http://roothelp.ru/lessons/table_zebra_na_css" target="_blank">Ссылка</a></td>
</tr>
		
<tr>
	<td># 5</td>
	<td>Пятая</td>
	<td><a href="http://roothelp.ru/lessons/table_zebra_na_css" target="_blank">Ссылка</a></td>
</tr>
		
<tr>
	<td># 6</td>
	<td>Шестая</td>
	<td><a href="http://roothelp.ru/lessons/table_zebra_na_css" target="_blank">Ссылка</a></td>
</tr>

</tbody>
</table>

Вторая часть. CSS.

Переходим к самому основному, это разработке псевдоклассов и элементов для таблицы, чтобы посмотреть эффект ее переходу по строкам. В нашем случае, мы используем элемент :nth-child и применяем его к строке, используя поочередность каждого элемента, начиная с первого, при этом используем значение 2n, которое позволяет делить на все четные элементы, к примеру: 2, 4, 6 и т.д..

.table {
	border-collapse:collapse;
	border-spacing:0;
	color:#808080;
	margin:0 auto;
}

.table a{
	text-decoration:none;
	color:#808080;
}

.table a:hover{
	text-decoration:none;
	color:#00AFF0;
}

.table thead > tr > td{
	padding:10px 10px 10px 0;
	text-align:center;
}

.table > tbody > tr > td{
	border-bottom:1px solid #eaedef;
	text-align:left;
	padding:10px;
}

.table > tbody > tr:nth-child(2n){
	 background: #FAFAFA;
}

.table > tbody > tr:hover{
	background:#F4F8FB;
}

Вот такой не хитрый скрипт на CSS, который позволит Ваш сайт сделать более изящным и интересным. В следующий раз, подготовлю тему урока на JavaScript, может кому то она больше придется по душе.  На этом все, до будущих уроков друзья!