5

A minha ideia é fazer uma tabela em que tenha um espaçamento entre as células, como na imagem:

inserir a descrição da imagem aqui

Mas segundo a documentação da Mozilla por exemplo, é possível confirmar que os atributos cellspacing="" cellpadding="" estão obsoletos https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/table

E mesmo se vc falar: "Está obsoleto, mas ainda funciona!" Sim de veras funciona, porém da erro no validador da W3C, além de poder parar de funciona em uma atualização do browser no futuro... inserir a descrição da imagem aqui

Eu quero afastar as celular da tabela umas das outras, mas sem o cellspacing="" não sei como fazer, já tentei como um margin: 20px na <td> e mesmo assim não funcionou...

td {
	border: 1px solid;
	padding: 6px;
    margin: 20px; /* não funciona */
}
<table>
	<tr>
		<td>01</td>
		<td>02</td>
		<td>03</td>
	</tr>
	<tr>
		<td>04</td>
		<td>05</td>
		<td>06</td>
	</tr>
	<tr>
		<td>07</td>
		<td>08</td>
		<td>09</td>
	</tr>
</table>

Como faço para afastar as céluas <td> da tabela umas das outras?

1 Resposta 1

8

Pode usar a propriedade border-spacing, que é equivalente ao velho atributo cellspacing. E a vantagem é que o border-spacing possui um segundo valor opcional, desta forma podendo definir espaçamentos diferentes na horizontal e vertical.

             horizontal
                 ↓
border-spacing: 20px 10px;
                      ↑
                  vertical (opcional)

Se o segundo valor for omitido, ambas as direções (horizontal/vertical) terão o mesmo valor:

      horizontal e vertical
                 ↓
border-spacing: 20px;

Porém o border-collapse da tabela deve estar como separate, mas não precisa declará-lo pois esse já é o valor padrão, exceto se tiver alterado para collapse.

Exemplo:

td {
    border: 1px solid;
    padding: 6px;
}

#tabela { 
    border-spacing: 20px;
}
Com border-spacing:
<table id="tabela">
	<tr>
		<td>01</td>
		<td>02</td>
		<td>03</td>
	</tr>
	<tr>
		<td>04</td>
		<td>05</td>
		<td>06</td>
	</tr>
	<tr>
		<td>07</td>
		<td>08</td>
		<td>09</td>
	</tr>
</table>

Com cellspacing:
<table cellspacing="20">
	<tr>
		<td>01</td>
		<td>02</td>
		<td>03</td>
	</tr>
	<tr>
		<td>04</td>
		<td>05</td>
		<td>06</td>
	</tr>
	<tr>
		<td>07</td>
		<td>08</td>
		<td>09</td>
	</tr>
</table>

2
  • É isso ai, valeu jovem!
    – hugocsl
    Commented 19/09/2018 às 18:41
  • Valeu jovem!...
    – Sam
    Commented 19/09/2018 às 18:45

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .