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

Итак, все, что нам нужно — это понимание селектора nth-child.

Пример стилей, прописанных в моем блоге для подсветки строк таблицы:

/* Четные */
table tr:nth-child(2n) td{ background: #f5d19b; }
/* Нечетные */
table tr:nth-child(2n+1) td{ background: #fcf2e2; }

Как видите селектор :nth-child(2n) позволяет обратиться к каждой второй строке — начиная с второй — т.е. 2, 4, 6 ,8 и т.д. Тогда как селектор :nth-child(2n+1) окрашивает каждую вторую строку, начиная с первой — т.е. 1, 3, 5, 7, 9 и т.д.

Естественно, селекторы применимы не только к строкам таблицы — а к любым тегам — например, к аналогичной окраске блоков или элементов списка.