邮件模板必须用<table>布局，因Outlook、Gmail等主流客户端不支持flex/grid/float/position，甚至margin/padding常被忽略或错乱；<table>是唯一跨平台可控对齐、宽度与堆叠顺序的HTML元素。
邮件模板必须用 <table> 布局，不是因为写法“古老”，而是所有主流客户端（Outlook Desktop、Gmail Web/iOS/Android、Apple Mail、Yahoo、QQ 邮箱）至今不支持 display: flex、display: grid、float、position，甚至基础的 margin 和 padding 在多数环境里会被忽略或解析错乱——<table> 是唯一能跨平台控制对齐、宽度、堆叠顺序的 HTML 元素。
为什么 Outlook 和 Gmail 会把你的 CSS 当空气
Outlook Desktop（2016–2024）底层是 MS Word HTML 渲染引擎，它压根不认识 display: flex 或 margin: 0 auto；你写 style="text-align: center" 可能生效，但写在父 <table> 上却不管用，除非子 <td> 也显式声明 align="center"。Gmail 更激进：它会整段剥离 <style> 标签，连内联样式也只保留极小子集（比如 color、font-size），background-image、border-radius、@media 全部静默丢弃。
- 常见错误现象：
<div class="header">在 Outlook 里等于没写；<p style="margin-top: 20px">在 Gmail 中留白消失 - 根本原因不是“兼容性差”，而是各客户端主动阉割——它们不追求标准，只求稳定、可预测的渲染
- 别试图用
!important救margin，它在多数客户端里无效；width="600"比style="width: 600px"更可靠
最稳妥的三层嵌套结构怎么写
不用猜、不用试，直接抄这个结构，适配率最高：
<!-- 最外层：占满宽度，提供居中上下文 -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td align="center">
<!-- 中间层：固定宽度容器，真正居中的主力 -->
<table align="center" width="600" border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td>
<!-- 内层：放标题、正文、按钮等所有内容 -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td style="font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.6em;">
正文内容
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>- 每层
<table>都必须带border="0" cellpadding="0" cellspacing="0"，否则 Outlook 可能渲染出默认边框或间距 -
role="presentation"是给屏幕阅读器看的，避免误读为数据表格 - 嵌套别超三层：iOS Mail 和某些 Android 客户端（如 Samsung Email）在四层以上容易重绘异常、文字换行错位
- 所有
<td>显式加valign="top"，否则 Outlook 默认垂直居中，导致上下留白不可控
字体、按钮、图片这些细节怎么不出错
不是所有内联样式都安全。Gmail 会重写部分属性，Outlook 对 font-family 解析不稳定，图片在 Gmail App 里可能拉伸变形——每个细节都有坑。
立即学习“前端免费学习笔记（深入）”；
- 字体栈必须冗余：
font-family: "Helvetica Neue", Arial, sans-serif；<font face="Arial">在 Outlook 2007/2010 中比 CSS 更可靠，可双写 - 按钮不能用
<button>或<a>加背景色：必须用<table>模拟，外层<td>设bgcolor和padding，里面再套<td align="center">包文字 - 图片必须设
width和height属性（非 CSS），且加align="absmiddle"；PNG 优于 SVG（Gmail 不渲染 SVG） - 链接颜色要双重保险：
<a href="#" style="color: #0066cc; text-decoration: none;">，再补一句style="color: inherit"防 Gmail 重写
响应式和背景色这种“高级需求”怎么兜底
媒体查询在 Gmail、Outlook、Yahoo 中基本无效。所谓“响应式邮件”，其实是靠 HTML 属性 + 强制内联样式组合硬扛。
- 背景色只用
bgcolor属性：<td bgcolor="#f5f5f5">；CSS 的background-color在 Outlook 中常失效 - 背景图几乎不可靠：必须 fallback 到
bgcolor，且图片尺寸需严格匹配容器宽高 - 响应式 fallback 写法：
<td width="100%" style="max-width: 600px; width: 100% !important;">包住内容，内部单元格用width="100%"+style="min-width: 300px;" - 禁用
colspan/rowspan超过 2：Outlook 2013/2016 渲染错位率高；宁可用嵌套<table>拆分
真正难的不是写代码，是放弃“现代前端思维”——你得习惯没有 DevTools、没有 console.log、没有实时重载。一次写错，发出去就全公司都看到错位的周报。所有样式必须手写到每个标签上，所有宽度必须用像素值，所有居中必须靠 align 和嵌套，而不是靠 CSS 逻辑推导。
