必须用table布局，因为Outlook桌面版（2016–2024）使用冻结于2007年的Word渲染引擎，不支持display: flex、margin: 0 auto等CSS，Gmail则剥离<style>标签并静默丢弃内联padding；table属性如width、align原生可靠，是跨客户端唯一稳定方案。
为什么必须用 <table> 而不是 <code><div>
<p>因为 Outlook 桌面版（2016–2024）用的是冻结在 2007 年的 Word 渲染引擎，它根本不识别 <code>display: flex、margin: 0 auto 或 <div> 标签；Gmail 会直接剥离整个 <code><style></style> 标签，连内联的 padding 都可能静默丢弃。你写的 <div class="header"> 在 Outlook 里等于没写，<code><p style="margin-top: 20px"></p> 在 Gmail 中留白直接消失——这不是 bug，是预期行为。
<table> 布局的三个硬性写法
<p>这些不是建议，是 Outlook、Gmail、Yahoo 共同认的“最低生存线”：</p>
<ul><li>所有 <code><table> 必须显式声明 <code>cellpadding="0" cellspacing="0" border="0"；漏掉 border="0"，Outlook 可能渲染出 1px 黑边
<table> 布局的三个硬性写法
<p>这些不是建议，是 Outlook、Gmail、Yahoo 共同认的“最低生存线”：</p>
<ul><li>所有 <code><table> 必须显式声明 <code>cellpadding="0" cellspacing="0" border="0"；漏掉 border="0"，Outlook 可能渲染出 1px 黑边
<table width="100%">，里面嵌一个固定宽的 <code><table width="600">；别用 <code>max-width，Outlook 不识别
<td align="center"> 提供上下文，再在内部 <code><table align="center"> 才真正生效；单写 <code>style="text-align: center" 在 Outlook 2010 中大概率失效
图片、按钮、文字怎么不跑偏
它们不是独立元素，而是要“寄生”在已居中的 <td> 里：
<ul>
<li>图片必须同时写 <code>width 和 height 属性（如 <img style="max-width:90%" style="max-width:90%" alt="如何利用HTML表格构建邮件正文？提高邮件客户端兼容性" >），再补上内联 style="width: 200px; height: 40px;"；只写 CSS，在 Outlook 里尺寸归零
<button></button> 或纯背景色，得用嵌套 <table> 模拟：<code><table align="center"><tr><td bgcolor="#007bff" style="padding:12px 24px">点击确认</td></tr></table>
<td align="left/center/right">，别信 <code>style="text-align"；小字号文字（如 footer）优先用 <font size="2"></font>，比 CSS font-size 在旧版 Outlook 中更稳
响应式不是靠 @media，是靠 width + !important
@media 在 Gmail、Outlook、Yahoo 中基本无效。真起作用的是这组组合：
立即学习“前端免费学习笔记（深入）”；
- 最外层
<table width="100%"> 包裹，加 <code>style="max-width: 600px; width: 100% !important;" - 内部单元格用
width="100%"+style="min-width: 300px;"控制最小宽度 - 避免
colspan/rowspan；Samsung Email 等 Android 客户端常解析错位，宁可用嵌套<table> 拆分列 <li>背景图必须带 <code>bgcolorfallback：<td bgcolor="#f5f5f5" background="bg.jpg">，否则 Gmail 里空白一片 <p>复杂点在于：没有 DevTools 实时调试，没有 JavaScript 动态修正，只有一次发送机会；最容易被忽略的是——<code>role="presentation"虽不强制，但加了能让屏幕阅读器跳过布局表，对可访问性有实质影响。
