Propriété border-spacing

La propriété border-spacing définit l'espacement entre les cellules td ou les cellules th d'un tableau HTML (et entre la bordure de la cellule et le tableau lui-même). La valeur de la propriété peut être exprimée dans n'importe quelle unité de taille, sauf les pourcentages.

Syntaxe

sélecteur {
	border-spacing: une ou deux valeurs;
}

Valeurs

Valeur	Description
une valeur	Une valeur définit le même espacement entre les cellules verticalement et horizontalement.
deux valeurs	La première valeur définit l'espacement horizontal, et la deuxième valeur définit l'espacement vertical.

Valeur par défaut : 0. Cependant, chaque navigateur a sa propre valeur, non nulle, de l'attribut cellspacing, donc par défaut, vous verrez des espacements entre les cellules.

Remarques

Appliquez la propriété aux tableaux, et non pas à ses cellules (cela ne fonctionnera pas pour les cellules).

Un effet similaire ne peut pas être obtenu avec margin, car margin ne fonctionne pas pour les cellules de tableau.

Si la propriété border-collapse est définie avec la valeur collapse - border-spacing ne fonctionnera pas.

Exemple . Une valeur

Créons des espacements entre les cellules (et entre la cellule et la bordure du tableau) de 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;
}

Exemple . Deux valeurs

Maintenant, créons des espacements de 10px horizontalement et 30px verticalement :

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

Exemple . Définissons border-collapse: collapse

Ici, border-spacing ne fonctionnera pas à cause de la propriété border-collapse avec la valeur 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;
}