Proprietà border-spacing

La proprietà border-spacing imposta la distanza tra le celle td o le celle th di una tabella HTML (e tra il bordo della cella e la tabella stessa). Il valore della proprietà può essere qualsiasi unità di misura per le dimensioni, eccetto le percentuali.

Sintassi

selettore {
	border-spacing: uno o due valori;
}

Valori

Valore	Descrizione
un valore	Un valore imposta la stessa distanza tra le celle in verticale e in orizzontale.
due valori	Il primo valore imposta la distanza orizzontale, mentre il secondo valore - la distanza verticale.

Valore predefinito: 0. Tuttavia, ogni browser ha il proprio valore, non zero, dell'attributo cellspacing, quindi per impostazione predefinita vedrai delle distanze tra le celle.

Note

Applica la proprietà alle tabelle, non alle sue celle (per le celle non funzionerà).

Non è possibile ottenere lo stesso effetto utilizzando margin, poiché margin per le celle della tabella non funziona.

Se è impostata la proprietà border-collapse con il valore collapse - border-spacing non funzionerà.

Esempio . Un valore

Creiamo distanze tra le celle (e tra la cella e il bordo della tabella) di 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;
}

Esempio . Due valori

Ora creiamo distanze di 10px in orizzontale e 30px in verticale:

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

Esempio . Impostiamo border-collapse: collapse

Qui border-spacing non funzionerà a causa della proprietà border-collapse impostata sul valore 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;
}