【问题标题】: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))。有关如何解决此问题的任何建议?
  • 不用担心。我通过在每个空单元格中使用 &amp;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】:

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

      【讨论】:

        猜你喜欢
        • 2015-07-26
        • 2017-09-22
        • 1970-01-01
        • 2016-05-29
        • 1970-01-01
        • 2013-07-31
        • 2013-12-02
        • 2013-06-09
        • 2014-07-02
        相关资源
        最近更新 更多