Свойство 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;
}