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

Question

I recently found out that I need to use the cellspacing attribute in my table, but I was wondering if I could get it to work only horizontally. I don't want it to vertically spread out, that messes up the layout of my entire page.

possible duplicate of [How to set cellspacing in tables only horizontally](http://stackoverflow.com/questions/12970826/how-to-set-cellspacing-in-tables-only-horizontally) — ivan_pozdeev, Jul 10 '15 at 15:43

score 57 · Accepted Answer · answered Jun 06 '12 at 01:08

57

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.

answered Jun 06 '12 at 01:08

1

The `border-spacing` property is not recognized by IE 8 and earlier. – Jukka K. Korpela Jun 06 '12 at 06:22
2

This isn't working for me in Chrome. A transparent border as described here does: http://stackoverflow.com/questions/656207/css-horizontal-table-cell-spacing-how – BA TabNabber Nov 22 '16 at 17:17
10

you also need to add `border-collapse: separate;` for this to work – jtate Jul 24 '17 at 15:04
It will also not work for an email received by an Outlook client – Grallen Apr 01 '22 at 20:15

score 3 · Answer 2 · answered Jul 16 '18 at 22:57

3

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>

answered Jul 16 '18 at 22:57

SMBiggs

11,034
6
68
83

It’s worth noting that though this works visually, it messes with the content and semantics. A preferred method would facilitate CSS and not interfere with the way other (non-visual) systems interpret the data. – ACJ Nov 05 '18 at 13:54
1

@ACJ Did you read the first part of the first sentence? I whole-heartedly acknowledge this limitation. But this is included for completeness. And sometimes the extra time taken for setting up a new CSS file isn't worth it--old school. – SMBiggs Nov 12 '18 at 04:05
Yes, I did. I felt like providing some emphasis and clarification as this issue is important to me. – ACJ Nov 21 '18 at 10:23
1

I think this is the only answer for things like HTML tables for emails. – Grallen Apr 01 '22 at 20:13

score 1 · Answer 3 · answered Jun 06 '12 at 06:27

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.

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

3 Answers3