HTML电子邮件 - 空表/ TR / TD作为间隔符 [英] HTML Emails - Empty Tables/TR/TD as spacers

问题描述

有没有人有使用空表，表格行或表格单元格作为布局间隔符的经验？

Has anyone had any experience with using empty tables, table rows or table cells as layout spacers?

我一直在各种电子邮件客户端（Mail，Entourage，Gmail等）测试我的HTML电子邮件，Gmail似乎对空表格单元做出了不同的反应（不是完全考虑他们）。我在桌面的CSS中使用empty-cells：show以及非破坏空间时都搞乱了，但仍然没有运气。如果可能的话，我绝对不想使用图像作为间隔符。

I've been testing out my HTML email in various email clients (Mail, Entourage, Gmail, etc.) and Gmail seems to react to empty table cells differently (not accounting for them at all). I've messed around with using "empty-cells: show" in the table's CSS as well as non breaking spaces but still no luck. I definitely want to stay away from use of images as spacers if possible.

推荐答案

如果你想用空TD-s代替对于垫片你应该提供宽度和高度，如下所示：

If you want to use empty TD-s instead of spacers you should provide width and height as well like this:

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

你可以在这里看到我使用line-height来设置表格单元格高度而不是height = 21\" 。这将在所有主流浏览器和电子邮件客户端中呈现属性，甚至是旧版本，如莲花笔记。只需确保字体大小始终小于行高。

You can see here that I used line-height for setting the table cell height and not height="21". This will render propertly in all major browsers and email clients even the older ones, like lotus notes. Just make sure that the font-size is always smaller than the line-height.

这样您就不必再使用间隔符了。
还有一件事。在TR中，除了TD-s内有图片外，你不需要放任何东西。 Gmail在渲染图片方面存在一些问题，所以我这样解决了问题：

This way you'll never have to use spacers any more. One more thing. In TR you don't need to put anything except when there are pictures inside TD-s. Gmail have some issues with rendering pictures so I fixed it this way:

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

这篇关于HTML电子邮件 - 空表/ TR / TD作为间隔符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！