必须用而非，因outlook desktop（2016–2024）使用冻结于2007年的word渲染引擎，不支持flex、margin、@media及语义化标签，gmail则整块剥离标签；三层嵌套（外层100%宽、中层600px固定宽、内层模块化）是ios mail和samsung email的安全上限，超限将静默错乱；按钮、图片、文字须寄生中，依赖html属性（如align、width、bgcolor）而非css控制行为。

为什么必须用 <table> 而不是 <code><div> <p>因为 Outlook Desktop（2016–2024）用的是冻结在 2007 年的 Word 渲染引擎，它不认识 <code>display: flex、margin、@media，甚至会把 <p></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8272" title="anything-to-html"><img src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="overflowclass">anything-to-html</a> <p class="overflowclass">将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p> </div> <a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> 自动包裹或吃掉你设的 padding；Gmail 则整块剥离 <style></style> 标签，连 style="margin: 20px" 都可能静默丢弃。你看到的“布局崩了”，不是 bug，是预期行为。
写 <div class="header"> 在多数客户端里等于没写；<code><section></section>、<header></header> 被忽略或强制闭合，不是兼容性差，是客户端主动阉割。

<table> 的三层嵌套结构怎么写才安全 <p>外层、中层、内层各司其职，超三层在 iOS Mail 和 Samsung Email 中会触发静默错乱（文字换行偏移、<code>valign 失效），不是报错，而是渲染不可控。
必须写死属性，不能只靠 style：
• 外层：<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation"> —— 提供背景色和居中上下文<br>• 中层：<code><table width="600" border="0" cellpadding="0" cellspacing="0" role="presentation"> —— <code>width="600" 是硬性属性，style="width: 600px" 在 Outlook 2013/2016 中直接被忽略
• 内层：每个模块（标题、按钮、图文区）单独一个 <table>，宽度设为 <code>600 或 300，禁用 colspan/rowspan（Outlook 支持极不稳定）

按钮、图片、文字这些细节怎么不出错

它们不是独立元素，必须“寄生”在已对齐的 <td> 里，靠 HTML 属性而非 CSS 控制行为。<br>• 按钮不用 <code><button></button>，改用嵌套 <table>：<code><table align="center"><tr><td bgcolor="#007bff" style="padding:12px 24px">点击确认</td></tr></table>
• 图片必须同时写 width、height 属性和对应 style，再加 style="display:block" 消除下方空白
• 文字对齐统一用 <td align="center">，别信 <code>style="text-align:center"（Outlook 2010 中大概率失效）
• 小字号 footer 优先用 <font size="2"></font>，比 CSS font-size 更稳
• 字体栈必须冗余：font-family: "Helvetica Neue", Arial, sans-serif;，且 <font face="Arial"></font> 在 Outlook 2007/2010 中比 CSS 更可靠，可双写

响应式不是靠 @media，而是靠结构共存

Gmail Web 和 iOS Mail 支持 @media only screen and (max-width: 600px)，但 Outlook Desktop（2016–2024）完全无视它。所谓“响应式”，其实是三套结构共存，靠客户端能力自动择一渲染。
• 桌面结构：并排两个 <td width="300">，放在同一 <code><tr> 内<br>• 移动端结构：用 <code>class="stack-column" + @media 把并排 <td> 变成 <code>display: block !important，前提是它们已包裹在同一个 <tr> 内<br>• Outlook 降级结构：用 <code>mso-hide: all 和条件注释，让 Outlook 只看到最简表格骨架
别试图用 !important 救 margin，它在多数客户端里无效；想留空隙，只能靠相邻 <td> 的 <code>padding 或空 <td> <p>真正难的不是写出来，是在删掉 70% 的现代 CSS 后，还能让信息清晰、操作可达、品牌可辨。越想让它看起来更好，越容易在某个客户端里崩掉——这不是技术限制，是邮件生态的客观现实。</p> </td>