Как установить расстояние между ячеек?
Расстояние между ячеек заметно при использовании границ вокруг ячеек или при заливке ячеек цветом, который выделяется на фоне веб-страницы. Для управления расстоянием между ячеек используется стилевое свойство 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
- Оформление таблиц
Рамка и отступы 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 .
Отступы внутри ячеек
Вы освоили простейшие приёмы для работы с рамками таблиц. Наша таблица уже смотрится аккуратно, но содержимое ячеек прилипает к рамкам. Если добавить отступы внутри ячеек, то информация будет восприниматься намного лучше.
CSS-свойство padding задаёт «внутренние отступы элемента» со всех сторон. Можно задавать отступы для каждой из сторон отдельно, используя свойства:
- padding-top ,
- padding-right ,
- padding-bottom ,
- padding-left .
Например, чтобы задать у ячеек все отступы в 10 пикселей, а отступ слева в 20 пикселей, нужно написать такой CSS-код:
Перейти к заданию
- index.html Сплит-режим
- style.css Сплит-режим
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 таблицы.