HTML电子邮件：表格还是div？

78

HTML电子邮件时事通讯的HTML / CSS是否需要采用表格格式，或者我是否可以同等使用DIV来确保跨电子邮件客户端的显示效果？我下载了许多模板，以了解它们是如何完成的，这些模板是我自己的基础，并且它们似乎都在使用表。

任何见解非常感谢，谢谢！

html html-email

— HandiworkNYC.com
source

2

这是非常全面的：http

— //mailchimp.com/resources/guides/email-marketing-field-guide

很有用。将CSS嵌入body标记中。谁会想到的！

— aaandre

网址已更改：mailchimp.com/resources/guides/email-marketing-field-guide

— JasonB

快速的一般答案-Webmail客户端不希望您的CSS弄乱他们的页面，因此他们限制了它（可以position:fixed;在Gmail中使用）。表格允许您使用div不可用（或不一致）的其他html元素。Outlook还使用Microsoft Word引擎来呈现电子邮件html，并用大量废话div等将其包装。一旦Outlook将废话丢到那里，表格可以帮助维护您的电子邮件结构。

— 约翰

136

当使用电子邮件发送HTML时，请注意，Web开发中的所有最佳实践都不在话下。为了使外观一致，您应该：

使用基于表格的布局
对表使用老式的属性样式
仅使用内联样式，并且仅使用非常简单的样式。<style>标签被许多客户端丢弃。
使用和跳过-无论如何<html>，它们将被大多数客户端丢弃。<head><body>
如果您嵌入图像，请尝试确保即使未加载图像，电子邮件也看起来不错。许多客户端要求用户在显示图像之前将电子邮件标记为“安全”。

您可以在此处阅读以上各点的详细版本：

— 帕特里克·阿克斯特兰德
source

3

这是真的。Outlook 2007是其中最糟糕的一种（而且大多数都非常糟糕...）。

— 最大

3

这些规则在创建HTML / CSS电子邮件时是纯金。谢谢。

— 米洛斯Đakonović

1

对于构建电子邮件，您可能想看看gulp-inline-css，它使您可以使用CSS块构建电子邮件，但将所有内容编译为嵌入式样式。

— fjdumont 2014年

您确定html和body应该丢弃吗？ZenDesk和本教程都推荐它吗？webdesign.tutsplus.com/articles/…–

— 雅各布·亚历山大·埃希勒

1

我这个说法在2017年仍然正确吗？奇怪的是，因为大多数电子邮件客户端市场都从台式机转移到了移动设备，并且桌面客户端也有较新版本。就我所知，至少内联CSS似乎不再是必需的（gmail刚刚添加了支持，这是最后一个缺少此功能的大型电子邮件客户端）。

— Torsten Engelbrecht

9

就像这里的每个人都说的那样，使用表格并内联所有CSS ...但是电子邮件应用程序生态系统可以帮助您构建电子邮件。

我最近一直在使用Mailrox（https://www.mailrox.com/）进行大多数电子邮件构建，如果您是从某个设计中构建的，甚至可以输出完美的HTML电子邮件，那似乎还不错。尽管它处于测试阶段。

您也可以尝试从Mailchimp或Campaign Monitor中预构建的模板，但这听起来像是为电子邮件设计的，所以Mailrox可能是最好的。

如果您真的想构建电子邮件，那么我想说的是，请忘记您对现代Web设计和主表布局所了解的大部分知识，并使用PatrikAkerstrand的链接。

Litmus也非常适合测试您的手动编码设计。它们为您（几乎所有）电子邮件客户端中的电子邮件提供预览。

希望这可以帮助。

— 薄荷出发
source

4

许多电子邮件客户端无法渲染CSS。我会使用表格来格式化您的邮件，并使用图像进行其他操作。

— fb55
source

1

默认情况下，您无法在电子邮件中使用图片；邮件客户端将阻止它们，直到用户将发件人标记为安全。几乎所有普通客户都支持有限的嵌入式CSS。

— Rex M 2010年

较老的客户端则没有，许多企业用户仍在使用它们。不，不是每个客户都不会显示图像。这只是提高安全性的一步，但是作为iPhone的客户端没有理由阻止图像。

— fb55 2010年

Gmail现在显示图像：-)

— 2014年

1

如前所述-您的HTML电子邮件应使用表格（而不是div）构建。您也可以添加CSS-两者都使用外部样式表，但是并不是所有的电子邮件客户端都可以使用CSS，因此内联添加CSS实际上更加可靠。即使这样做，某些电子邮件客户端也可能会忽略某些属性，因此，最好的选择还是使用HTML属性。“您必须这样做，因为某些客户端（例如Gmail）将忽略或剥离您的标记内容，或者忽略它们。” 资料来源：http : //webdesign.tutsplus.com/articles/creating-a-simple-sensitive-html-email--webdesign-12978

除此之外，我还通过反复试验了解到，即使图像也必须裁剪到您希望它们在电子邮件中显示的确切大小。Outlook如果在获取图像的宽度/高度的HTML属性时很糟糕，而且我看到了一些讨厌的拉伸电子邮件，仅是因为这些属性被忽略并且图像以全尺寸显示。

— 亚历山德拉
source