Стили 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)
селектор следующим образом:
Пример
tr:nth-child(even) {
background-color: #D6EEEE;
}
Примечание. Если вы используете (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)для элементов данных таблицы следующим образом:
Пример
td:nth-child(even),
th:nth-child(even) {
background-color: #D6EEEE;
}
Примечание. Поместите :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);
}
Горизонтальные разделители
| Имя | Фамилия | Экономия |
|---|---|---|
| Питер | Грифон | 100 долларов |
| Лоис | Грифон | 150 долларов |
| Джо | Суонсон | 300 долларов |
Если вы укажете границы только внизу каждой строки таблицы, у вас будет таблица с горизонтальными разделителями.
Добавьте border-bottomсвойство ко всем
trэлементам, чтобы получить горизонтальные разделители:
Пример
tr {
border-bottom: 1px solid #ddd;
}
Парящий стол
Используйте :hoverселектор,
trчтобы выделить строки таблицы при наведении указателя мыши:
| Имя | Фамилия | Экономия |
|---|---|---|
| Питер | Грифон | 100 долларов |
| Лоис | Грифон | 150 долларов |
| Джо | Суонсон | 300 долларов |
Пример
tr:hover {background-color: #D6EEEE;}