In HTML how to increase the space between Tds without using cellspacing cellpadding?

Question

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

But according to the Mozilla documentation for example, it is possible to confirm that the attributes cellspacing="" cellpadding="" are obsolete https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

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

I want to move the cell phones away from each other’s tables, but without the cellspacing="" I don’t know how to do it, I’ve tried it as a margin: 20px in <td> and yet it didn’t 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>

How do I move the cells away <td> of each other’s tables?

Answer 1

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

             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 the table should be as separate, but do not need to declare it as this is already the default value, except if you have changed 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>