Рамка и отступы HTML-таблицы
Вид, толщину, цвет рамки таблицы определяет свойство border . Его можно указать в атрибуте style .
Установить рамку каждой ячейке также можно с помощью атрибута style . Но предпочтительней стиль вынести в тег style или файл .css : кода меньше, возможности шире, удобства больше (чтобы изменить цвет рамки у всех ячеек, достаточно поменять значение один раз).
border-spacing : расстояние между ячейками таблицы
слева+справа
сверху+снизу initial 0 inherit наследует значение родителя unset наследует значение родителя
.raz < border-spacing: 0; /* или */ border-spacing: 0 0; /*border-collapseнаследуется, применяется только кtableилиinline-tableэлементам сborder-collapse: separate;*/ > .raz, .raz td
Убрать промежутки от ячеек до краёв таблицы
/* один из возможных вариантов сделать отступы вокруг ячеек таблицы */ .raz < border-spacing: 0; padding: 0 2em 3em 0; /* значенияleftиtopпоследних ячеек */ > .raz, .raz td < position: relative; border: 1px solid red; >.raz td:nth-child(2) < left: 1em; >.raz td:nth-child(3) < left: 2em; /* каждая дополнительная ячейка сдвигается на +1 единицу */ > .raz tr:nth-child(2) td < top: 1em; >.raz tr:nth-child(3) td < top: 2em; >.raz tr:nth-child(4) td
empty-cells : наличие границ и фона у пустых ячеек
show у пустой ячейки есть граница и фон hide у пустой ячейки нет границы и фона initial show inherit наследует значение родителя unset наследует значение родителя
.raz < empty-cells: show; /*empty-cellsнаследуется, применяется только кtableилиinline-tableэлементам сborder-collapse: separate;*/ > .raz, .raz td < border: 1px solid red; >.raz td
border-collapse : схлопывание границ ячеек
separate у каждой ячейки и таблицы в целом своя граница, игнорируется свойство border у thead , tfoot , tbody и tr collapse между ячейками и контейнером единая граница, отсутствуют двойные рамки таблицы, игнорируются свойства border-spacing , empty-cells , padding у table initial separate inherit наследует значение родителя unset наследует значение родителя
Жирные внешние границы таблицы
.raz < border-collapse: collapse; border: 4px solid red; > .raz td
Таблица без границ аки сетка без внешней рамки
.raz < border-collapse: collapse; border-style: hidden; > .raz td
Свойство border у tr
Свойство padding у table при border-collapse: collapse;
.raz < border-collapse: collapse; outline: 1px solid red; /* outline можно задавать только для четырёх сторон одновременно */ outline-offset: 2px; margin: 3px; /* outline-width + outline-offset = 1px + 2px = 3px */ > .raz, .raz td
Отступы внутри ячейки таблицы
Расстояние от содержимого до края ячейки определяет свойство padding .
Свойство border-spacing
Свойство border-spacing задает отступ между ячейками td или ячейками th HTML таблицы (и между границей ячейки и самой таблицы). Значением свойства служат любые единицы для размеров, кроме процентов.
Синтаксис
Значения
| Значение | Описание |
|---|---|
| одно значение | Одно значения задает одинаковые отступы между ячейками по вертикали и по горизонтали. |
| два значения | Первое значение задает отступ по горизонтали, а второе значение — отступ по вертикали. |
Значение по умолчанию: 0 . Однако, каждый браузер имеет свое, ненулевое значение атрибута cellspacing , поэтому по умолчанию вы увидите отступы между ячейками.
Замечания
Применяйте свойство для таблиц, а не для ее ячеек (для ячеек не будет работать).
Аналогичного эффекта нельзя добиться с помощью margin , так как margin для ячеек таблицы не работает.
Если задано свойство border-collapse в значении collapse — border-spacing работать не будет.
Пример . Одно значение
Давайте сделаем отступы между ячейками (и между ячейкой и границей таблицы) в 10px :
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
table < border-spacing: 10px; border-collapse: separate; width: 400px; border: 1px solid red; >td < border: 1px solid red; text-align: center; >
Пример . Два значения
А теперь сделаем отступы в 10px по горизонтали и 30px по вертикали:
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
table < border-spacing: 10px 30px; border-collapse: separate; width: 400px; border: 1px solid red; >td < border: 1px solid red; text-align: center; >
Пример . Зададим border-collapse: collapse
А вот теперь border-spacing работать не будет из-за свойства border-collapse в значении collapse :
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
table < border-collapse: collapse; border-spacing: 10px 30px; width: 400px; border: 1px solid red; >td < border: 1px solid red; text-align: center; >
border — spacing
Свойство для управления расстоянием между рамками ячеек таблицы.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Обновлено 8 ноября 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство border — spacing задаёт отступ между рамками ячеек таблицы.
Пример
Скопировать ссылку «Пример» Скопировано
table border-spacing: 10px;>table border-spacing: 10px; >
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Разрешается указывать одно или два неотрицательных значения:
- border — spacing : 1px — расстояние между ячейками со всех сторон одинаковое.
- border — spacing : 1px 2px — первое значение задаёт расстояние между ячейками по горизонтали, второе — по вертикали.
Как понять
Скопировать ссылку «Как понять» Скопировано
Свойство border — spacing задаёт расстояние между ячейками таблицы. Это свойство работает только для таблиц со свойством border — collapse в значении separate .
Отступ также будет появляться вокруг таблицы, поэтому расстояние между ячейками таблицы и её рамкой будет складываться из значений border — spacing и padding таблицы.
Как установить расстояние между ячеек?
Расстояние между ячеек заметно при использовании границ вокруг ячеек или при заливке ячеек цветом, который выделяется на фоне веб-страницы. Для управления расстоянием между ячеек используется стилевое свойство border-spacing. Если задано единственное значение, то оно устанавливает расстоянием между соседними ячейками. Если задать два значения, то первое определяет расстояние по горизонтали (т. е. слева и справа от ячейки), а второе — по вертикали (сверху и снизу).
В примере 1 показано добавление свойства border-spacing к селектору table .
Пример 1. Использование border-spacing
| Леонардо | 5 | 8 |
| Рафаэль | 4 | 11 |
| Микеланджело | 24 | 9 |
| Донателло | 2 | 13 |
Результат данного примера показан на рис. 1.
Рис. 1. Вид таблицы при использовании border-spacing
При добавлении к селектору table свойства border-collapse со значением collapse , значение border-spacing игнорируется, вид самой таблицы меняется (рис. 2).
Рис. 2. Вид таблицы при использовании border-collapse с collapse
См. также
- border-collapse
- border-spacing
- Оформление таблиц