Question

I’ve been tasked with creating a clean template for our HTML newsletter with circulates to about 70k subscribers. As expected, they’re hoping for it to be as consistent across as many e-mail clients as possible, so I’m following widely suggested HTML e-mail practice and using nested tables and in-line style.

I’m trying to set a bgcolor to each <td> that displays an image – the reason being that if someone has the images on their e-mail client turned off, they’ll still be able to see the shape of the table cells (and their experience will still be somewhat visual), but I’m having difficulty keeping the bgcolor within the cell, it seems to bleed into the space between cells. Here’s an example:

  <tr>
     <td width="200" height="200" bgcolor="#CCCCCC">
       <img src="image.png" height="200" width="200" alt="Image!">
    </td>
  </tr>

From this code, instead of the background being invisible under the image when the image is visible because they’re both 200×200, I see about 10px of the grey pushing down into the bottom and right side of the image and intruding into the white space around the cells. What is going on and how can I fix this?

EDIT: Here’s an image of what it’s doing:

Answer 1

Have you set the css style of the table to border-collapse? Like so:

<table style="border-collapse: collapse;">

If that has no effect, and there is no margin on the images, have you tried setting padding to 0?