Propriedade border-spacing

A propriedade border-spacing define o espaçamento entre as células td ou células th de uma tabela HTML (e entre a borda da célula e a própria tabela). O valor da propriedade pode ser qualquer unidade de medida, exceto porcentagem.

Sintaxe

seletor {
	border-spacing: um ou dois valores;
}

Valores

Valor	Descrição
um valor	Um valor define o mesmo espaçamento entre as células na vertical e na horizontal.
dois valores	O primeiro valor define o espaçamento horizontal, e o segundo valor - o espaçamento vertical.

Valor padrão: 0. No entanto, cada navegador tem seu próprio valor não-zero do atributo cellspacing, portanto, por padrão, você verá espaçamentos entre as células.

Observações

Aplique a propriedade para tabelas, e não para suas células (não funcionará para células).

Não é possível obter o mesmo efeito usando margin, pois margin não funciona para células de tabela.

Se a propriedade border-collapse estiver definida como collapse - border-spacing não funcionará.

Exemplo . Um valor

Vamos definir o espaçamento entre as células (e entre a célula e a borda da tabela) em 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;
}

Exemplo . Dois valores

E agora vamos definir o espaçamento em 10px na horizontal e 30px na vertical:

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

Exemplo . Definindo border-collapse: collapse

Agora border-spacing não irá funcionar devido à propriedade border-collapse com o 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;
}