HTML电子邮件:表格或div?

时间:2010-05-29 14:41:00

标签: html html-email

html电子邮件简报的HTML / CSS是否需要采用表格格式,或者我可以使用DIV同等保证它会显示交叉电子邮件客户端吗?我已经下载了许多模板,看看它们是如何完成的,基于我自己的模板,它们似乎都使用了表格。

非常感谢任何见解,谢谢!

4 个答案:

答案 0 :(得分:133)

当涉及到电子邮件HTML时,请注意Web开发的所有最佳实践都会消失。为了使外观保持一致,您应该:

  1. 使用基于表格的布局
  2. 使用表的旧学校属性样式
  3. 仅使用内联样式,而且只是非常简单。 <style> - 标签被许多客户丢弃。
  4. 使用<html><head><body>跳过 - 无论如何,大多数客户都会丢弃它们。
  5. 如果嵌入图像,请尝试确保即使未加载图像,电子邮件也会显得正常。许多客户要求用户在显示图像之前将电子邮件标记为“安全”。
  6. 您可以在此处阅读以上各点的更详细版本:

答案 1 :(得分:9)

就像所有人都说的那样,使用表格并内联所有的css ......但是有一个电子邮件应用程序生态系统可以帮助你构建电子邮件。

我最近一直在使用Mailroxhttps://www.mailrox.com/)用于我的大多数电子邮件构建,如果你是从设计中构建一个,那么它似乎非常好并输出完美的HTML电子邮件,即使它处于测试阶段。

您还可以尝试使用MailchimpCampaign Monitor预先构建的模板,但听起来您的电子邮件设计很可能,因此Mailrox可能是最好的。

如果您真的想要构建电子邮件,我会说忘记了大部分关于现代网页设计和主表格布局的知识,并使用PatrikAkerstrand的链接。

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

希望这有帮助。

答案 2 :(得分:4)

许多电子邮件客户端无法呈现css。我会使用表来格式化你的邮件,并使用图像做其他事情。

答案 3 :(得分:1)

由于已经提到过 - 您的HTML电子邮件应该使用表格(而不是div)构建。您也可以使用外部样式表添加CSS,但所有电子邮件客户端都不会这样做,因此在线添加css实际上更可靠。即使这样做,某些电子邮件客户端也可能会忽略某些属性,因此,只要这些属性可用,您最好还是使用HTML属性。 &#34;您必须执行此操作,因为某些客户端(例如Gmail)会忽略或删除您的代码内容,或忽略它们。&#34;资料来源:http://webdesign.tutsplus.com/articles/creating-a-simple-responsive-html-email--webdesign-12978

除此之外,我还通过反复试验了解到,即使图片也必须裁剪到您想要在电子邮件中显示的确切尺寸。 Outlook如果在为图像的宽度/高度选择HTML属性时非常糟糕,我看到了一些令人讨厌的拉伸电子邮件,只是因为这些属性被忽略而且图像显示为全尺寸。