EDM模板编写踩坑指南（非响应式，纯table有源码）
如果问你table布局，你肯定会嗤之以鼻？什么table布局？不是早已经淘汰了吗？但是如果让你写EDM邮件模板，table布局相对来说是最好的选择。
如果让你立刻写EDM，你在网上搜的话，得到的信息相对较少，但是又很懵的话，建议你看看这篇文章，让你30分钟之内入门并开始写, 需要源码再私我吧~
或许有人会问EDM是什么，Email Direct Marketing的缩写，即电子邮件营销。EDM模板就是你邮箱中的广告邮件，其实就是在邮件中写网页。但是EDM模板怎么书写。如果你在网上搜，或许你会搜到以下书写要点：（以下要点来自知乎）
CSS只可以使用内联样式表，如：style=“margin：0“
-
设计之初遵循：图上无文本，文本后无底纹的规则
- 使用table而非div
- 所有图片使用 img标签，如：<img style=”display:block” src=””/>
- 可以适当使用占位符space.gif
- 多用<br/>换行而非<p>
- 整体最佳宽度为：550-600px
- 不使用javascript
- 正式发送给用户前，多次测试
- 负边距部分邮箱会被屏蔽，不能用
可是看到这些，对于新手小白来说仍旧不友好，什么是table布局？？到底哪些能用哪些不能用？即使你去问别人，别人告诉你也是多测试多测试。可是既要兼容PC也要兼容移动，移动端既要兼容安卓也要兼容ios，之后也得注意不同端口打开的适配，比如，适配微信打开和用手机自带浏览器打开或者主流邮箱打开比如：网易邮箱大师、腾讯邮箱等等。
之前有人告诉我你能兼容 outlook的话，兼容其他大部分不成问题了。如果我们想弄清楚怎么才能支持这么多不同端口打开的话，不是本文的主要讲述点。
因为只要你遵循table写法，完全可以避开前人走过的深坑，快速在相应时间内完成工作。
好了，下面开始讲什么是table布局呢？
有些小伙伴可能要说了美团的EDM是table+div，网易的一些邮件是图片加链接，等等，我说明一下，本文写的是非响应式的纯table布局。首先说一下table的组成：表格
- <tr>：表示表格的行
- <td>：表示表格的列
- <tbody>：表示表格的主体内容
- 属性cellpadding：规定单元边沿与内容之间的空白
- 属性cellspacing：规定单元格之间的空白
- align:表格相对周围元素的对齐方式。
基础知识参考链接：http://www.w3school.com.cn/tags/tag_table.asp
现在我们知道什么是table布局了，那么该如何不用div来实现css中的一些效果？css世界中张鑫旭对于table布局中有说,table比css2出现的还要早,这就是为什么一些css的布局在table中不适用。所以我们可以使用P标签来实现块元素div 的效果。来，让我们模拟整个EDM书写过程。
- table 布局写法：这是最外层的table
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%"> </table>
- 利用td实现空白书写，而不是margin，代码为上边距和左边距的写法
<tr> <td height="34" valign="top"></td> </tr> <tr> <td width="20px"> </td> </tr>
方法二：直接在td中加左边距,与第一种是一样的,第一种优点是整齐,当边距一致时可复用,把边距与内容分开.
<tr>
<td width="" valign="top" style="padding-left:55px;font-family:Arial, Helvetica, sans-serif;font-size:16px;line-height:14px;color:#333333">
<p>更多讲师</p>
<p>持续更新中......</p>
</td>
</tr>
参考国外的模板写法如下：
<table class="remove-left" style="font-size: 0;line-height: 0;border-collapse: collapse;" align="left" border="0" cellpadding="0" cellspacing="0" width="1"> <tbody> <tr> <td style="font-size: 0;line-height: 0;border-collapse: collapse;" height="3" width="0"> <p style="padding-left:15px;mso-table-lspace:0;mso-table-rspace:0;"></p> </td> </tr> </tbody> </table>
3. 邮箱被自动识别颜色变为浏览器给的默认颜色怎么办？
放在a便签里,并设置style
<tr> <td> <p style="margin-top: 0; margin-bottom:0;text-decoration:none;font-size:12px;color:#ffffff;font-family:'Microsoft YaHei';opacity:0.8"> 联系邮箱：<a href="" style="text-decoration:none;color:#ffffff">lasia961@163.com</a> </p> </td> </tr>
4. IOS中,电话被safari自动识别为电话变为默认的蓝色并且可以点击打电话,与设计稿色调不一致怎么办
如果你去百度的话,结果如下,让你加入私有属性
safari有私有属性可以避免,但是我们是edm 不能加入meta
<meta name="format-detection" content="telephone=no" />
敲黑板,下面!
看到了没先用span转一下,在 span后面加入一些字母,将字母颜色设置为底色,即背景色
<tr> <td> <p style="margin-top: 0; margin-bottom: 0;font-size:12px;color:#ffffff!important;font-family:'Microsoft YaHei';opacity:0.8"> 咨询电话：<span>0</span><span>0</span><span style="display:none">crfebetf</span><span>0</span><span>-</span><span>0</span><span>0</span><span style="display:none">crfebetf</span><span>0</span>-<span>0</span><span>0</span><span style="display:none">crfebetf</span><span>0</span><span>0</span><span style="color:#2e3133">abc</span> </p> </td> </tr>
5. 安卓中出现,5位数字以上被一些手机邮箱或者浏览器识别电话,并带有蓝色之类的,点击到拨打界面,如何解决
用span转一下
<tr> <td align="center" valign="top"> <p style="text-decoration:line-through;font-size: 12px; line-height: 14px; color: #666566; font-family:'Microsoft YaHei',Arial, Helvetica, sans-serif; text-transform: uppercase; padding: 0; margin: 0;"> ¥<span>0</span><span>0</span><span>0</span><span>0</span><span>0</span> </p> </td> </tr>
6. 在chrome看没问题的,在outlook看有些元素被跟预期的不一样怎么办？
这个时候,打开审查元素,如果元素被加上了外边距 则在这个元素的样式中加上
<td> <p style="margin-top:0;margin-bottom:0;height:12px;display:block;color:#e63453;font-size:12px;width:25px;border-top:2px solid #e63453 !important;margin-left: 31px; padding-left: 48px;"> </p> </td>
以上代码告诉你如何用p标签划线,其实就是把p标签当div一样用.然后去掉外边距。
7. 以上部分是我遇到在网上也搜不到解决方式的问题。踩过太多坑，保守一点没坏处。因为你不一定知道到底是什么原因导致手机屏幕显示的差异，不同邮箱打开的差异。
8. 今天是520，可是跟我有什么关系呢？（手动微笑）