Как сделать расстояние между ячейками в html
Перейти к содержимому

Как сделать расстояние между ячейками в html

  • автор:

Как установить расстояние между ячеек?

Расстояние между ячеек заметно при использовании границ вокруг ячеек или при заливке ячеек цветом, который выделяется на фоне веб-страницы. Для управления расстоянием между ячеек используется стилевое свойство border-spacing. Если задано единственное значение, то оно устанавливает расстоянием между соседними ячейками. Если задать два значения, то первое определяет расстояние по горизонтали (т. е. слева и справа от ячейки), а второе — по вертикали (сверху и снизу).

В примере 1 показано добавление свойства border-spacing к селектору table .

Пример 1. Использование border-spacing

Расстояние между ячеек

Леонардо 5 8
Рафаэль 4 11
Микеланджело 24 9
Донателло 2 13

Результат данного примера показан на рис. 1.

Вид таблицы при использовании border-spacing

Рис. 1. Вид таблицы при использовании border-spacing

При добавлении к селектору table свойства border-collapse со значением collapse , значение border-spacing игнорируется, вид самой таблицы меняется (рис. 2).

Вид таблицы при использовании border-collapse с collapse

Рис. 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    
12
34

Результат данного примера показан на рис. 1.

Применение свойства border-spacing

Рис. 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> 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *