Как сделать полосатую таблицу на HTML, CSS, JS, PHP

Сборник методов как сделать HTML таблицу «полосатой» или, как её еще называют «таблица с зеброй».

В CSS можно применить псевдокласс :nth-child он используется для добавления стиля к элементам на основе нумерации.

<table id="table">
	<thead>
		<tr>
			<th>#</th>
			<th>First Name</th>
			<th>Last Name</th>
			<th>Username</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>Mark</td>
			<td>Otto</td>
			<td>@mdo</td>
		</tr>
		<tr>
			<td>2</td>
			<td>Jacob</td>
			<td>Thornton</td>
			<td>@fat</td>
		</tr>
		<tr>
			<td>3</td>
			<td>Larry</td>
			<td>the Bird</td>
			<td>@twitter</td>
		</tr>
		<tr>
			<td>4</td>
			<td>Jake</td>
			<td>Propper</td>
			<td>@vso</td>
		</tr>
	</tbody>
</table>
HTML
/* Нечетные строки */
#table tbody tr:nth-child(odd){
	background: #fff;
}

/* Четные строки */
#table tbody tr:nth-child(even){
	background: #F7F7F7;
}
CSS

Чтобы сделать разноцветные строки таблицы с количеством цветов более двух, можно применить следующие приём:

/* Строки 1,4,7... */
#table tbody tr:nth-child(3n+1){
	background: #f2fff5;
}

/* Строки 2,5,8... */
#table tbody tr:nth-child(3n+2){
	background: #ffeaea;
}

/* Строки 3,6,9... */
#table tbody tr:nth-child(3n+3){
	background: #eeecff;
}
CSS

Скрипт перебирает строки таблицы и добавляет им классы odd и even.

var table = document.getElementById('table');
var table_body = table.getElementsByTagName('tbody');

for (var h = 0; h < table_body.length; h++) {
	var table_tr = table_body[h].getElementsByTagName('tr');
	for (var i = 0; i < table_tr.length; i++) {
		if (i%2) {
			table_tr[i].className = 'even';
		} else {
			table_tr[i].className = 'odd';
		}
	}
}
JS
/* Нечетные строки */
#table .odd {
	background: #fff;
}

/* Четные строки */
#table .even {
	background: #F7F7F7;
}
CSS

Добавлением класса к строкам таблицы:

$('#table tbody tr:odd').addClass('odd');
$('#table tbody tr:even').addClass('even');
JS

Или добавление CSS стилей:

$('#table tbody tr:odd').css('background', '#F7F7F7');
$('#table tbody tr:even').css('background', '#fff');
JS

В скрипте используется префиксный инкремент ++$i для подсчёта строк и арифметический оператор % – деление по модулю.
Выражение $i%2 вернет «1» если число в переменной нечётное и «0» если чётное.

<?php $i = 0; ?>

<table id="table">
	<thead>
		<tr>
			<th>#</th>
			<th>First Name</th>
			<th>Last Name</th>
			<th>Username</th>
		</tr>
	</thead>
	<tbody>
		<tr class="<?php echo (++$i%2) ? 'odd' : 'even'; ?>">
			<td>1</td>
			<td>Mark</td>
			<td>Otto</td>
			<td>@mdo</td>
		</tr>
		<tr class="<?php echo (++$i%2) ? 'odd' : 'even'; ?>">
			<td>2</td>
			<td>Jacob</td>
			<td>Thornton</td>
			<td>@fat</td>
		</tr>
		<tr class="<?php echo (++$i%2) ? 'odd' : 'even'; ?>">
			<td>3</td>
			<td>Larry</td>
			<td>the Bird</td>
			<td>@twitter</td>
		</tr>
		<tr class="<?php echo (++$i%2) ? 'odd' : 'even'; ?>">
			<td>4</td>
			<td>Jake</td>
			<td>Propper</td>
			<td>@vso</td>
		</tr>
	</tbody>
</table>

<style type="text/css">
/* Нечетные строки */
#table .odd {
	background: #fff;
}

/* Четные строки */
#table .even {
	background: #F7F7F7;
}
</style>
HTML
12.11.2017, обновлено 17.10.2019
14080
Предыдущая запись Стилизация Radio Button

Комментарии

, чтобы добавить комментарий.

Другие публикации

Шаблонизатор Smarty
Smarty это компилирующий обработчик шаблонов для PHP позволяющий отделить логику и HTML-верстку веб-приложения.
15465
+5
Постраничный вывод и базы данных
В SQL запросах, для ограничения количества строк в результате используется инструкция LIMIT, например следующий вернёт...
6044
0
Пример парсинга html-страницы на phpQuery
phpQuery – это удобный HTML парсер взявший за основу селекторы, фильтры и методы jQuery, которые позволяют...
34331
+14
Псевдоклассы nth-child и nth-last-child
Псевдокласс :nth-child используется для добавления стиля к элементам на основе нумерации в родительском элементе. В...
18553
+4
Генерация счета на оплату PDF PHP
С помощью расширения dompdf можно легко сформировать PDF файл. По сути, dompdf - это конвертер HTML в PDF который...
41116
+27
PHP-класс обертка для PDO
Класс значительно упрощает работу с PDO, сокращает код. Реализован на статических классах и не требует создание экземпляра класса.
16168
+9