邮件HTML必须用table布局，禁用flex/grid；宽度写死为width="600"；样式内联书写；避免background-image和JS；数据表格用valign/align双保险；动态内容靠服务端替换占位符。
用 <table> 布局，别碰 flex 或 grid
现代 CSS 在邮件客户端里基本等于摆设。Outlook（尤其是 Windows 版）会直接忽略 display: flex，Gmail 会 strip 掉大部分 @media 和外部样式。唯一靠谱的是老式表格布局 —— 不是“过时”，是“唯一能跑通”。
实操建议：
- 所有结构用嵌套
<table>，<tr>，<td>，禁用<div>做布局容器 - 宽度写死：用
width="600"而不是style="width: 600px;"（部分客户端不解析内联 width） - 字体、颜色等基础样式必须写在
<td>或<p>的style属性里，且只用支持度高的属性（如color、font-family、line-height） - 避免
class和外部 CSS 文件 —— 邮件系统多数会删掉<style>标签
background-image 在 Outlook 里根本不会显示
想在周报顶部加个带渐变色的标题栏？别用背景图。Outlook for Windows（占企业用户大头）完全不支持 background-image，连 fallback 都没机会触发。
替代方案：
立即学习“前端免费学习笔记（深入）”；
- 用纯色
bgcolor="#2a5b8c"+ 文字叠加，或者切一张 1×600px 的 PNG 作为<img>插入 - 如果必须有图标，把 logo 和装饰元素全部做成内嵌图片（base64 不推荐，Gmail 会拦截；用绝对 HTTPS 链接更稳）
- 按钮别用
<div>+ background —— 改用<table>包裹文字，加border-radius在部分客户端有效，但得接受 Outlook 显示直角
数据表格怎么对齐又兼容？用 valign 和 align 属性
周报里常有「项目｜进度｜负责人」三列数据，看着简单，一发出去就错位。问题不在你的代码，而在 Gmail 会重写 vertical-align: middle，而 Outlook 只认老式属性。
正确写法示例：
<tr> <td valign="top" align="left" style="padding: 8px 12px; border-bottom: 1px solid #eee;">订单系统重构</td> <td valign="top" align="center" style="padding: 8px 12px; border-bottom: 1px solid #eee;">✅ 95%</td> <td valign="top" align="right" style="padding: 8px 12px; border-bottom: 1px solid #eee;">张工</td> </tr>
关键点：
- 必须同时写
valign（HTML 属性）和style="vertical-align: top;"（双保险） -
align="center"比text-align: center兼容性高得多 - 别依赖
colspan做合并 —— Apple Mail 渲染异常多，宁可用空<td>占位
动态内容怎么插？靠后端替换 {{xxx}} 占位符，别信前端 JS
有人想用 JavaScript 拼周报数据再发邮件 —— 这条路彻底堵死。所有邮箱都禁用 JS，document.write、fetch、模板字符串渲染全无效。
真实可行路径：
- 用 Node.js / Python / PHP 等服务端语言生成 HTML 字符串，把
{{start_date}}、{{tasks}}这类占位符替换成实际值 - 任务列表用循环拼接
<tr>，而不是试图让邮件模板“自己循环” - 日期格式统一用
YYYY-MM-DD，避免本地化导致 Outlook 解析成乱码 - 如果走企业邮箱 API（如 Microsoft Graph），注意它对 HTML body 长度有限制（通常 ≤ 1MB），超长表格要精简空格和注释
最常被忽略的一点：换行符。Windows 客户端对 \n 不敏感，段落之间务必用 <p><br></p> 或 <div><br></div>，不能靠回车缩进控制视觉间距。
