必须用三层<table>嵌套，因iOS Mail和Samsung Email对DOM层级敏感，四层以上会静默错位；外层100%宽、中层600px固定宽、内层内容块，<td>禁用margin而用padding或空<td>留白，响应式靠三段式结构共存。
直接用 <table> 写邮件正文，不是“能凑合”，而是 Outlook Desktop 和 Gmail 的唯一可信赖布局方式。其他方案在发出去那一刻就注定错位或塌陷。
为什么必须用三层 <table> 嵌套
不是为了“结构好看”，是 iOS Mail 和 Samsung Email 对 DOM 层级敏感，四层以上嵌套会静默错位——文字换行异常、valign 失效、整列偏移，不报错但内容不可读。
- 外层：
<table width="100%">，负责背景色和居中上下文 - 中层：
<table width="600">，固定宽度容器，width属性必须写，不能只靠style="width: 600px" - 内层：每个模块（标题、按钮、图文块）单独一个
<table>，宽度设为600或300，禁用colspan/rowspan
<td> 上的对齐和留白怎么写才生效
text-align 在 Outlook 2010 中大概率失效，margin 在所有主流客户端都无效——Gmail、Outlook、Yahoo 全部忽略。
- 居中必须组合：
<td align="center"><table align="center">，单写align或单写style都不稳 - 留空隙不用
margin，改用padding或插入空<td width="20"></td> - 文字左/右/居中统一用
<td align="left">，别信style="text-align: left"
图片、按钮、字体这些“小东西”最容易翻车
它们不是独立元素，而是寄生在 <td> 里的“附属品”。漏掉任一硬性属性，Outlook 就归零尺寸，Gmail 就丢样式。
立即学习“前端免费学习笔记（深入）”；
- 图片必须同时写：
<img width="200" height="40" style="width: 200px; height: 40px;">，缺任意一项，Outlook 渲染为 0×0 - 按钮不能用
<button>或 CSS 背景色，得用模拟表格：<table><tr><td bgcolor="#007bff" style="padding:12px 24px">点击确认</td></tr></table> - 小字号 footer 优先用
<font size="2">，比font-size: 12px在旧版 Outlook 中更稳
响应式不是靠 @media，而是靠三段结构共存
Gmail Web 和 iOS Mail 支持 @media only screen and (max-width: 600px)，但 Outlook Desktop（2016–2024）完全无视。所谓“响应式”，其实是三套结构并存，由客户端能力自动择一渲染。
- 桌面结构：并排两个
<td width="300">，靠width控制分栏 - 移动端结构：同一
<tr>内两个<td>，加 class="stack-column" +@media把它变成display: block !important - Outlook 降级结构：用
mso-hide: all和条件注释包裹最简骨架，让它只看到单列表格
越想让它“看起来高级”，越容易在发出去后发现按钮消失、图片不显示、文字堆叠——真正难的不是加功能，是在删掉 70% 的现代 CSS 后，信息依然清晰、操作依然可达。
