Table Outlook 中的间距 HTML 电子邮件

Question

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

好的，所以我一直在努力解决这个问题，现在已经将近三周了，但仍然无法解决这个问题。我正在尝试为一家公司制作 HTML 签名，我快完成了。因为他们需要使用自己的字体，所以我在嵌套 tables.

中使用图像切片

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

当我在浏览器中 select 整个 table 时，发生的事情实际上是显而易见的：

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

<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 邮件（远程托管）中，但它会增加邮件大小，并且可能无法保证按预期显示。他们的字体看起来像 Google 的 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 安装中。将这些图像路径复制到上面的代码中，它将在任何地方都有效。

祝智能墙销售顺利。

Table Outlook 中的间距 HTML 电子邮件

Table spacing in Outlook HTML e-mails

html

css

outlook

signature

html-email