HTML 电子邮件：表格还是 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2935472/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML email: tables or divs?
提问by HandiworkNYC.com
Does the HTML/CSS for an html email newsletter need to be in table format, or can I use DIVs with equal assurance it will display well cross email-client? I've downloaded a number of templates to see how they're done, upon which to base my own, and they all seem to use tables.
html 电子邮件时事通讯的 HTML/CSS 是否需要采用表格格式，或者我可以在同等保证的情况下使用 DIV，它可以很好地跨电子邮件客户端显示吗？我已经下载了许多模板来查看它们是如何完成的，我自己也以此为基础，而且它们似乎都使用表格。
Any insight much appreciated, thanks!
非常感谢任何见解，谢谢！
回答by PatrikAkerstrand
When it comes to email HTML, note that all best practices from web development goes out the window. To make the look consistent, you should:
当涉及到电子邮件 HTML 时，请注意 Web 开发中的所有最佳实践都已经过时了。为了使外观保持一致，您应该：
- Use table based layouts
- Use the old-school attribute styling for tables
- Use ONLY inline-styles, and only very simple such.
<style>-tags are discarded by many clients. - Skip using
<html>,<head>and<body>- They will be discarded by most clients anyway. - If you embed images, try to make sure that the e-mail looks decent even if images are not loaded. Many clients require the user to mark the email as "safe" before displaying images.
- 使用基于表格的布局
- 对表格使用老式的属性样式
- 仅使用内联样式，并且仅使用非常简单的样式。
<style>-tags 被许多客户端丢弃。 - 跳过使用
<html>,<head>和<body>- 大多数客户端无论如何都会丢弃它们。 - 如果您嵌入图像，即使没有加载图像，也要尽量确保电子邮件看起来不错。许多客户端要求用户在显示图像之前将电子邮件标记为“安全”。
You can read more detailed versions of the above points here:
您可以在此处阅读上述要点的更详细版本：
回答by MintDeparture
Like everyone here has said, use tables and inline all your css... but there is an ecosystem of email apps to help you build emails.
就像这里的每个人所说的那样，使用表格并内联您所有的 css……但是有一个电子邮件应用程序生态系统可以帮助您构建电子邮件。
I've been using Mailrox(https://www.mailrox.com/) for most of my email builds recently and it seem to be pretty damm good and outputting perfect HTML emails, if you're building one from a design, even though it's in beta.
我最近一直在使用Mailrox( https://www.mailrox.com/) 来构建我的大部分电子邮件，它似乎非常好并且输出完美的 HTML 电子邮件，如果您是从设计中构建一个，即使虽然它处于测试阶段。
You could also try pre-built templates from Mailchimpor Campaign Monitor, but it sounds like you have a design for your email so maybe Mailrox would be best.
您也可以尝试从Mailchimp或Campaign Monitor 中预先构建的模板，但听起来您的电子邮件有一个设计，所以也许 Mailrox 是最好的。
If you really want to get into building emails I'd say forget most of what you know about modern webdesign and master table layouts and use the links from PatrikAkerstrand.
如果您真的想开始编写电子邮件，我会说忘记您对现代网页设计和主表格布局的了解，并使用来自 PatrikAkerstrand 的链接。
Litmusis also great for testing your hand-coded designs. They give you previews of your email in (pretty much) all the email clients.
Litmus也非常适合测试您的手工编码设计。他们在（几乎）所有电子邮件客户端中为您提供电子邮件预览。
Hope this helps.
希望这可以帮助。
回答by fb55
Many email-clients aren't able to render css. I would use tables to format your mail and use images for anything else.
许多电子邮件客户端无法呈现 css。我会使用表格来格式化您的邮件并使用图像来处理其他任何事情。
回答by Alexandra
As it's already been mentioned - your HTML emails should be built using tables (and not divs). You can add CSS as well - both using an external stylesheet, but this will not be picked up by all email clients, so it's actually more reliable to add your css in-line. Even when doing so, some attributes might be ignored by certain email clients, so your best bet is still using HTML attributes whenever these are available. "You must do this because the some clients, such as Gmail, will ignore or strip out your tag contents, or ignore them." Source: http://webdesign.tutsplus.com/articles/creating-a-simple-responsive-html-email--webdesign-12978
正如已经提到的 - 您的 HTML 电子邮件应该使用表格（而不是 div）构建。您也可以添加 CSS - 都使用外部样式表，但这不会被所有电子邮件客户端接收，因此内联添加您的 css 实际上更可靠。即使这样做，某些电子邮件客户端也可能会忽略某些属性，因此您最好的选择仍然是使用 HTML 属性，只要这些属性可用。“您必须这样做，因为某些客户端，例如 Gmail，会忽略或删除您的标签内容，或者忽略它们。” 来源：http: //webdesign.tutsplus.com/articles/creating-a-simple-responsive-html-email--webdesign-12978
That aside, I've also learned through trial and error that even images must be cropped to the exact size you want them displayed in your email. Outlook if terrible at picking up HTML attributes for width / height for images, and i have seen a few nasty stretched emails, only because these attributes were ignored and the images was displayed full size.
除此之外，我还通过反复试验了解到，即使图像也必须裁剪为您希望它们在电子邮件中显示的确切尺寸。Outlook 如果在为图像的宽度/高度选择 HTML 属性方面很糟糕，我看到了一些令人讨厌的拉伸电子邮件，只是因为这些属性被忽略并且图像以全尺寸显示。
