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