写html邮件模板的核心策略是使用表格布局。因为大多数邮件客户端对现代css支持有限，需放弃div和flexbox，回归原始html表格结构。1. 使用<table>、<tr>、<td>嵌套构建整体布局；2. css样式尽量内联或在<head>中用<style>标签写；3. 针对outlook等特殊客户端可使用vml或条件注释；4. 单列布局是最简单稳妥的方案；5. 多列布局则通过嵌套表格实现，如左右分栏结构。
写HTML邮件模板，说白了，就是一场与时间赛跑、与老旧客户端斗智斗勇的持久战。你不能指望现代CSS在这里大展拳脚，因为大多数邮件客户端对CSS的支持还停留在上个世纪。所以，核心策略就一个字：表（格）。用表格来构建布局，这是目前兼容性最强、最稳妥的方案，没有之一。
要写出兼容性强的HTML邮件模板，你得放下对div和Flexbox的执念，回归到最原始的HTML表格结构。这意味着你的整个邮件布局，从页眉到页脚，从内容区到侧边栏，都得由<table>、<tr>、<td>一层一层嵌套出来。CSS样式呢？尽量内联（inline style），或者在<head>里用<style>标签写，但后者兼容性会差一些，尤其是Gmail这种“挑剔”的。遇到Outlook这种奇葩，你可能还得祭出VML（Vector Markup Language）或者条件注释（Conditional Comments）这种“黑魔法”。这不光是技术活，更是一种耐心和细心的考验。
为什么现代CSS在邮件模板里会“水土不服”？
这问题其实挺有意思的。你可能觉得，都2023年了，怎么还有地方不支持display: flex或者grid？但邮件客户端，它们不是浏览器。它们是软件，有自己的渲染引擎，而且更新迭代的速度远不如浏览器。比如Outlook，它很多版本用的就是Word的渲染引擎，你说它能支持多好的CSS？我记得有一次，一个客户的邮件在Outlook 2007里直接“炸”了，那感觉简直是噩梦。Gmail也有自己的癖好，它会把你的<style>标签里的某些CSS属性给“优化”掉，或者干脆重写你的CSS。这就导致了你用div布局，或者用复杂的CSS属性，在不同的客户端里显示效果会千差万差，甚至直接崩掉。所以，用表格，用那些最基本的、最古老的HTML标签，反而成了最稳妥的选择。这就像回到了网页开发的石器时代，但没办法，这是邮件世界的法则。
立即学习“前端免费学习笔记（深入）”；
单列布局：最稳妥的“万金油”方案
说实话，如果你的邮件内容简单，或者你对兼容性要求极高，单列布局绝对是你的首选。它结构最简单，出错的概率也最低。一个<table>包裹一个<tr>再包裹一个<td>，内容全塞在里面。这种布局几乎在所有邮件客户端都能完美呈现，包括那些老掉牙的。
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="min-width: 100%;">
<tr>
<td align="center" style="padding: 20px;">
<!-- 这里放你的邮件内容，比如文本、图片 -->
<p style="font-family: Arial, sans-serif; font-size: 16px; line-height: 24px; color: #333;">
这是一段邮件正文，采用单列布局，兼容性极佳。
</p>
<img src="https://via.placeholder.com/600x200" alt="示例图片" width="600" style="max-width: 100%; height: auto; display: block; margin: 0 auto;">
</td>
</tr>
</table>注意这里的role="presentation"，它告诉屏幕阅读器这只是一个布局表格，不是数据表格，对可访问性友好。min-width: 100%是为了某些客户端（如Outlook）能正确渲染全宽。
多列布局：嵌套表格的艺术
当你的内容需要分左右两边，或者更多列时，你就得开始玩嵌套表格了。这有点像搭乐高，一个大表格里面套小表格。最常见的是两列布局，比如左边图片右边文字，或者左右各一段内容。
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center" style="padding: 20px;">
<table role="presentation" width="600" cellspacing="0" cellpadding="0" border="0" style="width: 600px; max-width: 100%;">
<tr>
<!-- 左侧列 -->
<td class="column" style="width: 50%; padding-right: 10px; vertical-align: top;" valign="top">
<p style="font-family: Arial, sans-serif; font-size: 16px; line-height: 24px; color: #333;">
这是左侧内容，比如一个标题和一些文字。
</p>
<img src="https://via.placeholder.com/280x1 
