必须用,因为outlook desktop基于2007年word引擎不识别和现代css,gmail剥离标签,qq邮箱忽略class/id;是唯一跨客户端稳定控制对齐、宽度与堆叠的方案。

必须用 <table>,不是“建议”,是生存底线——Outlook Desktop 用 Word 渲染引擎,<code><div> 和现代 CSS 在它眼里等于不存在。
<h3>为什么 <code><table> 不是怀旧,而是唯一能跑通的方案
<p>Outlook Desktop(2016–2024)冻结在 2007 年 Word 引擎,不识别 <code>display: flex、margin、@media,甚至会把 <p></p> 自动包裹或吃掉你写的 padding;Gmail 直接整段剥离 <style></style> 标签;QQ 邮箱忽略所有 class 和 id。你写的 <div class="header"> 在多数客户端里等于没写。
<p>这不是兼容性差,是客户端主动阉割——它们不追求标准,只要稳定、可预测的渲染。<code><table> 是唯一能跨平台控制对齐、宽度、堆叠顺序的 HTML 元素。
<h3><code><table> 的三层嵌套结构怎么写才不出错
<p>实测安全上限就是三层,超了在 iOS Mail 和 Samsung Email 里会静默错乱:文字换行异常、<code>valign 失效、整列偏移,不报错,但渲染不可控。
- 外层:
<table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">——提供居中上下文,<code>role="presentation"告诉屏幕阅读器这不是数据表 - 中层:
<table width="600" cellpadding="0" cellspacing="0" border="0">——<code>width="600"比style="width: 600px"更可靠,600px 是 Outlook 安全线,700px 可能触发横向滚动 - 内层:
<td bgcolor="#ffffff" style="padding: 32px">——所有内容必须包在 <code><td> 里,<code><p></p>可以用,但不能脱离<td> 单独存在 <h3>按钮、图片、文字这些细节怎么防崩</h3> <p>它们不是独立元素,必须“寄生”在已对齐的 <code><td> 里,靠 HTML 属性而非 CSS 控制行为。 <ul><li>分栏别嵌套 <code><table>,改用并排 <code><td>:<code><tr> <td width="300">左</td> <td width="300">右</td> </tr> - 按钮必须用
<table> 包裹再设 <code>bgcolor,别信background-color内联——Outlook 2007/2010 不支持 - 图片必须带
alt、width、height属性,且src必须是绝对路径(含协议),相对路径在 Gmail App 里常 404 - 所有
<td> 显式加 <code>valign="top",否则 Outlook 默认垂直居中,导致上下留白不可控 - 小字号 footer 优先用
<font size="2"></font>,比style="font-size: 12px"在旧版 Outlook 中更稳 - 图片宽高:同时写
width="200" height="40"和style="width: 200px; height: 40px; display: block",缺一不可 - 文字对齐:用
<td align="center">,别只信 <code>style="text-align: center"(Outlook 2010 中大概率失效) - 边距控制:
<td> 支持 <code>padding,但<tr> 和 <code><table> 不支持 <code>margin,所有间距靠padding或空<td> 实现 <li>每层 <code><table> 都必须显式声明 <code>border="0" cellpadding="0" cellspacing="0",漏掉cellspacing,单元格之间会出现不可控空白最易被忽略的一点:哪怕只是用来占位的空
<td>,也必须套在带这些属性的 <code><table> 里——Outlook 对“空”非常敏感,裸 <code><td> 会触发默认边框或错位。</td>
内联样式和 HTML 属性到底谁说了算
答案是:都得写,且顺序不能反——HTML 属性是兜底,style 是补丁。Outlook 2013/2016 直接忽略 style="width: 600px",但认 width="600";Gmail 可能丢弃内联 width,但不会丢 style 里的字体颜色。











