How to increase the distance between table columns in HTML?

Solution 1:

There isn't any need for fake <td>s. Make use of border-spacing instead. Apply it like this:

HTML:

<table>
  <tr>
    <td>First Column</td>
    <td>Second Column</td>
    <td>Third Column</td>
  </tr>
</table>

CSS:

table {
  border-collapse: separate;
  border-spacing: 50px 0;
}

td {
  padding: 10px 0;
}

See it in action.

Solution 2:

Set the width of the <td>s to 50px and then add your <td> + another fake <td>

Fiddle.

table tr td:empty {
  width: 50px;
}
  
table tr td {
  padding-top: 10px;
  padding-bottom: 10px;
}

<table>
  <tr>
    <td>First Column</td>
    <td></td>
    <td>Second Column</td>
    <td></td>
    <td>Third Column</td>
  </tr>
</table>

Code Explained:

The first CSS rule checks for empty td's and give them a width of 50px then the second rule give the padding of top and bottom to all the td's.

Solution 3:

If I understand correctly, you want this fiddle.

table {
  background: gray;
}
td {    
  display: block;
  float: left;
  padding: 10px 0;
  margin-right:50px;
  background: white;
}
td:last-child {
  margin-right: 0;
}

<table>
  <tr>
    <td>Hello HTML!</td>
    <td>Hello CSS!</td>
    <td>Hello JS!</td>
  </tr>
</table>