Как сделать полосатую таблицу
Короткий ответ
Закрасьте каждую вторую строку селектором :nth-child(even):
<style>
table { border-collapse: collapse; }
th, td { padding: 6px 12px; text-align: left; }
tbody tr:nth-child(even) { background: whitesmoke; }
</style>
<table>
<thead><tr><th>Product</th><th>Price</th></tr></thead>
<tbody>
<tr><td>Tea</td><td>$3</td></tr>
<tr><td>Coffee</td><td>$5</td></tr>
<tr><td>Juice</td><td>$2</td></tr>
<tr><td>Water</td><td>$1</td></tr>
</tbody>
</table>even — чётные строки, odd — нечётные. Селектор начинается с tbody, чтобы строка заголовка не участвовала в счёте.
Другие чередования
В скобках :nth-child() можно написать формулу. 3n выбирает каждую третью строку, 4n + 1 — первую из каждых четырёх. Так делают полосы группами, например по неделям в расписании.
Подсветка при наведении
В широкой таблице глаз легко соскальзывает на соседнюю строку. Подсветка под курсором помогает:
<style>
table { border-collapse: collapse; }
td { padding: 6px 12px; }
tr:nth-child(even) { background: whitesmoke; }
tr:hover { background: lightyellow; }
</style>
<table>
<tr><td>Anna</td><td>Design</td><td>$25</td></tr>
<tr><td>Oleg</td><td>Code</td><td>$30</td></tr>
<tr><td>Maria</td><td>Tests</td><td>$20</td></tr>
</table>Частая ошибка
Полосы задают классами class="odd" вручную в каждой строке. Стоит удалить или добавить строку, и чередование сбивается — две серые подряд. :nth-child пересчитывает строки сам.
Функции из этого ответа
- :nth-child() — Выбирает детей по их номеру: третий, каждый чётный, каждый третий.
- <table> — Таблица из строк `<tr>` и ячеек.
- <thead>, <tbody>, <tfoot> — Группы строк таблицы: шапка, тело и итоговая часть.
- :hover — Срабатывает, пока над элементом находится указатель мыши.
- background-color — Цвет фона элемента.