I want to create a table spice but with spacing between each rectangle.
What I have created is:
<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>
And what I want is something like that.
Use the atributto border-collapse: separate and in border-spacing you define the distance between cells.
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> What you have to do is set the border for each td , something like:
<style>
td {
padding: 15px;
border: 1px solid black;
}
</style>
Also remove the border = "1" that you set in the table.
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>You have HERE for an example.