creation of tables with margins between them

Asked

Viewed 4,798 times

3

I want to create a special table but with spacing between each rectangle.

What I’ve 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 this.

inserir a descrição da imagem aqui

html table

2 answers

4


Use the attribute border-collapse: separate and in the 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>

2

What you have to do is set the edge for each td, something like:

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

Also removes the border = "1" defined 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 an example.

Browser other questions tagged html table

You are not signed in. Login or sign up in order to post.