Как установить расстояние между ячеек?
Расстояние между ячеек заметно при использовании границ вокруг ячеек или при заливке ячеек цветом, который выделяется на фоне веб-страницы. Для управления расстоянием между ячеек используется стилевое свойство 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
Свойство 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
Задает расстояние между границами ячеек в таблице. 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
border-spacing¶
Свойство border-spacing задаёт расстояние между границами ячеек в таблице.
border-spacing не работает в случае, когда для таблицы установлено свойство border-collapse со значением collapse .
Демо¶
Колонки и таблицы
- column-count
- column-fill
- column-gap
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- columns
Синтаксис¶
1 2 3 4 5 6 7 8 9 10
/* */ border-spacing: 2px; /* horizontal | vertical */ border-spacing: 1cm 2em; /* Global values */ border-spacing: inherit; border-spacing: initial; border-spacing: unset;
Значения¶
Одно значение устанавливает одновременно расстояние по вертикали и горизонтали между границами ячеек. Если значений два, то первое определяет горизонтальное расстояние, а второе — вертикальное.
Примечание¶
border-spacing: 0;
Применяется к таблицам
Спецификации¶
Описание и примеры¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
html> head> meta charset="utf-8" /> title>border-spacingtitle> style> table border: 4px double #333; /* Рамка вокруг таблицы */ border-collapse: separate; /* Способ отображения границы */ width: 100%; /* Ширина таблицы */ border-spacing: 7px 11px; /* Расстояние между ячейками */ > td padding: 5px; /* Поля вокруг текста */ border: 1px solid #a52a2a; /* Граница вокруг ячеек */ > style> head> body> table> tr> td>1td> td>2td> tr> tr> td>3td> td>4td> tr> table> body> html>