border-spacing
Задает расстояние между границами ячеек в таблице. border-spacing не работает в случае, когда для таблицы установлено свойство border-collapse со значением collapse .
Синтаксис
border-spacing: значение1 [значение2]
Значения
Одно значение устанавливает одновременно расстояние по вертикали и горизонтали между границами ячеек. Если значений два, то первое определяет горизонтальное расстояние, а второе — вертикальное.
HTML5 CSS 2.1 IE Cr Op Sa Fx
border-spacing 1 2 3 4
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства border-spacing
Отступы внутри ячеек
Вы освоили простейшие приёмы для работы с рамками таблиц. Наша таблица уже смотрится аккуратно, но содержимое ячеек прилипает к рамкам. Если добавить отступы внутри ячеек, то информация будет восприниматься намного лучше.
CSS-свойство padding задаёт «внутренние отступы элемента» со всех сторон. Можно задавать отступы для каждой из сторон отдельно, используя свойства:
- padding-top ,
- padding-right ,
- padding-bottom ,
- padding-left .
Например, чтобы задать у ячеек все отступы в 10 пикселей, а отступ слева в 20 пикселей, нужно написать такой CSS-код:
Хотите начать карьеру веб-разработчика? Записывайтесь на профессию «Фронтенд-разработчик», которая стартует 12 декабря 2023. Всего от 4 130 ₽ в месяц.
Перейти к заданию
- index.html Сплит-режим
- style.css Сплит-режим
Как установить расстояние между ячеек?
Расстояние между ячеек заметно при использовании границ вокруг ячеек или при заливке ячеек цветом, который выделяется на фоне веб-страницы. Для управления расстоянием между ячеек используется стилевое свойство 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
- Оформление таблиц
Как сделать расстояния между ячейками таблицы, чтобы при этом по краям этой таблицы отступов от ячеек не было?
Если задавать таблице border-spacing: 5px; , например, то отступы появляются не только внутри вокруг ячеек, но и по краям также появляются отступы. Как желательно без костылей сделать, чтобы по краям (отмечены красными стрелками) не было отступов? 
Нужно вот-так: 
Отслеживать
задан 1 авг 2018 в 13:34
47 1 1 серебряный знак 6 6 бронзовых знаков
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Как вариант — отрицательные поля, равные значению border-spacing .
table < border-spacing: 10px; border-collapse: separate; margin: -10px; >td < padding: 1em; border: 1px solid; >body
1 2 3 4
Отслеживать
ответ дан 1 авг 2018 в 14:21
Sasha Omelchenko Sasha Omelchenko
12.8k 4 4 золотых знака 32 32 серебряных знака 61 61 бронзовый знак