Для того чтобы таблица на сайте визуально более приятно и легко читалась — хорошо помогает чередование цветов, или затемнение(осветление) четных рядов. Для этого можно использовать селектор CSS3 :nth-child
, чтобы сделать чередование фона для строк таблицы. Визуально это помогает пользователю ориентироваться в таблице.
Псевдокласс :nth-child(N)
принимает аргумент N
, который может быть ключевым словом, числом или числовым выражением в форме xn+y
, где x
и y
— целые числа (например, 1n
, 2n
, 3n
, 2n+1
, 3n-2
, …). Посмотрим следующий пример, чтобы увидеть, как это работает:
<style> table {margin: 30px; border-collapse: collapse;} table tr{border-bottom: 1px solid #666;} table tr:nth-child(2n){background: #f2f2f2;} table th, table td{ padding: 10px;} </style> <table> <tbody> <tr> <th>Row</th> <th>First Name</th> <th>Last Name</th> <th>Email</th> </tr> <tr> <td>1</td> <td>John</td> <td>Carter</td> <td>johncarter@mail.com</td> </tr> <tr> <td>2</td> <td>Peter</td> <td>Parker</td> <td>peterparker@mail.com</td> </tr> <tr> <td>3</td> <td>John</td> <td>Rambo</td> <td>johnrambo@mail.com</td> </tr> <tr> <td>4</td> <td>Harry</td> <td>Potter</td> <td>harrypotter@mail.com</td> </tr> </tbody> </table>