结论：邮件开发必须用<table>布局，因所有主流客户端不支持现代CSS布局属性；Outlook用Word引擎不识别flex/grid，Gmail剥离<style>标签且只保留部分内联样式，响应式需靠table+width+!important实现。
别纠结“为什么”，直接说结论：不是开发者偏爱 <table>，而是所有主流邮件客户端（Outlook Desktop、Gmail Web/iOS/Android、Apple Mail、Yahoo、QQ 邮箱）至今仍无法稳定支持 flex、grid、float、position，甚至基础的 margin 和 padding 在多数客户端里会被忽略或解析错乱——<table> 是唯一能跨平台控制对齐、宽度、堆叠顺序的 HTML 元素。
Outlook Desktop 用 Word 渲染引擎，根本不认识 display: flex
Windows 版 Outlook（2016–2024）底层是 MS Word HTML 渲染器，它不支持 CSS 布局属性。你写 style="display: flex; justify-content: center;"，它直接当没看见；但 <td align="center"> 或 <table align="center"> 会原生生效。这不是 bug，是设计如此——Word 的 HTML 支持范围早在 2007 年就冻结了。
-
align、width、cellpadding、cellspacing这些 HTML 属性至今被完整保留，且优先级高于同名 CSS - 写
style="width: 600px"在 Outlook 中可能失效，但<table width="600">一定生效 - 省略
border="0"可能在某些 Outlook 版本中默认渲染出 1px 边框
Gmail 会剥离整个 <style> 标签，内联样式也只认子集
Gmail（网页版及部分移动端）在加载邮件时主动过滤 CSS：所有 <style> 标签被移除；margin、padding、background-image 等属性即使写在 style 属性里也会被静默丢弃。它只保留极简内联样式，比如 color、font-size、text-align。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 想控制上下间距？别用
margin-top，改用<td height="20"></td>或cellpadding="20" - 想左中右布局？不用
float或flex，用三列<td width="200">嵌套 -
<font>标签虽然过时，但在旧版 Outlook 中比style="font-family: ..."更可靠；Gmail 不支持<font>，但会降级为默认字体，不会崩
响应式不是靠媒体查询，而是靠 table + width + !important 组合兜底
你在 <style> 里写的 @media (max-width: 600px) { ... }，在 Gmail、Outlook、Yahoo 中基本无效。真正起作用的响应式逻辑是：
立即学习“前端免费学习笔记（深入）”；
- 最外层
<table width="100%">包裹，设style="max-width: 600px; width: 100% !important;" - 内部单元格用
width="100%"+style="min-width: 300px;"控制最小宽度 - 避免
colspan/rowspan复杂合并——某些 Android 客户端（如 Samsung Email）会解析错位，宁可用嵌套<table>拆分 - 所有
<table>必须加role="presentation"，否则屏幕阅读器会把布局表当成数据表朗读
真正难的不是写 <table>，而是记住哪些属性该用 HTML 属性写、哪些必须塞进 style、哪些干脆不能碰。比如 background-image 在任何客户端都不安全，但 bgcolor="#ffffff" 几乎通吃；又比如 <img> 必须带 alt 和明确的 width/height，否则 Outlook 会额外加空白间隙。这些不是规范建议，是血泪兼容结果。
