border-spacing касиети

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

Синтаксис

селектор {
	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;
}