Таблицы в CSS: оформление ячеек, границ, заголовков, зебра-стиль

Основы оформления таблиц в CSS

Таблицы — это мощный инструмент для структурирования данных, но без стилизации они выглядят скучно. Давайте превратим стандартные HTML-таблицы в элегантные и читаемые элементы интерфейса!

Базовая структура таблицы

Перед стилизацией убедимся, что HTML-разметка корректна:

<table>
  <thead>
    <tr>
      <th>Заголовок 1</th>
      <th>Заголовок 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Данные 1</td>
      <td>Данные 2</td>
    </tr>
  </tbody>
</table>

Стилизация границ

Границы — первое, что бросается в глаза. Управляем ими через border:

table {
  border-collapse: collapse; /* Убираем двойные границы */
  width: 100%; /* Растягиваем на всю ширину */
}

th, td {
  border: 1px solid #ddd; /* Тонкая серая граница */
  padding: 12px; /* Внутренние отступы */
}

💡 border-collapse: collapse — обязательное свойство! Без него границы ячеек будут «раздвоенными».

Оформление заголовков

Заголовки (<th>) должны выделяться. Добавим контрастный фон и жирный текст:

th {
  background-color: #4CAF50; /* Зелёный фон */
  color: white; /* Белый текст */
  text-align: left; /* Выравнивание по левому краю */
}

🔥 Профессиональный приём: Добавьте position: sticky; top: 0; к th, чтобы заголовки оставались на виду при прокрутке.

Зебра-стиль для строк

Чередование цветов строк (zebra-stripe) улучшает читаемость. Используем :nth-child():

tbody tr:nth-child(even) {
  background-color: #f2f2f2; /* Серый фон для чётных строк */
}

tbody tr:hover {
  background-color: #ddd; /* Подсветка при наведении */
}

Выравнивание содержимого

Текст в ячейках можно выравнивать горизонтально и вертикально:

td {
  text-align: center; /* По центру горизонтально */
  vertical-align: middle; /* По центру вертикально */
}

⚡ Важно: Для vertical-align таблица или ячейка должна иметь явную высоту.

Адаптивные таблицы

Если таблица не помещается на экране, оберните её в контейнер с прокруткой:

.table-container {
  overflow-x: auto; /* Горизонтальная прокрутка */
}

table {
  min-width: 600px; /* Минимальная ширина */
}

Пример полного стиля

Соберём всё вместе:

table {
  border-collapse: collapse;
  width: 100%;
  font-family: Arial, sans-serif;
  margin: 20px 0;
}

th {
  background-color: #4CAF50;
  color: white;
  padding: 12px;
  text-align: left;
  position: sticky;
  top: 0;
}

td {
  padding: 10px;
  border: 1px solid #ddd;
}

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

tbody tr:hover {
  background-color: #ddd;
}

Итог

Границы: border-collapse: collapse + border.
Заголовки: Контрастный фон и sticky-позиционирование.
Зебра-стиль: :nth-child(even) + :hover.
Адаптивность: Контейнер с overflow-x: auto.

Теперь ваши таблицы выглядят профессионально! Для вдохновения загляните в гайд Данилы Бежина по современному CSS.