HTML Стилизация таблиц

Чтобы сделать ваши таблицы привлекательнее, используйте CSS.

---

Таблица HTML — Полосатый эффект

Если добавить фоновый цвет каждому второму ряду таблицы, получится приятный полосатый эффект зебры.

Чтобы оформить каждый второй ряд таблицы, используйте селектор :nth-child(even) следующим образом:

tr:nth-child(even) {
  background-color: #D6EEEE;
}

Примечание: Если использовать (odd) вместо (even), оформление будет происходить на рядах 1, 3, 5 и так далее, а не на 2, 4, 6 и так далее.

---

Таблица HTML — Вертикальные полосы

Чтобы сделать вертикальные полоски, оформляйте каждую вторую колонку, а не каждый второй ряд.

Установите селектор :nth-child(even) для элементов <td> и <th> следующим образом:

td:nth-child(even),
th:nth-child(even) {
  background-color: #D6EEEE;
}

Примечание: Укажите селектор :nth-child() как для элемента <th>, так и для <td>, если хотите, чтобы оформление действовало и на шапку таблицы, и на ячейки.

---

Совместное применение горизонтальных и вертикальных полос

Вы можете объединить оформление из двух предыдущих примеров и получить полоски на каждом втором ряду и на каждой второй колонке.

Если выбрать прозрачный цвет, появится наложенный эффект.

Используйте CSS функцию 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);
}

---

Горизонтальные разделители

Если задать рамку только внизу каждого ряда таблицы, вы получите таблицу с горизонтальными разделителями.

Добавьте свойство border-bottom ко всем элементам <tr>, чтобы получить горизонтальные разделители:

tr {
  border-bottom: 1px solid #ddd;
}

---

Подсветка строки при наведении мыши

Используйте селектор :hover с элементом <tr>, чтобы подсвечивать ряды таблицы при наведении мышью:

tr:hover {
  background-color: #D6EEEE;
}