基于表格的布局方法

电子邮件客户端——尤其是使用 Microsoft Word 渲染引擎的 Windows 版 Outlook——不支持弹性盒布局、网格布局，甚至连可靠的块级布局也不支持。表格是唯一能在所有主流邮件客户端中保持一致渲染的结构原语。

每封响应式电子邮件都以一个宽度为 100% 的外层 <table> 开始，它充当邮件正文；随后是一个固定宽度的内层表格（通常为 600px），用于容纳实际内容。这种两层模式是几乎所有生产级模板的基础。

请始终在每个表格上包含 cellpadding="0" cellspacing="0" border="0"。如果缺少这些属性，Outlook 会插入意外间隙。添加 role="presentation" 会告诉屏幕阅读器跳过表格语义；这是正确的，因为布局表格不是数据表格。

要创建多列，请在内容行中嵌套一个包含两个 <td> 单元格的表格。每个单元格容纳一列。请避免使用 div+float——Outlook 会忽略 float，仍将列垂直堆叠，破坏设计。

桌面端事实上的预览窗格宽度约为 600px。针对这一宽度进行设计，可以让邮件在 Outlook、Gmail 桌面版、Apple Mail、Yahoo 和 Thunderbird 中同时保持舒适可见，并且无需水平滚动。

对于小屏幕，请通过媒体查询选择内层表格单元格，将宽度设置为 100%，并将显示方式设置为 block，使各列垂直堆叠。iOS Mail 和 Gmail Android 支持媒体查询；Outlook 365 桌面版会忽略它们，但仍保留 600px 的桌面布局。

背景颜色和背景图片应应用于 <td> 单元格，而不是 div。Outlook 能可靠支持 td 上的 bgcolor 属性，但根据客户端的不同，div 上的 CSS background-color 可能会被删除或完全忽略。

Outlook 需要使用矢量标记语言（VML）来显示背景图片。请将现代 CSS background-image 放在条件 <!--[if mso]>...<![endif]--> 注释中，并提供内联 v:rect 回退方案，这样 Outlook 可以渲染图片，而其他客户端则使用 CSS。

请跳过弹性盒布局、网格布局、自定义属性（支持有限）以及大多数定位方式。坚持使用 display: block/inline、通过属性指定的固定宽度和内联样式。按网页标准来看它的输出显得过时，但在每个收件箱中都能一致渲染。

请使用 cellpadding（属性）以及一个带内边距的单独 <td> 来设置内部留白。表格单元格上的外边距在 Outlook 中不可靠，而 td 上的内边距具有普遍兼容性。将 bgcolor 和内边距组合到同一个 td 上，即可在不使用 div 的情况下创建“卡片”组件。

请为每个布局表格添加 role="presentation"，这样屏幕阅读器就不会宣布“第 1 行，第 2 列中的第 1 列”。此外，请为每张图片添加替代文本，为所有内容提供真实文本（不要使用文字图片），并确保标题层级清晰有序。

为什么布局电子邮件时使用表格，而不是使用 CSS 弹性盒布局的 div？

HTML 邮件布局使用嵌套表格，并将 cellpadding、cellspacing 和 border 设置为 0，同时使用 role="presentation"。宽度为 100% 的外层表格居中放置 600px 的内层表格；嵌套的 td 单元格构成列，媒体查询可以在移动端将它们堆叠。请避免使用弹性盒布局和网格布局，在 td 上使用 bgcolor，并为 Outlook 的背景添加 VML 回退方案。