Уласцівасць border-spacing

Уласцівасць border-spacing задае адступ паміж ячэйкамі td ці ячэйкамі th HTML табліцы (і паміж мяжой ячэйкі і самой табліцы). Значэннем уласцівасці служаць любыя адзінкі вымярэння памераў, акрамя працэнтаў.

Сінтаксіс

селектар {
	border-spacing: адно ці два значэнні;
}

Значэнні

Значэнне	Апісанне
адно значэнне	Адно значэнне задае аднолькавыя адступы паміж ячэйкамі па вертыкалі і па гарызанталі.
два значэнні	Першае значэнне задае адступ па гарызанталі, а другое значэнне - адступ па вертыкалі.

Значэнне па змаўчанні: 0. Аднак, кожны браўзэр мае ўласнае, ненулявое значэнне атрыбута cellspacing, таму па змаўчанні вы ўбачыце адступы паміж ячэйкамі.

Заўвагі

Ужывайце ўласцівасць для табліц, а не для яе ячаек (для ячаек не будзе працаваць).

Аналагічнага эфекту нельга дабіцца з дапамогай margin, бо margin для ячаек табліцы не працуе.

Калі зададзена ўласцівасць border-collapse у значэнні collapse - border-spacing працаваць не будзе.

Прыклад . Адно значэнне

Давайце зробім адступы паміж ячэйкамі (і паміж ячэйкай і мяжой табліцы) ў 10px:

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

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

Прыклад . Два значэнні

А цяпер зробім адступы ў 10px па гарызанталі і 30px па вертыкалі:

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

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:

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

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