Eigenschap border-spacing

De eigenschap border-spacing bepaalt de afstand tussen de cellen td of cellen th van een HTML tabel (en tussen de rand van de cel en de tabel zelf). De waarde van de eigenschap kan elke eenheid voor afmetingen zijn, behalve percentages.

Syntaxis

selector {
	border-spacing: één of twee waarden;
}

Waarden

Waarde	Beschrijving
één waarde	Eén waarde bepaalt dezelfde afstand tussen cellen verticaal en horizontaal.
twee waarden	De eerste waarde bepaalt de horizontale afstand, en de tweede waarde - de verticale afstand.

Standaardwaarde: 0. Echter, elke browser heeft zijn eigen, niet-nul waarde voor het attribuut cellspacing, dus standaard zul je afstanden tussen cellen zien.

Opmerkingen

Pas de eigenschap toe op tabellen, niet op haar cellen (het werkt niet voor cellen).

Hetzelfde effect kan niet worden bereikt met margin, omdat margin voor tabelcellen niet werkt.

Als de eigenschap border-collapse is ingesteld op de waarde collapse - zal border-spacing niet werken.

Voorbeeld . Eén waarde

Laten we de afstanden tussen de cellen (en tussen de cel en de tabelrand) instellen op 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;
}

Voorbeeld . Twee waarden

En nu maken we de horizontale afstand 10px en de verticale afstand 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;
}

Voorbeeld . We stellen border-collapse: collapse in

En nu zal border-spacing niet werken vanwege de eigenschap border-collapse met de waarde 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;
}