必须用<table>布局，因Outlook Windows版使用Word引擎，不解析<div>和现代CSS，90%邮件会错位、留白或堆叠；Gmail则剥离<style>且静默丢弃部分内联样式。
直接说结论：不用 <table> 布局，90% 的邮件在 Outlook Windows 版里会错位、留白、文字堆叠或按钮消失——这不是你代码写得差，是客户端根本不解析 <div> 或现代 CSS。
为什么必须用 <table> 而不是 <div>
Outlook Desktop（2016–2024）用的是冻结在 2007 年的 MS Word 渲染引擎，它不认识 display: flex、margin: 0 auto，甚至会把 <p> 自动包裹或吃掉你设的 padding；Gmail 则整块剥离 <style> 标签，连 style="margin: 20px" 都可能静默丢弃。
你看到的“布局崩了”，不是 bug，是预期行为。写 <div class="header"> 在多数客户端里等于没写。
-
<table>不是怀旧，是唯一能跨平台控制对齐、宽度、堆叠顺序的 HTML 元素 - 语义化标签（
<section>、<header>、<article>）会被主动忽略或强制闭合 - Flexbox / Grid /
@media在 Outlook 中完全无效，在 Gmail 中支持极弱且不可靠
<table> 三层嵌套怎么写才不出错
实测安全上限就是三层：外层撑满、中层定宽、内层控内容。超三层在 iOS Mail 和 Samsung Email 里容易触发文字换行异常、valign 失效甚至整列偏移——它们不报错，只是静默错乱。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 最外层：
<table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">—— 提供背景色和居中上下文，role="presentation"告诉屏幕阅读器这不是数据表 - 中层：
<table width="600" cellpadding="0" cellspacing="0" border="0">——width="600"是硬性属性，style="width: 600px"在 Outlook 2013/2016 中直接被忽略；600px 是 Outlook 安全线，700px 可能横向滚动 - 内层：
<td bgcolor="#ffffff" style="padding: 32px">—— 所有内容必须包在<td>里，<p>可以用，但不能脱离<td>单独存在
图片、按钮、文字这些细节怎么防崩
它们不是独立元素，而是要“寄生”在已对齐的 <td> 里，靠 HTML 属性而非 CSS 控制行为。
- 图片必须同时写
width="200"height="40"和style="width: 200px; height: 40px; display: block;"，缺一不可；否则 Outlook 可能拉伸变形，Gmail App 里相对路径常 404 - 按钮禁用
<button>，改用嵌套<table>：<table align="center"><tr><td bgcolor="#007bff" style="padding:12px 24px">点击确认</td></tr></table>；background-color内联在 Outlook 2007/2010 中不支持 - 文字对齐统一用
<td align="center">，别信style="text-align: center"（Outlook 2010 中大概率失效）；小字号 footer 优先用<font size="2">，比 CSSfont-size更稳 - 所有
<td>显式加valign="top"，否则 Outlook 默认垂直居中，导致上下留白不可控
宽度、边距、圆角这些样式怎么写才生效
很多样式不是“不支持”，是写法错了位置。比如 border-radius 在 Gmail Web、iOS Mail、Apple Mail 中支持，但在 Outlook 中无效——但你不能因此放弃，而要用 bgcolor + 内边距模拟圆角感。
- 所有
<table>必须显式声明border="0"、cellpadding="0"、cellspacing="0"；漏掉cellspacing，单元格之间会出现不可控空白 - 宽度必须用
width="600"而非style="width: 600px"；max-width在 Outlook 中不解析 - 左右栏布局时，两个并列
<td>各设width="300"，比嵌套<table>更稳（Yahoo 邮箱对嵌套<table>容易撑宽整行） - 按钮或卡片区域的“圆角感”：用
bgcolor="#f8f9fa"+style="padding: 24px"，视觉上接近，且全平台兼容
真正难的不是写代码，而是记住哪些属性必须写成 HTML 属性（align、valign、width），哪些样式只能内联且仅限子集（color、font-family、line-height），以及哪些“看起来正常”的写法在 Outlook 里根本不会被解析——这些边界，才是邮件模板稳定交付的关键。
