Propiedad border-spacing

La propiedad border-spacing establece el espacio entre las celdas td o celdas th de una tabla HTML (y entre el borde de la celda y la propia tabla). Los valores de la propiedad son cualquier unidad de tamaño, excepto porcentajes.

Sintaxis

selector {
	border-spacing: uno o dos valores;
}

Valores

Valor	Descripción
un valor	Un valor establece los mismos espacios entre celdas vertical y horizontalmente.
dos valores	El primer valor establece el espacio horizontal, y el segundo valor - el espacio vertical.

Valor por defecto: 0. Sin embargo, cada navegador tiene su propio valor no nulo del atributo cellspacing, por lo que por defecto verá espacios entre las celdas.

Notas

Aplique la propiedad a las tablas, no a sus celdas (no funcionará para las celdas).

No se puede lograr un efecto similar con margin, ya que margin para las celdas de tabla no funciona.

Si se establece la propiedad border-collapse con el valor collapse - border-spacing no funcionará.

Ejemplo . Un valor

Hagamos que los espacios entre celdas (y entre la celda y el borde de la tabla) sean 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;
}

Ejemplo . Dos valores

Y ahora hagamos que los espacios sean de 10px horizontalmente y 30px verticalmente:

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

Ejemplo . Establezcamos border-collapse: collapse

Y ahora border-spacing no funcionará debido a la propiedad border-collapse con el valor 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;
}