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

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

HTML таблица — полосы зебры

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

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

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

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

Чтобы сделать вертикальные полоски зебры, стилизуйте каждую вторую колонку:

Комбинируем вертикальные и горизонтальные полосы зебры

Вы можете комбинировать стиль из двух приведенных выше примеров, и у вас будут полосы в каждой второй строке и каждом втором столбце.

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

Используйте цвет rgba(), чтобы указать прозрачность цвета:

tr:nth-child(even) {
   background-color: rgba(170,170,170,0.025);
}

th:nth-child(even), td:nth-child(even) {
   background-color: rgba(170,170,170,0.025);

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

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

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

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

Парящяя таблица (Hover)

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

tr:hover {background-color: #89abcc;}

☛ Группа столбцов таблиц HTML

Диапазон столбцов строк HTML ☚