HTML 电子邮件 - 空表/TR/TD 作为间隔答案

【问题标题】：HTML Emails - Empty Tables/TR/TD as spacersHTML 电子邮件 - 空表/TR/TD 作为间隔
【发布时间】：2011-11-27 22:09:22
【问题描述】：

有没有人使用空表格、表格行或表格单元格作为布局间隔？

我一直在各种电子邮件客户端（Mail、Entourage、Gmail 等）中测试我的 HTML 电子邮件，Gmail 似乎对空表格单元格的反应不同（根本不考虑它们）。我在表格的 CSS 中使用“空单元格：显示”以及不间断空格，但仍然没有运气。如果可能的话，我绝对希望避免使用图像作为间隔。

【问题讨论】：

不能使用 CSS 边距、内边距或相对定位吗？

标签： html html-table html-email

【解决方案1】：

如果您想使用空的 TD-s 而不是垫片，您应该像这样提供宽度和高度：

<td width="111" style="font-size:1px;line-height:21px;">&nbsp;</td>

您可以在这里看到我使用 line-height 来设置表格单元格的高度，而不是 height="21"。这将在所有主要浏览器和电子邮件客户端中正确呈现，即使是较旧的浏览器，如 lotus notes。只需确保字体大小始终小于行高。

这样您就不必再使用垫片了。还有一件事。在TR中你不需要放任何东西，除非TD-s里面有图片。 Gmail 在渲染图片时遇到了一些问题，所以我用这种方式修复了它：

<tr style="font-size:0px; line-height: 0px;">
<td width="135" valign="top" align="left" height="120" >
<img width="135" height="120" border="0" alt="" src="image source here">
</td>
</tr>

【讨论】：

很抱歉，这似乎不适用于 Apple 的邮件应用程序（版本 6.3 (1503)）。有关如何解决此问题的任何建议？
不用担心。我通过在每个空单元格中使用 &nbsp; 并在底部添加一行，使用 colspan=3 跨越所有 3 个单元格的单列将其固定在我的 3 单元格宽表（空、填充、空）中。
有谁知道我们是否可以将空 td 的宽度设置为 100% 宽度，以便父表属性可以有一个宽度属性来控制需要的宽度？

【解决方案2】：

一些电子邮件客户端会折叠一个空单元格，即使它包含空格或即使它的尺寸已分配。但是我发现，如果您将一个空表放在一个空表中并仅将维度分配给父表，那么所有客户端都会尊重父表不是空的，因为它包含另一个表，因此它适用于所有客户端和设备。

为了进一步提高兼容性，最好主要使用单元格填充和行上的最小高度但大于 3 像素来定义必要的尺寸。 td 应该大于 3px，因为任何低于 3px 的东西都可能被忽略。但应该接近 3 px，因为如果您通过 cellpadding 获取尺寸，则 cellpadding 比行高更受尊重。

例如，如果我想要一个 18 像素高的空间，我会分配 cellpadding 7 和 td 高度 4，结果为 (7 * 2) + 4 = 18。

<table border="0" cellpadding="7" cellspacing="0" width="100%">
    <tr>
        <td height="4">
            <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td></td>
                </tr>
            </table>
        </td>
    </tr>
</table>

【讨论】：

【解决方案3】：

很好地使用如果您不使用样式标签，则始终使用堆栈而不是分隔符来指定行高将默认为 20px 行高。

【讨论】：

【解决方案4】：

使用&nbsp;“填充”空单元格中的空间。

【讨论】：