HTML <td> element with CSS padding and border. Would like to set <td> margins to space the rows out

Question

I have a table which looks like this (in html):

<div id="product_grid_one">
  <table>
    <tr>
      <td>
        <div class="productimage"><img src="images/perfume.jpg" alt="Product Image" /></div>
        <div class="productdescription"><p>Perfume spray bottle</p></div>
        <div class="productprice"><p>$4.99</p></div>
      </td>                
      <td>
        <div class="productimage"><img src="images/perfume.jpg" alt="Product Image" /></div>
        <div class="productdescription"><p>Perfume spray bottle</p></div>
        <div class="productprice"><p>$4.99</p></div>
      </td>                
      <td>
        <div class="productimage"><img src="images/perfume.jpg" alt="Product Image" /></div>
        <div class="productdescription"><p>Perfume spray bottle</p></div>
        <div class="productprice"><p>$4.99</p></div>
      </td>                
      <td>
        <div class="productimage"><img src="images/perfume.jpg" alt="Product Image" /></div>
        <div class="productdescription"><p>Perfume spray bottle</p></div>
        <div class="productprice"><p>$4.99</p></div>
      </td>                
    </tr>              
  </table>
</div>

And here is the CSS for it:

td { width: px; padding: 14px; border: 1px solid #c0c0c0; margin: 14px; }

Basically there is one row with four cells. Each cell has a vertically stacked image, text description of the product, and product price. Now, around this three-piece stack I want my td element (which I presume can be treated as a block), to have a padding of 14px, which I can set no problem, so that there is a 1px border 14px away from the stack of image, text, and price. No problem till here.

The problem is that in the above, the margin is not being set!!@

I could set margin: 200px; and there still would be no difference, the margin is about 1 or 2 pixels and does not seem to be possible to change this. And I have tried this on Firefox 13.0.1.

So, how do I set the margin? I would like there to be 14 px between each td in the table.

Can this be attained with CSS?

---

It has been suggested to use the cellspacing attribute of tables. So I could make use of the following equivalent CSS:

table { border-collapse: separate; border-spacing: 14px; }

but this is no good to me as I want the border-spacing applied only inside the table. I do not want any spacing on either side (left or right) of the table as a whole. Any solutions?

---

Well, I was able to reach a solution at last. I managed to resolve the issue with a negative margin so that the border spacing which the table adds around the table (in addition to in between the various table data and table headers) does not become visible as it moved out of the way to the left by making use of the left margin with the negative value.

table { border-collapse: separate; border-spacing: 13px; margin-left: -13px; }

Solution

Could you check if

.style { border-spacing: 0px; }

produces any difference? When the dinosaurs walked the Earth, they used

<td cellspacing="0">

but if you do so today, somebody of your colleagues will slap you silly. And if they do, they will probably give you the link to some list of deprecated stuff.

Comments

[Daniel Li]

Margins only apply to tables, not to their individual cells. The entire purpose of cells is to keep them compact and resizable. You should use dividers if this is what you are trying to attain.

[Justin Helgerson]

Margins can't be applied to table cells. You should use cellspacing; this situation is what it was designed for.

[user1527429]

But I don't want a cellspacing of 0px. I want a cellspacing of 12px, and only between cells, not around the table as a whole, and I don't want to use arcane html, I want to use css. What should I use?

[Konrad Viltersten]

You are right not to use arcane HTML. If you want cellspacing of 12, maybe you can use { border-spacing: 12px; } instead in the example above? Note that the first example in my code IS pure CSS.

[Konrad Viltersten]

Also, you can read more about border-spacing on the net. Since i know that Google is difficult to use (hihi), i've done it for you. Click here for more info on the style. Mark my reply as helpful if it was!