html.okpython.net
HTML и CSS для начинающих

CSS :: Свойство border-spacing

css-свойство border-spacing (от англ. border spacingрасстояние между границами) используется для установки расстояния между границами ячеек таблицы, когда значение свойства border-collapse установлено в separate.

Характеристики

  • Значение по умолчанию: 0.
  • Применяется: к элементу <table>, а также к элементам, у которых значение display установлено в table или inline-table.
  • Наследуется: да.
  • Анимируется: нет.
  • JavaScript: object.style.borderSpacing="value".

Синтаксис

border-spacing: <интервал> [<интервал>]

Значения

В качестве интервала принимаются любые единицы измерения (смотреть), используемые в CSS. При этом проценты использовать не разрешается.

Если используется одно значение интервала, то оно задает расстояние между границами ячеек как по горизонтали, так и по вертикали. Также разрешается использовать через пробел два значения: первое будет задавать расстояние между границами ячеек по горизонтали, а второе - по вертикали.

Ссылки

Примеры

HTML Результат htmlCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
		table{
		width: 50%;
		margin-top: 3em;
		border: 1px solid green;
		border-collapse: separate;
		}
		
		td{
		border: 1px solid green;
		}

		.spacing_1{
		border-spacing: 5px;
		}
		
		.spacing_2{
		border-spacing: 0.8em;
		}
		
	</style>
	
</head>
<body>
	
	<table class="spacing_1">
		<caption>Интервал между границами 5px</caption>
		<tr>
			<td>Ячейка 1.1</td><td>Ячейка 1.2</td>
		</tr>
		<tr>
			<td>Ячейка 2.1</td><td>Ячейка 2.2</td>
		</tr>
	</table>	
	
	
	<table class="spacing_2">
		<caption>Интервал между границами 0.8em</caption>
		<tr>
			<td>Ячейка 1.1</td><td>Ячейка 1.2</td>
		</tr>
		<tr>
			<td>Ячейка 2.1</td><td>Ячейка 2.2</td>
		</tr>
	</table>
		
</body>
</html>	

Пример №1