Sifat border-spacing

Sifat border-spacing menetapkan jarak antara sel td atau sel th jadual HTML (dan antara sempadan sel dan jadual itu sendiri). Nilai sifat adalah sebarang unit untuk saiz, kecuali peratusan.

Sintaks

pemilih {
	border-spacing: satu atau dua nilai;
}

Nilai

Nilai	Keterangan
satu nilai	Satu nilai menetapkan jarak yang sama antara sel secara menegak dan mendatar.
dua nilai	Nilai pertama menetapkan jarak mendatar, dan nilai kedua - jarak menegak.

Nilai lalai: 0. Walau bagaimanapun, setiap pelayar mempunyai nilai atribut cellspacing tersendiri yang bukan sifar, oleh itu secara lalai anda akan melihat jarak antara sel.

Catatan

Gunakan sifat untuk jadual, bukan untuk selnya (ia tidak akan berfungsi untuk sel).

Kesan yang sama tidak boleh dicapai dengan margin, kerana margin untuk sel jadual tidak berfungsi.

Jika sifat border-collapse ditetapkan kepada nilai collapse - border-spacing tidak akan berfungsi.

Contoh . Satu nilai

Mari buat jarak antara sel (dan antara sel dan sempadan jadual) sebanyak 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;
}

Contoh . Dua nilai

Dan sekarang mari buat jarak sebanyak 10px mendatar dan 30px menegak:

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

Contoh . Tetapkan border-collapse: collapse

Sekarang border-spacing tidak akan berfungsi kerana sifat border-collapse pada nilai 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;
}