HTML 电子邮件 - 空表/TR/TD 作为间隔符
有没有人有过使用空表格、表格行或表格单元格作为布局间隔符的经验？
我一直在各种电子邮件客户端（Mail、Entourage、Gmail 等）中测试我的 HTML 电子邮件，Gmail 似乎对空表格单元格的反应不同（根本不考虑它们）。我已经在表格的 CSS 中使用了“empty-cells: show”以及不间断空格，但仍然没有运气。如果可能的话，我绝对希望避免使用图像作为间隔符。
Has anyone had any experience with using empty tables, table rows or table cells as layout spacers?
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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
如果您想使用空的 TD-s 而不是间隔符，您也应该提供宽度和高度，如下所示：
您可以在此处看到我使用 line-height 来设置表格单元格高度，而不是 height="21"。这将在所有主要浏览器和电子邮件客户端中正确呈现，甚至是较旧的浏览器和电子邮件客户端，例如 Lotus Notes。只需确保字体大小始终小于行高即可。
这样您就再也不用使用垫片了。
还有一件事。在 TR 中，除非 TD-s 中有图片，否则不需要放置任何内容。 Gmail 在渲染图片方面存在一些问题，因此我通过以下方式修复了它：
If you want to use empty TD-s instead of spacers you should provide width and height as well like this:
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.
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:
某些电子邮件客户端会折叠空单元格，即使它包含空格或者即使它的尺寸已分配。但我发现，如果您将一个空表放在一个空表中并仅将维度分配给父表，则所有客户端都会认为父表不为空，因为它包含另一个表，因此它适用于所有客户端和设备。
为了进一步提高兼容性，最好主要使用单元格填充和行上最小高度但超过 3 像素来定义必要的尺寸。 td 应大于 3px，因为任何低于 3px 的内容都可能被忽略。但应该接近 3 px，因为如果您通过 cellpadding 获取尺寸，则 cellpadding 比行高更受尊重。
例如，如果我想要一个 18px 高的空间，我会指定 cellpadding 7 和 td 高度 4，结果为 (7 * 2) + 4 = 18。
Some email clients will collapse an empty cell even if it contains a space or even if it's dimensions are assigned. But I've found that if you put an empty table within a empty table and assign dimensions to only the parent, all clients will respect that the parent table is not empty because it contains another table, thus it works across all clients and devices.
To further improve compatibility it's best to define the necessary dimensions using primarily cellpadding and the least amount of height on the row but more than 3px. The td should be larger than 3px because anything under 3px may be ignored. But should be as close to 3 px because if you get your dimensions via the cellpadding, cellpadding is more respected than the row height will be.
For example if I want a space that's 18px tall I'd assign cellpadding 7 and td height 4 which comes out to (7 * 2) + 4 = 18.
很好用 如果您不使用分隔符，则始终使用堆栈来指定带有样式标记的行高默认行高为 20px。
Well with using instead of a spacer, you are always stack to specify line-height with a style tag, if you do not will default to 20px line-height.
使用
Use