Properti border-spacing

Properti border-spacing mengatur jarak antara sel td atau sel th tabel HTML (dan antara batas sel dan tabel itu sendiri). Nilai properti ini adalah satuan untuk ukuran apa pun, kecuali persentase.

Sintaks

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

Nilai

Nilai	Deskripsi
satu nilai	Satu nilai mengatur jarak yang sama antara sel secara vertikal dan horizontal.
dua nilai	Nilai pertama mengatur jarak secara horizontal, dan nilai kedua - jarak secara vertikal.

Nilai default: 0. Namun, setiap browser memiliki nilai atribut cellspacing-nya sendiri yang bukan nol, oleh karena itu secara default Anda akan melihat jarak antara sel.

Catatan

Terapkan properti ini untuk tabel, bukan untuk selnya (tidak akan bekerja untuk sel).

Efek serupa tidak dapat dicapai dengan menggunakan margin, karena margin untuk sel tabel tidak bekerja.

Jika properti border-collapse diatur ke nilai collapse - border-spacing tidak akan bekerja.

Contoh . Satu nilai

Mari buat jarak antara sel (dan antara sel dan batas tabel) sebesar 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 sebesar 10px secara horizontal dan 30px secara vertikal:

<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 . Atur border-collapse: collapse

Namun sekarang border-spacing tidak akan bekerja karena properti border-collapse yang bernilai 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;
}