许多电子邮件模板 采用较旧的基于表格的布局开发，不仅容易“损坏”，维护也极为复杂。
在 HTML 中，表格虽适合展示数据，但作为布局工具会干扰动态和富媒体元素，带来无障碍访问挑战、占用大量带宽并引发维护难题，且比 CSS 布局更脆弱。鉴于此，更新广播电子邮件模板势在必行。
在本期《网页设计技巧》中，将快速演示如何将基于表格的广播邮件模板转换为高效美观的 CSS 布局。
谨慎处理：基于表格的布局易损性
需坦白的是，Practical eCommerce 的一封补充内容邮件模板曾出现问题：几条水平线位置错位。这源于其表格布局机制。
该模板主表格宽度设为 550 像素（邮件安全宽度），下方嵌套多层表格，宽度各异（部分为 550 像素，部分仅为一半）。同时，主表格设置了 20 像素内边距（cellpadding）。
当插入宽度超过 530 像素（550 像素有效区域减去内边距）的广告文案时，部分嵌套表格会被撑宽，导致关联的水平线随之变宽，而其他单元格及线条则保持原状。
即便严格控制广告尺寸也难以避免此问题。多数邮件营销编辑器为避免劝退非技术用户，不会提示像素宽度限制。因此，除非每期均由程序员手动调整，否则必须采用更灵活的设计方案。
CSS：解决方案
目标是在保持通讯外观不变的前提下优化创建方式。具体而言，需构建一种结构，确保当广告内容 div 溢出时，水平线尺寸不受影响。
转换工作始于预览原始模板并绘制线框图。针对预期的 <div> 元素共规划了八个模块：
- 包装器：宽度 550 像素的容器 div（<div id="wrapper">），作为邮件布局框架。
- 浏览器链接：保留原模板中允许用户在默认浏览器查看消息的功能。
- 发行日期：显示邮件发布日期。
- 发送给好友：包含转发链接。
- 退订：置于通讯顶部的退订选项。
- 内容：展示广告商信息的补充内容区域。
- 页脚：提供第二个退订链接及实体地址等联系信息。
视频：PeC 邮件补充模板转 CSS 演示
CSS 模板样式代码
以下为适配特定邮件客户端优化后的模板样式代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <style type="text/css"> body {text-align: center;} #wrapper {width: 550px;} #browser-link, #browser-link a {color: #122d95; text-decoration: underline; font-weight: normal; font-size: 10px; line-height: 200%; font-family: Lucida Sans,Lucida;} #logo-link{border-bottom: 1px solid #cfcfcf; padding: 0px;} #logo-link img {width: 550px; height: 72px; padding: 0px; border: 0pt;} #dater {margin: 0px; padding: 0px; float: left; width: 50%; border-bottom: 1px solid #cfcfcf; text-align: left; font-weight: bold; font-size: 12px; line-height: 300%; } #dater em {font-style: normal; color: rgb(160, 40, 44); } #dater span {font-weight: normal;} #dater p{margin: 0px; padding-left: 12px;} #befriend {margin: 0px; padding: 0px; float: left; width: 50%; border-bottom: 1px solid #cfcfcf; text-align: right; font-weight: bold; font-size: 12px; line-height: 300%; } #befriend p {margin: 0px; padding-right: 12px;} #befriend a {text-decoration: none; color: #000000;} #unsub {clear: both; margin: 0px; padding: 0px; width: 100%; border-bottom: 1px solid #cfcfcf; text-align: center; font-family: Arial; font-size: 11px; font-style: italic; line-height: 200%; } #unsub a {color: #122d95;text-decoration: none;font-weight: normal;} #unsub p {margin: 0px; padding: 12px;} #ad-content {margin: 0px; padding-top: 20px; padding-right: 0px; padding-bottom: 20px; padding-left: 0px; width: 520px; text-align: left;} </style> <style type="text/css"> #footer{clear: both; margin: 0px; padding: 0px; width: 100%; border-top: 1px solid #cfcfcf; text-align: left; font-family: Arial; font-size: 11px; font-style: normal; line-height: 100%;} #footer a {color: #122d95; text-decoration: underline; font-weight: normal;} #footer p {margin: 0px; padding-left: 12px; padding-top: 10px;} .vcard {padding-left:12px;} </style> </head> <body> <div id="wrapper"><!--This is the Main container for the email template--> <div id="browser-link"><!--This div is for the view in browser link--> <a href="../../*%7cARCHIVE%7c*">View in Browser</a> </div><!--end browser-link--> <div id="logo-link"><!--This div houses the logo--> <a href="https://www.practicalecommerce.com"><img src="http://img.mailchimp.com/2008/07/25/a717915556/ecommercenotes.gif" alt="Ecommerce Notes Supplement. If you're seeing this message you have images turned off. Try turning images on to see our logo, and other images on this page" /></a> </div><!--end logo-link--> <div id="dater"><!--This div hold the email's date--> <p>Ecommerce<em>Notes</em> <span>- April 15, 2009</span></p> </div><!--end dater--> <div id="befriend"><!--This div hold the forward to friend link--> <p> <a href="../../*%7cFORWARD%7c*">Forward to a Friend</a></p> </div><!--end befriend--> <div id="unsub"><!--This div hold the first unsubscribe statement--> <p>As an EcommerceNotes subscriber, we're pleased to provide you this unique educational offer. If you'd prefer to not receive any email communications from us, please <a href="../../*%7cUNSUB%7c*">unsubscribe</a> your email address.</p> </div><!--end unsub--> <div id="ad-content"><!--the ad goes here--> AD COPY GOES HERE </div><!--end ad-content--> <div id="footer"><!--this is the footer matter--> <p>*|LIST:DESCRIPTION|* You can <a href="../../*%7cUNSUB%7c*">unsubscribe</a> your email address (*|EMAIL|*) from this list at any time.</p> <p>Our mailing address is:<p/> <p>*|HTML:LIST_ADDRESS_HTML|*</p> <p>Copyright © 2009 Practical eCommerce. All rights reserved.</p> </div><!--end footer--> </div><!--end wrapper--> </body> </html>
参考资源
- Joe Dolson《无障碍网页设计》文章：为什么不用表格？CSS真的更好吗？
- HotDesign.com 文章：用表格进行布局是愚蠢的
- 网站设计中 CSS 优于表格的 13 个理由