In HTML how to increase the space between the TDs without using cellpilling cellspacing?

Navigation
4

My idea is to make a table that has a spacing between cells, as in the image:

ButaccordingtotheMozilladocumentationforexample,youcanconfirmthatcellspacing="" cellpadding="" attributes are obsolete link

And even if you talk: "It's obsolete, but it still works!" Yes it really works, but the error in the W3C validator, in addition to being able to stop working in a browser update on future...

Idonotknowhowtodoit,Ialreadytrieditasacellspacing="" on margin: 20px and it still did not work ... 

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>

    
asked by anonymous 19.09.2018 / 17:46

1 answer

6

You can use the border-spacing property border-spacing , which is equivalent to the old cellspacing attribute. And the advantage is that border-spacing has a second optional value, so you can set different horizontal and vertical spacing. 

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

If the second value is omitted, both directions (horizontal / vertical) will have the same value: 

      horizontal e vertical
                 ↓
border-spacing: 20px;
  

But the border-collapse of the table should be separate , but   you do not need to declare it as this is already the default value unless you have changed it to collapse .

Example: 

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>
    
19.09.2018 / 18:12
What does "Tree-Shaking" mean? lock R to resize the window