Border-spacing xususiyati

border-spacing xususiyati HTML jadvalining td yoki th kataklari orasidagi (va katak chegarasi bilan jadval o'zi orasidagi) masofani belgilaydi. Xususiyat qiymati sifatida foizlardan tashqari har qanday o'lchov birliklari ishlatilishi mumkin.

Sintaksis

selector {
	border-spacing: bitta yoki ikkita qiymat;
}

Qiymatlar

Qiymat	Ta'rif
bitta qiymat	Bitta qiymat kataklar orasidagi gorizontal va vertikal masofani bir xil belgilaydi.
ikkita qiymat	Birinchi qiymat gorizontal, ikkinchi qiymat esa vertikal masofani belgilaydi.

Standart qiymat: 0. Biroq, har bir brauzerning cellspacing atributi uchun nolga teng bo'lmagan o'z standart qiymati mavjud, shuning uchun standart holatda siz kataklar orasida masofani ko'rasiz.

E'tiborlar

Xususiyatni jadvalning o'ziga qo'llang, uning alohida kataklariga emas (kataklar uchun ishlamaydi).

margin yordamida shu ta'sirga erishib bo'lmaydi, chunki jadval kataklari uchun margin ishlamaydi.

Agar border-collapse xususiyati collapse qiymatida o'rnatilgan bo'lsa, border-spacing ishlamaydi.

Misol . Bitta qiymat

Keling, kataklar orasidagi (va katak bilan jadval chegarasi orasidagi) masofani 10px qilaylik:

<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;
}

Misol . Ikkita qiymat

Endi esa gorizontal masofani 10px, vertikal masofani esa 30px qilaylik:

<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;
}

Misol . Border-collapse: collapse ni o'rnatamiz

Endi esa border-spacing border-collapse xususiyati collapse qiymatida o'rnatilganligi sababli ishlamaydi:

<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;
}