td Margin
You can set the margin of a <table>, but you cannot set the margin of a <td>. Trying to run the following example, in which, I set the margin of table cells to a large value: 50px:
<style>
table#demo1 {
margin: 5px;
padding: 5px;
}
table#demo1 td {
margin: 50px;
padding: 5px;
background: yellow;
}
</style>
<table id="demo1">
<tr>
<td>1</td><td>apple</td>
</tr>
<tr>
<td>2</td><td>banana</td>
</tr>
</table>
The output will be:
| 1 | apple |
| 2 | banana |
As you can see, there is only border but no margin effect between table cells.
An alternative way to replace margin is to use "border-spacing" to make the same effect of margin, like the following example:
<style>
table#demo2 {
margin: 5px;
padding: 5px;
border-spacing: 50px;
}
table#demo2 td {
padding: 5px;
background: yellow;
}
</style>
<table id="demo2">
<tr>
<td>1</td><td>apple</td>
</tr>
<tr>
<td>2</td><td>banana</td>
</tr>
</table>
The output will be:
| 1 | apple |
| 2 | banana |
You can see the different between two tables.