Outlook HTML 电子邮件中的表格间距

Question

首先，在你们中的任何人将此帖子标记为重复之前，如果解决方案尚未实施，请检查我的代码。

好的，所以我一直在尝试解决这个问题，现在已经接近三周了，但我仍然无法解决这个问题。 我正在尝试为一家公司制作 HTML 签名，但我几乎快要结束了。因为它们需要使用自己的字体，所以我在嵌套表中使用图像切片。

虽然当我将签名从 Outlook 发送到 Outlook 时，它看起来几乎是应有的方式，在任何网络邮件服务中打开它都会显示它有额外的间距，并且表格单元格比预期的要大：

当我在浏览器中选择整个表格时，实际上可以清楚地看到发生了什么：

我已经尝试了所有可能的方法来使它正确，但到目前为止没有任何帮助。 这是我的代码：

<table border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse !important;">
<tbody>
<tr>
<td style="border-collapse:collapse !important;Margin:0 !important;border:0 !important;padding:0 !important;vertical-align:top !important;" valign="top">
<img src="images/uni_1.png" style="Margin:0 !important;border:0 !important;padding:0 !important;display: block !important;vertical-align:top !important;" alt="Logo Dekre" border="0" valign="top"/>
</td>
<td style="border-collapse:collapse !important;Margin:0 !important;border:0 !important;padding:0 !important;vertical-align:top !important;" valign="top">
<table width="140" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse !important;">
<tbody>
<tr>
<td style="border-collapse:collapse !important;Margin:0 !important;border:0 !important;padding:0 !important;vertical-align:top !important;" valign="top">
<img width="140" style="Margin:0 !important;border:0 !important;padding:0 !important;display: block !important;vertical-align:top !important;" src="images/uni_2.png" valign="top" alt="" border="0"/>
</td>
</tr>
<tr>
<td style="border-collapse:collapse !important;Margin:0 !important;border:0 !important;padding:0 !important;vertical-align:top !important;" valign="top">
<a href="mailto:mailovaadresa">
<img width="140" style="Margin:0 !important;border:0 !important;padding:0 !important;display: block !important;vertical-align:top !important;" src="images/uni_3.png" valign="top" alt="" border="0" />
</a>
</td>
</tr>
<tr>
<td style="border-collapse:collapse !important;Margin:0 !important;border:0 !important;padding:0 !important;vertical-align:top !important;" valign="top">
<a href="http://www.dekre.cz/">
<img width="140" style="Margin:0 !important;border:0 !important;padding:0 !important;display: block !important;vertical-align:top !important;" src="images/uni_4.png" valign="top" alt="" border="0" />
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<img src="images/zapati500.png" />

Answer 1

首先，图像需要托管在某个地方（云、网站等），以便能够在有人打开您的邮件时显示，因为您不能每次都将它们附加到电子邮件内容中。我建议您使用纯文本，因为某些网络邮件服务甚至电子邮件客户端可以阻止图像，因此您的联系信息可能会被隐藏（或在 html 旁边制作文本版本）。策略可以集成到 html 邮件（远程托管）中，但它会增加邮件大小，并且可能无法保证按预期显示。他们的字体看起来像谷歌的 Coda ...... 其次，您需要定义承载图像的 TD 的高度，然后在图像上（使用内联样式）尝试使用 style="max-height:XXpx" 其中 XX 与承载图像的 TD 大小相同（您已经定义的高度）。 将 !important 放入内联样式不是强制性的，因为无论有多少 CSS 和其他规则，内联都是第一个被执行的。

Answer 2

您的问题的解决方案很简单，您没有为所有图像添加高度和宽度。我猜测左边图像的高度（87px），将右边的三个图像设置为宽度为 140，高度为 29（87/3=29），然后通过 Litmus.com 运行结果。添加了图片的高度和宽度后，单个电子邮件客户端以相同的方式显示签名。

使用此代码：

<table border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse !important;">
  <tbody>
    <tr>
        <td style="border-collapse:collapse !important;Margin:0 !important;border:0 !important;padding:0 !important;vertical-align:top !important;" valign="top">
          <img height="87" width="43" src="images/uni_1.png" style="Margin:0 !important;border:0 !important;padding:0 !important;display: block !important;vertical-align:top !important; background: yellow;" alt="Logo Dekre" border="0" valign="top" /> </td>
        <td style="border-collapse:collapse !important;Margin:0 !important;border:0 !important;padding:0 !important;vertical-align:top !important;" valign="top"> 
        <table width="140" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse !important;">
            <tbody>
                <tr>
                    <td style="border-collapse:collapse !important;Margin:0 !important;border:0 !important;padding:0 !important;vertical-align:top !important;" valign="top">
                      <img width="140" height="29" style="Margin:0 !important;border:0 !important;padding:0 !important;display: block !important;vertical-align:top !important; background: red;" src="images/uni_2.png" valign="top" alt="" border="0" /> </td>
                </tr>
                <tr>
                    <td style="border-collapse:collapse !important;Margin:0 !important;border:0 !important;padding:0 !important;vertical-align:top !important;" valign="top"> <a href="mailto:mailovaadresa">
                      <img width="140" height="29" style="Margin:0 !important;border:1 !important;padding:0 !important;display: block !important;vertical-align:top !important; background: green;" src="images/uni_3.png" valign="top" alt="" border="0" /> </a> </td>
                </tr>
                <tr>
                    <td style="border-collapse:collapse !important;Margin:0 !important;border:0 !important;padding:0 !important;vertical-align:top !important;" valign="top">
                      <a href="http://www.dekre.cz/">
                        <img width="140" height="29" style="Margin:0 !important;border:0 !important;padding:0 !important;display: block !important;vertical-align:top !important; background: blue;" src="images/uni_4.png" valign="top" alt="" border="0" /> </a> </td>
                </tr>
            </tbody>
        </table>
        </td>
    </tr>
  </tbody>
</table>

正如@Valentin R. 所提到的，您需要在某处托管图像。您可以将它们托管在域上的 WordPress 安装中。将这些图像路径复制到上面的代码中，它可以在任何地方工作。

祝销售智能墙好运。