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">[email protected]</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，可是跟我有什麽關系呢？（手動微笑）
EDM模板編寫踩坑指南（非響應式，純table有源碼）