HTML 电子邮件：表格还是 div？
Posted
技术标签:
【中文标题】HTML 电子邮件：表格还是 div？【英文标题】：HTML email: tables or divs? 【发布时间】：2011-02-25 12:01:55 【问题描述】：html 电子邮件通讯的 HTML/CSS 是否需要采用表格格式，或者我可以使用 DIV 并确保它能够很好地跨电子邮件客户端显示吗？我已经下载了一些模板来看看它们是如何完成的，我自己以此为基础，它们似乎都使用表格。
非常感谢任何见解，谢谢！
【问题讨论】：
这非常全面：http://mailchimp.com/resources/guides/email-marketing-field-guide 非常有用。在 body 标签内嵌入 CSS。谁会想到！ 网址已更改：mailchimp.com/resources/guides/email-marketing-field-guide 快速一般答案 - Webmail 客户端不希望您的 CSS 与他们的页面混淆，so they limit it（想象一下在 Gmail 中使用position:fixed;）。表格允许您使用 div 不可用（或不一致）的其他 html 元素。 Outlook 还使用 Microsoft Word 引擎来呈现电子邮件 html 并用大量垃圾 div 等包装它。一旦 Outlook 将它扔在那里，表格有助于维护您的电子邮件结构。
【参考方案1】：
⚠️ 2021-06-10 更新：这是一个非常古老的答案。我不确定它写成 10 年后有多准确。希望邮件客户端今天更加合规⚠️
当谈到电子邮件 HTML 时，请注意，所有来自 Web 开发的最佳实践都被忽略了。为了使外观一致，您应该：
-
使用基于表格的布局
对表格使用老式的属性样式
只使用内联样式，并且只使用非常简单的样式。
<style>-tags 被许多客户端丢弃。
跳过使用<html>、<head> 和<body> - 无论如何，它们都会被大多数客户丢弃。
如果您嵌入图像，请尝试确保电子邮件看起来不错，即使未加载图像也是如此。许多客户要求用户在显示图像之前将电子邮件标记为“安全”。
您可以在此处阅读以上几点的更详细版本：
http://articles.sitepoint.com/article/code-html-email-newsletters http://dennisdeacon.wordpress.com/2008/06/09/top-10-email-best-practices/ http://www.catswhocode.com/blog/best-practices-for-coding-html-emails【讨论】：
这是真的。 Outlook 2007 是其中最糟糕的版本之一（而且大多数都非常糟糕......）。 在创建 HTML/CSS 电子邮件时，这些规则是纯金。谢谢。 对于构建电子邮件，您可能想看看gulp-inline-css，它允许您使用 CSS 块构建您的电子邮件，但会将所有内容编译为内联样式。 您确定应该丢弃 html 和 body 吗？ ZenDesk 和本教程都推荐它？ webdesign.tutsplus.com/articles/… 我这个说法在 2017 年还成立吗？只是想知道，因为大多数电子邮件客户端市场从桌面转移到移动，并且还有更新版本的桌面客户端。据我所知，至少内联 CSS 似乎不再是必需品（gmail 刚刚添加了支持，它是最后一个缺少此功能的大型电子邮件客户端）。【参考方案2】：就像这里的每个人都说的那样，使用表格并内联所有 css...但是有一个电子邮件应用程序生态系统可以帮助您构建电子邮件。
我最近一直在使用Mailrox (https://www.mailrox.com/) 来构建我的大部分电子邮件，如果你是从设计中构建的，它似乎非常好，并且可以输出完美的 HTML 电子邮件，即使它是处于测试阶段。
您也可以尝试使用 Mailchimp 或 Campaign Monitor 的预构建模板，但听起来您已经为您的电子邮件设计了，所以也许 Mailrox 会是最好的。
如果您真的想开始构建电子邮件，我想说忘记您对现代网页设计和主表格布局的大部分了解，并使用来自 PatrikAkerstrand 的链接。
Litmus 也非常适合测试您的手工编码设计。它们会在（几乎）所有电子邮件客户端中为您提供电子邮件预览。
希望这会有所帮助。
【讨论】：
【参考方案3】：许多电子邮件客户端无法呈现 css。我会使用表格来格式化您的邮件并使用图像来处理其他任何事情。
【讨论】：
默认不能在邮件中使用图片；邮件客户端将阻止它们，直到用户将发件人标记为安全。几乎所有常见的客户端都支持有限的内联 CSS。 老客户没有，许多企业用户仍在使用它们。不，不是每个客户都不显示图像。这只是增加安全性的一步，但作为 iPhone 的客户没有理由阻止图像。 Gmail now shows images :-)【参考方案4】：正如已经提到的 - 您的 HTML 电子邮件应该使用表格（而不是 div）构建。您也可以添加 CSS - 两者都使用外部样式表，但这不会被所有电子邮件客户端接收，因此实际上在线添加您的 css 更可靠。即使这样做，某些电子邮件客户端也可能会忽略某些属性，因此您最好的选择仍然是使用 HTML 属性，只要这些属性可用。 “您必须这样做，因为某些客户端，例如 Gmail，会忽略或删除您的标签内容，或者忽略它们。”来源：http://webdesign.tutsplus.com/articles/creating-a-simple-responsive-html-email--webdesign-12978
除此之外，我还通过反复试验了解到，即使是图像也必须裁剪成您希望它们在电子邮件中显示的确切尺寸。如果 Outlook 在获取图像的宽度/高度的 HTML 属性时很糟糕，而且我看到了一些令人讨厌的拉伸电子邮件，只是因为这些属性被忽略并且图像被全尺寸显示。
【讨论】：
以上是关于HTML 电子邮件：表格还是 div？的主要内容，如果未能解决你的问题，请参考以下文章
如何避免“#DIV/0！” Google 文档电子表格中的错误？