CODEWITHSUNDEEP
csshtml-tablehtml-email
rusly
rusly

Reputation: 1522

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.

Upvotes: 2

Views: 12759

Answers (5)

user1847051
user1847051

Reputation:

Check the fiddle. http://jsfiddle.net/tuD6L/12/

margin: -5px 0;

Upvotes: 0

Sowmya
Sowmya

Reputation: 26979

Add style="line-height:0" for each td

<td style="line-height:0"><img ... /></td>

Upvotes: 1

Jacob
Jacob

Reputation: 1062

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>

Upvotes: 4

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32192

Now Define your img tag vertical-align:top 

<img src="some.jpg" style="vertical-align:top;" />

Demo

--------

Upvotes: 0

Grumpy
Grumpy

Reputation: 1478

On each of your tr, td and img elements, add style="margin:0;padding:0;"

Or just delete your table all together. They seem to serve no purpose.

Upvotes: 0

Related Questions