CODEWITHSUNDEEP
csshtml-tablehtml-email
user3155747
user3155747

Reputation: 51

Cellpadding alternative in <td> for email template

I can use padding because many client didn't support it, either external css.

What I want is no cellpadding for the img but padding for the image description

 <table border="1" cellpadding="10">
    <tr>
        <td><img src="http://placehold.it/100x100"/></td>

        <td>1) pic description</td>

    </tr>

</table>

http://jsfiddle.net/7MzfR/

Upvotes: 0

Views: 2547

Answers (4)

John
John

Reputation: 12193

For html email, you need to include display:block; on your image if you want to avoid a space appearing below it in the cell. This is what your code should look like for maximum compatibility with all major email clients:

<table width="300" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="100">
      <img alt="" src="http://placehold.it/100x100" width="100" height="100" style="margin: 0; border: 0; padding: 0; display: block;">
    </td>
    <td width="200" bgcolor="#EEEEEE" style="padding:10px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000;">
      Image Description
    </td>
  </tr>
</table>

There is a bunch of 'extra stuff' in the code - all of it is needed for consistency in html email. I'd also suggest, if you want a 1px border, to instead nest your table. It looks like a lot of wasted code, but offers more consistency and also looks better:

<table width="302" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
  <tr>
    <td height="102" valign="middle" align="center">
      <table width="300" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="100">
            <img alt="" src="http://placehold.it/100x100" width="100" height="100" style="margin: 0; border: 0; padding: 0; display: block;">
          </td>
          <td width="200" bgcolor="#EEEEEE" style="padding:10px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000;">
            Image Description
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Upvotes: 1

Mussser
Mussser

Reputation: 525

This will do the trick, place an inline styled span around the description, but within the table data. You could also inline style the table data, but it is optimal to use a span as follows:

<table border="1" cellpadding="10">
    <tr>
        <td><img src="http://placehold.it/100x100"/></td>

        <td><span style="margin: 5px;">1) pic description</span></td>

    </tr>

</table>

Upvotes: 0

Neversay
Neversay

Reputation: 81

Try "inline style":

 <table border="1" >
<tr>
    <td><img src="http://placehold.it/100x100"/></td>

    <td style="padding:10px;">1) pic description</td>

</tr>

Upvotes: 0

durrrutti
durrrutti

Reputation: 1030

<td style="padding:0;"><img src="http://placehold.it/100x100"/></td>

Here's your example updated: http://jsfiddle.net/7MzfR/1/

Just use inline CSS if you can't use an external CSS document.

Upvotes: 1

Related Questions