Свойство border-spacing задает отступ между ячейками td или ячейками th HTML таблицы (и между границей ячейки и самой таблицы).

Данное свойство - CSS аналог атрибута cellspacing, при этом оно имеет больший приоритет (если задан border-spacing - cellspacing игнорируется).

Внимание! Если вам кажется, что аналогичного эффекта вы сможете добиться с помощью margin - я вас разочарую: margin для ячеек таблицы не работает (только padding).

Внимание! Применяйте свойство для таблиц, а не для ее ячеек (для ячеек просто не будет работать). Отсюда следствие: нельзя задать разный border-spacing ячейкам в одной таблице.

Внимание! Если задано свойство border-collapse в значении collapse - border-spacing работать не будет.

Синтаксис

селектор {
	border-spacing: 10px | 10px 20px;
}

Значения

Значение Описание
Одно число Отступы между ячейками по вертикали и по горизонтали.
Два числа Первое число - отступ по горизонтали, второе число - отступ по вертикали.

Значение по умолчанию: 0.

Однако, каждый браузер имеет свое, ненулевое значение атрибута cellspacing, поэтому по умолчанию вы увидите отступы между ячейками. Они убираются с помощью cellspacing = "0" или border-spacing: 0;

Можно использовать любые CSS единицы, кроме процентов.

Примеры

Примеры будут по следующей таблице:

<table>
	<tr>
		{1}
		{2}
		{3}
	</tr>
	<tr>
		{4}
		{5}
		{6}
	</tr>
	<tr>
		{7}
		{8}
		{9}
	</tr>
</table>

Пример . Одно число

Отступы между ячейками (и между ячейкой и границей таблицы) станут 10px:

table {
	width: 400px; 
	border-collapse: separate; 
	border-spacing: 10px; 
	border: 1px solid red; 
}
td {
	border: 1px solid red; 
	text-align: center; 
}

Результат выполнения кода:

1 2 3
4 5 6
7 8 9

Пример . Два числа

Отступы между ячейками (и между ячейкой и границей таблицы) станут 10px по горизонтали и 30px по вертикали:

table {
	width: 400px; 
	border-collapse: separate; 
	border-spacing: 10px 30px; 
	border: 1px solid red; 
}
td {
	border: 1px solid red; 
	text-align: center; 
}

Результат выполнения кода:

1 2 3
4 5 6
7 8 9

Пример . Зададим border-collapse: collapse

А вот теперь border-spacing работать не будет из-за свойства border-collapse в значении collapse:

table {
	width: 400px; 
	border-collapse: collapse; 
	border-spacing: 10px 30px; 
	border: 1px solid red; 
}
td {
	border: 1px solid red; 
	text-align: center; 
}

Результат выполнения кода:

1 2 3
4 5 6
7 8 9