How to Set Margin Between Table Cells in CSS

You can set the margin of a <table>, but you cannot set the margin of a <td>, try 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: white;
  }
</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:

You can see there is 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: white;
  }
</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:

You can see the different between two tables.