必须用<table>而非<div>布局，因Outlook桌面版用Word引擎不解析<div>，Gmail剥离<style>，Apple Mail和QQ邮箱忽略class/id；唯一可靠的是<table><tr><td>三层嵌套结构。
html-deploy
使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。
下载
为什么必须用 <table> 而不是 <div> 布局
Outlook 桌面版（2016–2024）用的是 MS Word 渲染引擎，根本不解析
<div>；Gmail 会整块剥离
<style> 标签；Apple Mail 和 QQ 邮箱对
class 和
id 视而不见。你写的
<div class="header">Hello</div> 在多数客户端里等于没写。真正能稳住布局的，只有三层嵌套的
<table> → <tr> → <td> 结构。
<table> 的硬性属性写法
这些不是“建议”，是 Outlook/Gmail/Yahoo 共同认的最低生存线：
- 所有
<table> 必须显式声明 cellpadding="0" cellspacing="0" border="0"；漏掉 border="0"，Outlook 可能渲染出 1px 黑边
- 最外层套一层
<table width="100%">，里面嵌一个固定宽的 <table width="600">；别用 max-width，Outlook 不识别
- 居中靠两层：
<td align="center"> 提供上下文，内层 <table align="center"> 才真正生效；单写 style="text-align: center" 在 Outlook 2010 中大概率失效
图片、按钮、文字怎么不跑偏
它们不是独立元素，而是要“寄生”在已居中的
<td> 里：
- 图片必须同时写
width 和 height 属性（如 <img width="200" height="40">），再补上内联 style="width: 200px; height: 40px;"；只写 CSS，在 Outlook 里尺寸归零
- 按钮不能用
<button> 或加背景色，得用嵌套 <table> 模拟：<table align="center"><tr><td bgcolor="#007bff" style="padding:12px 24px">点击确认</td></tr></table>
- 文字对齐统一用
<td align="left/center/right">，别信 style="text-align"；小字号文字（如 footer）优先用 <font size="2">，比 CSS font-size 在旧版 Outlook 中更稳
响应式不是靠 @media，是靠 width + !important 强控
@media 在 Gmail、Outlook、Yahoo 中基本无效。真起作用的是这组组合：
- 最外层
<table width="100%"> 包裹，加 style="max-width: 600px; width: 100% !important;"
- 内部单元格用
width="100%" + style="min-width: 300px;" 控制最小宽度
- 避免
colspan/rowspan；Samsung Email 等 Android 客户端常解析错位，宁可用嵌套 <table> 拆分列
- 背景图必须带
bgcolor fallback：<td bgcolor="#f5f5f5" background="bg.jpg">，否则 Gmail 里空白
越复杂的模板，越要克制“想让它看起来更好”的冲动。字体、圆角、阴影、动画——这些不是锦上添花，而是给兼容性埋雷。真正难的不是写出来，是在删掉 70% 的现代 CSS 后，还能让信息清晰、操作可达、品牌可辨。
