Search code examples
csshtml-tablehtml-email

Remove cellpadding ,cellspacing and border from table

I tried to send simple newsletter using oscommerce platform and the content is simple table with few images. Before i send the preview look good (no cellspacing or cellpadding)

Preview:

enter image description here

But after I receive and open using gmail :

enter image description here

you can see the table is different; I mean the white border.

Here is code for generate table and content for newsletter .

<table border="0" cellspacing="0" cellpadding="0">
   <tbody>
      <tr>
         <td><img alt="" src="http://www.sfbeautyskin.com/uploads/image/Newsletter/Newsletter.jpg" style="width: 950px; height: 1187px;" /></td>
      </tr>
      <tr>
         <td><a href="http://www.sfbeautyskin.com/images//banners/Promotion_Dec_Xmas.jpg"><img alt="" src="http://www.sfbeautyskin.com/uploads/image/Newsletter2.jpg" style="width: 950px; height: 114px;" /></a></td>
      </tr>
      <tr>
         <td><a href="http://www.sfbeautyskin.com/index.php"><img alt="" src="http://www.sfbeautyskin.com/uploads/image/Newsletter3.jpg" style="width: 950px; height: 158px;" /></a></td>
      </tr>
      <tr>
         <td><a href="http://www.sfbeautyskin.com/contact_us.php"><img alt="" src="http://www.sfbeautyskin.com/uploads/image/Newsletter4.jpg" style="width: 950px; height: 440px;" /></a></td>
      </tr>
   </tbody>
</table>

The question is how to completely remove border property.

Solution

  • I've had a similar problem with emails before. If I remember correctly, I fixed it by making the image (or try 'a' tag) inside the td use display: block.

    Try something like this:

    <td><img alt="" style="display: block;" src="http://www.sfbeautyskin.com/uploads/image/Newsletter/Newsletter.jpg" style="width: 950px; height: 1187px;" /></td>