3

Quero criar uma especia de tabela mas com espaçamento entre cada retangulo.

O que tenho criado é:

<table border="1" margin="2">
 <tr>
   <td>Célula 1</td>
   <td>Célula 2</td>
 </tr>
 <tr>
   <td>Célula 3</td>
   <td>Célula 4</td>
 </tr>
</table>

e o que quero é algo assim.

inserir a descrição da imagem aqui

2 Respostas 2

4

Utilize o atributto border-collapse: separate e no border-spacing você define a distância entre as células.

table {border: 0px; border-spacing: 10px; border-collapse: separate;}
table td{border: 1px solid black; text-align: center; padding: 5px; margin: 5px}
<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>
	<tr>
		<td>10</td>
		<td>11</td>
		<td>12</td>
	</tr>
</table>

2

O que tens de fazer é definir a borda para cada td, algo como:

<style>
    td {
        padding: 15px;
        border: 1px solid black;
    }
</style>

Remove também o border = "1" que definis-te na tabela.

td {
    padding: 15px;
    border: 1px solid black;
}
<table margin="2">
 <tr>
   <td>Célula 1</td>
   <td>Célula 2</td>
 </tr>
 <tr>
   <td>Célula 3</td>
   <td>Célula 4</td>
 </tr>
</table>

Tens AQUI um exemplo.

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 .