How do I apply only horizontal cell spacing to a HTML table?

Question

A better way than setting cellspacing="10" is to use CSS. You can use the following CSS to target the table's cell spacing.

table {
  border-spacing: 10px 0;
}

The first value specifies the horizontal spacing, and the second value specifies the vertical spacing.

If you just need to set cell contents apart, use spacing inside cells (and set cellspacing=0 in HTML). This is universally supported by CSS-enabled browsers.

If you really need to separate the cells themselves, so that there is spacing between their borders or their colored background, then border-spacing would solve the problem, but only in supporting browsers.

Depending on the context, you might even consider simulating cell spacing by putting cell contents in a div, set to cover the cell area except desired padding, which will then look like cell spacing. You would then set any desired border or background on those div elements.

Yeah, I know it's ugly and abhorrent to the separation of content and styling, but adding spacer (invisible) columns seems the only thing that consistently works across all platforms.

Here I put some empty table data in the first row and gave them a width (in pixels). I made corresponding empty table data in the successive rows. It feels real old school, but it's simple and works.

<table>
    <tr>
        <td>some content for column 1</td>
        <td width="18" />
        <td>other content for 2nd visible column (actually column 3)</td>
        <td width="18" />
        <td>content for 3rd visible column (actually column 5)</td>
    </tr>

    <tr>
        <td><img src="image_for_column 1.png" /></td>
        <td />
        <td><img src="image_for_column 2.png" /></td>
        <td />
        <td><img src="image_for_column 3.png" /></td>
    </tr>

</table>