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

12.11.2017

22814

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

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

В 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

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

Скрипт перебирает строки таблицы и добавляет им классы 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';
		}
	}
}

/* Нечетные строки */
#table .odd {
	background: #fff;
}

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

CSS

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

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

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

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

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

Вывод классов с помощью PHP

В скрипте используется префиксный инкремент ++$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