HTML Стилизация таблиц
Используйте CSS, чтобы ваши таблицы имели лучший (стилизованный) вид.
HTML-таблица – Полосы зебры
Если вы добавите цвет фона в каждую вторую строчку таблицы, вы получите красивый эффект полос зебры.
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
Чтобы стилизовать любой другой элемент строки таблицы, используйте селектор :nth-child(even), как показано ниже:
Примечание: Если вы используете (odd) (непарный) вместо (even) (парный), стилизация будет применена к строкам 1,3, 5 и т.д. вместо 2,4,6 и т.д.
HTML Таблица - Вертикальные полосы зебры
Чтобы сделать вертикальные полосы зебры, настройте стиль для каждого второго столбца, а не для каждой второй строки.
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
Установите :nth-child(even) для элементов данных таблицы следующим образом:
Примечание: Разместите селектор :nth-child() как на th, так и на td элементах, если вы хотите, чтобы стиль применялся как к заголовкам, так и к обычным ячейкам таблицы.
Комбинируйте вертикальные и горизонтальные полосы зебры.
Вы можете комбинировать стили из двух приведенных выше примеров, и у вас будут полосы в каждой второй строке и в каждом втором столбце.
Если используется прозрачный цвет, вы получите эффект перекрытия.
Используйте цвет rgba(), чтобы указать прозрачность цвета:
Пример
tr:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}
th:nth-child(even),td:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}
Попробуйте сами »
Горизонтальные разделители
| Имя | Фамилия | Зарплата |
|---|---|---|
| Peter | Griffin | $1000 |
| Lois | Griffin | $1500 |
| Joe | Swanson | $3000 |
Если вы укажете пределы только снизу каждой строки таблицы, у вас будет таблица с горизонтальными разделителями.
Добавьте свойство border-bottom ко всем элементам tr, чтобы получить горизонтальные разделители:
Таблица при наведении
Используйте селектор :hover на tr, чтобы выделить строки таблицы при наведении указателя мыши:
| Имя | Фамилия | Зарплата |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
