Добавление пространства между строками таблицы в CSS

Быстрый ответ

Для формирования интервала между строками таблицы используйте атрибут padding-bottom со всеми ячейками <td> или <th>:

<tr>
  <td style="padding-bottom: 10px;">Верхняя строка</td>
</tr>
<tr>
  <td>Нижняя строка</td>
</tr>

В этом случае под каждой ячейкой верхней строки вы создадите отступ в 10 пикселей. Изменяя значение padding-bottom, вы регулируете размер интервала.

Практические приёмы для точной настройки интервалов между строками

Использование интервалов с помощью CSS-классов

Вместо использования инлайновых стилей лучше отдать предпочтение CSS-классам. Допустим, вы создали класс .spaceUnder, который добавит пространство под нужными строками:

/* Обеспечиваем пространственное дистанцирование ячеек таблицы */
tr.spaceUnder > td {
  padding-bottom: 1em;
}

Такой подход улучшает читаемость HTML-кода и централизует стили.

Подробнее об этом расскажет наш спикер на видео

Работа с вложенными таблицами

В случае вложенных таблиц предотвратить ошибки стилизации иногда бывает сложнее, чем уговорить кошку играть в прятки. Решите эту проблему с помощью CSS:

/* Отбираем ячейки, внутри которых нет таблиц */
tr.spaceUnder > td:not(:has(table)) {
  padding-bottom: 1em;
}

Регулирование отступов между строками с помощью свойства границы

Свойство border-spacing может регулировать пространство между строками, несмотря на своё название. Но его следует применять к элементам <table> или <tbody>, а не к <tr>:

table {
  border-collapse: separate; /* У границ тоже должно быть личное пространство */
  border-spacing: 0 1em; /* по горизонтали и вертикали */
}

Важно заметить: border-spacing эффективно работает только при условии, что border-collapse установлен в separate.

Использование пустых строк для создания дополнительного пространства

Пустые элементы <tr class="spacer"> с установленной высотой могут формировать необходимый промежуток без изменения дизайна:

<!-- Несколько имперцептивная строка, контролирующая интервал между строками -->
<tr class="spacer" style="height: 20px;"></tr>

Не забывайте делать такие строки невидимыми, чтобы сохранять консистентность дизайна таблицы.

Стратегии визуального разделения с придерживанием стиля

Использование границ для создания пространства

Прозрачная верхняя граница может служить ненавязчивым разделителем между строками:

/* Каждая следующая строка оборудуется невидимым "колпаком" */
tr + tr {
  border-top: 5px solid transparent;
}

Сохранение стабильности стилей таблицы

Для того чтобы интервалы не "вносили раздор" в дизайн таблицы, установите table-layout: fixed;:

table {
  table-layout: fixed; /* Конкретное пространственное решение */
}

Визуальное разделение при помощи <tbody>

Разделите строки на несколько групп элементов <tbody>, чтобы они звучали хором, но с определённым расстоянием друг от друга:

<table>
  <tbody class="group-spacing">
    <!-- сопрано -->
  </tbody>
  <tbody class="group-spacing">
    <!-- басы -->
  </tbody>
</table>

И для этого "вокального ансамбля" потребуется "дирижёр":

tbody.group-spacing {
  border-spacing: 0 1em;
}

Совместимость с браузерами

Убедитесь в том, что ваш код совместим со всеми браузерами, некоторые методы, такие как использование border-spacing, могут создавать трудности для старых версий Internet Explorer (IE).

Проработка нюансов для всех возможных вариантов использования

Отзывчивый дизайн таблиц

Адаптация таблиц под разные размеры экранов может сравниваться с попыткой "вместить слона в "Mini Cooper". Используйте медиазапросы для корректировки интервалов с учётом разных устройств.

Таблицы с богатым содержанием

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

Важность доступности

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

Полезные материалы

1. Полное руководство по элементам таблице от CSS-Tricks — Загляните и ознакомьтесь с основными подходами к стилизации таблиц при помощи CSS.
2. Элемент группы столбцов таблицы от MDN — От руководства MDN, которое объясняет использование <colgroup> для управления стилями столбцов таблицы.
3. Стилизация таблиц на w3schools — Демонстрация ярких примеров применении CSS-стилей к HTML-таблицам.
4. CSS Zen Garden: Красота CSS-дизайна — Позвольте себя вдохновиться потенциалом креативного подхода к стилизации таблиц при помощи CSS.
5. HTML Стандарт — Детальные спецификации, связанные с элементами <table>.