Добавление отступов между элементами TBODY в HTML-таблице

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

Чтобы вставить отступ между элементами TBODY, следует применить следующий CSS-код:

tbody:not(:last-child)::before {
    content: "";
    display: block;
    height: 10px;
}

Используя :not(:last-child) удалится дополнительное пространство после последнего TBODY.

Практические решения и трюки с отступами

Отступ с использованием псевдоэлемента: возможности призрачной строки

Для создания видимого пространства между блоками TBODY удобно воспользоваться псевдоэлементам ::before или ::after. Необходимо:

1. Превратить TBODY в блочный элемент.
2. Создать псевдоэлемент ::before с блочным отображением и нулевым содержимым.
3. Задать высоту ::before, которая определит размер отступа.

tbody {
    display: block;
}

tbody:not(:last-child)::before {
    content: "";
    display: block;
    height: 15px;
}

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

Визуальный отступ через верхнюю границу: создаем границы

Вместо отступа может использоваться верхняя граница для TBODY:

table {
    border-collapse: collapse;
}

tbody:not(:first-child) {
    border-top: 5px solid #000;
}

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

Отступ без границ: легкость в дизайне

Если границы вам не нужны, просто уберите их у TBODY:

tbody:not(:last-child) {
    border-bottom: none;
}

Так можно сделать дизайн более чистым и изящным.

Разбор подводных камней и тонкостей

Совместимость CSS: внимание к деталям

При работе с отступами не стоит забывать о поддержке в разных браузерах. Некоторые старые версии могут не поддерживать псевдоэлементы и display: block; для TBODY.

Понимание collapse границ: изучаем детали

border-collapse объединяет соседние границы, в отличие от separate, позволяющего их оставить раздельными. Этот аспект следует учитывать при разработке дизайна.

Дизайн с изыском: подходите к выбору внимательно

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

Визуализация

Можно представить TBODY как вагоны поезда, соединенные невидимыми связями:

До: 🚃🚃🚃

Вагоны смыкаются друг с другом.

После добавления отступов они становятся такими:

После: 🚃—🚃—🚃

Черточки ('—') обозначают невидимые разделители между вагонами.

Такой подход помогает визуально отделить части таблицы друг от друга.

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

1. Полный гид по элементу таблицы | CSS-Tricks — Обзор использования элементов таблицы, включая <tbody>.
2. Элемент тела таблицы – HTML: HyperText Markup Language | MDN — Официальное руководство MDN по элементу <tbody>.
3. HTML тег table — Обзор использования и типичных ошибок с тегом <table>, как и использование элемента <tbody>.
4. Отслеживание изменений с Subversion и Google Code – Stack Overflow — Обсуждение на Stack Overflow о том, как правильно делать отступы для <tbody>.
5. Создание доступных таблиц – Данные таблиц — Важное руководство по созданию доступных таблиц, включая использование <tbody>.