必须用table布局，因为outlook桌面版（2016–2024）使用冻结于2007年的word渲染引擎，不支持display: flex、margin: 0 auto等css，gmail则剥离标签并静默丢弃内联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><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <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 属性（如 @@##@@），再补上内联 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>bgcolor fallback：<td bgcolor="#f5f5f5" background="bg.jpg">，否则 Gmail 里空白一片 <p>复杂点在于：没有 DevTools 实时调试，没有 JavaScript 动态修正，只有一次发送机会；最容易被忽略的是——<code>role="presentation" 虽不强制，但加了能让屏幕阅读器跳过布局表，对可访问性有实质影响。