Question

我可以使用填充，因为很多客户端都不支持它，无论是外部css。

我想要的是没有用于img的cellpadding，而是用于图像描述的填充

 <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/

Answer 1

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

以下是您更新的示例：http://jsfiddle.net/7MzfR/1/

如果您不能使用外部CSS文档，请使用内联CSS。

Answer 2

对于html电子邮件，如果您想避免在单元格下方出现空格，则需要在图片上加display:block;。这是您的代码应该与所有主要电子邮件客户端的最大兼容性：

<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>

代码中有一堆“额外的东西” - 所有这些都是html电子邮件的一致性所需要的。我还建议，如果你想要一个1px的边框，可以代替你的桌子。它看起来像很多浪费的代码，但提供更多的一致性，看起来也更好：

<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>

Answer 3

尝试“内联样式”：

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

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

</tr>

Answer 4

这将解决问题，在描述中放置一个内联样式的span，但在表数据中。您还可以对表数据进行内联样式，但最好使用跨度，如下所示：

<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>

用于电子邮件模板的Cellpadding替代方案

4 个答案: