Блог студии веб-дизайна «Make a Site» Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Четные и нечетные строки таблицы и другие элементы в CSS

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

Четные и нечетные строки таблицы и другие элементы в CSS

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

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

<tr class='odd'>
...
</tr>
<tr class='even'>
...
</tr>

Здесь чередуются классы odd и even, для которых можно устанавливать различные стили. Все просто и понятно и обсуждать тут совершенно нечего. Данный способ — это совсем не то, чего бы нам хотелось добиться.

Если речь пойдет об огромной таблице данных, которая должна генерироваться налету, то статика нам уже не подойдет. В таком случае строки таблицы будут выводиться при помощи цикла:

$c='odd';
for($i=1;$i<=10;$i++) {
	echo '<tr class="'.$c.'">...</tr>';
	if($c == 'odd') $c = 'even'; else $c = 'odd';
}

Здесь мы просто по очереди присваиваем класс odd и even каждой строке таблицы. Можно вообще присваивать особый класс только каждой второй строке, стили которой будут перекрывать стили, используемые для всех строк таблицы по умолчанию. Все тоже очень просто и понятно и смысл от этого никак не поменялся. Нас же интересует более изящное решение, когда нам не придется устанавливать классы для каждой строки таблицы.

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

Давайте рассмотрим его действие на самом простом примере:

table tr:nth-child(odd) {
	background: #fff;
	color: #000;
}
table tr:nth-child(even) {
	background: #000;
	color: #fff;
}

Чет и нечет — довольно частные случаи, поэтому их можно обозначить с помощью специально созданных для них аргументов even и odd. К тому же самому результату приведет и такой способ записи:

table tr:nth-child(2n+1) {
	background: #fff;
	color: #000;
}
table tr:nth-child(2n) {
	background: #000;
	color: #fff;
}

В данном примере n – это переменная, которой по очереди будут присваиваться значения 0, 1, 2, 3, 4, 5... и так далее. Иными словами — все целые положительные числа, начиная от нуля. Выполнив простейшие вычислительные операции в уме, вы поймете, какие именно номера элементов в наборе попадут под влияние того или иного класса.

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



Предыдущая статья:
Оптимальный размер статьи для сайта

Читайте также:
Санкции поисковых систем и причины их наложения

Возможно, вам это интересно:



Блог студии веб-дизайна «Make a Site».
Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Текущий проект: «Stream Booster» — раскрутка Twitch и YouTube каналов

Студия веб-дизайна «Make a site»