How do I apply only horizontal cell spacing to a HTML table?
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>
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.
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.