html表格内填充玩转前端若何创立完善的HTML邮件

制作一封邮件和制作web页面还是有很大不同的。
当不同的浏览器都在不断向标准靠近的同时，大多数邮件客户端却止步不前，乃至有一些是在退步的。
在2007年，Microsoft 将 Outlook 的渲染引擎从 IE 转换成 Word的渲染办法，而一些基于web的邮件客户端，像Gmail和Hotmail，则增加了一些怪异的模式，还有Lotus Notes的一些技巧。

根据我的履历来看，我们办理这些问题的关键是要关注下面三件事情。
首先，保持大略，你的邮件设计的越繁芜，你的邮件在某个受欢迎的、不支持标准的客户端上“抽风”的可能性就越大。
其次，你须要将你的编码技巧退步十年，这常日意味着我们要利用嵌套的表格，将CSS写成内联的形式等。
末了，你须要对你的设计进行规律性的测试。

利用表格布局

由于诸如Gmail和Outlook 2007 无法支持浮动(float)、外边距(margin)、内添补（padding）,你须要利用表格来作为你的邮件的框架。
虽然表格嵌套的方法被广泛支持，但是在对单元格的宽度、外边距和内添补的处理方法并不一致。
为了达到最优的效果，当制作表格构造时，请记住下面的技巧。

html表格内填充玩转前端若何创立完善的HTML邮件 React

1、为每个单元格设置宽度，而不是表格

当你把表格宽度、td 宽度、td的添补和CSS的添补写到一封邮件时，你看到的结果可能是每个邮件客户端它们看上去都不一样。
最可靠的方法是我们将为表格的每个单元格(th,td)设置宽度，而不是表格(table)本身。
如下：

永久别指望邮件客户端能够打算出你没有指定宽度的单元格的宽度。
它绝对不会。
同时也要避免利用基于百分比的宽度，像 Outlook 2007 这样的客户端从来不考虑这种宽度办法，特殊是这些嵌套的表格。
像素级视觉，如果你想对每个单元格做添补，可以利用表单的单元格填属性或者用CSS的内添补，但是不要这两种一起利用。

2、嵌套迷思

表格的嵌套相对付设置旁边浮动和外边距(margin)或者表单单元格添补的方法更加稳固。
如果你能利用这种表格嵌套的方法达到相同的效果，这将会给你在那些蹩脚的（buggier）邮件终端上面得到最好的结果。

3、利用一个容器表单来设置 body 背景色彩

很多邮件客户端会忽略掉在CSS中或者<body>标签中设置的背景色。
针对这种情形，将你的整封邮件用一个宽度为100%的表单包起来，并且为其设置背景色。
如下：

你可以利用同样的方案在背景图片的设置上，须要记住的是某些邮件客户端是不支持背景图片的，这样你就须要设置一个背景颜色作为备份方案。

4、在单元格中避免利用多余的空格（whitespace）

尽最大可能，避免<td>标签中涌现空格。
某些邮件客户端（Yahoo!或者Hotmail）可能会在某些场景下，对单元格的上面或者下面增加额外的添补，把你的设计毁坏掉。

CSS 和基本的笔墨格式

当某些邮件设计师尽他们最大的努力去避免利用CSS时，他们又会去依赖梦魇般的<font>标签，但实际情形是很多的CSS属性是被大部分邮件客户端支持的。
请查看下面的跨邮件终真个综合CSS支持列表list of CSS support，从中你也能创造一些安全的属性和一些该当被避免利用的属性。

1、将css写成内联(inline)的样式

Gmail便是这方面的罪魁罪魁。
CSS被从<head>和<body>中剥离，我们别无选择的会将样式写成内联的形式。
一个好是你可以完备自动化的完成转化。
像Premailer供应见地点击的办法完成这一过程。
我强烈建议你将此步骤作为你构建活动的末了一步，你就能感想熏染到这个CSS的所有益处。

2、避免利用字体的简写和十六进制计数法

一部分邮箱客户端会放弃对简写的css字体属性的解析。
比如，绝对不要将你的字体样式设置成下面的样子。
如下：

相反，我们该当写成下面的形式：

谈到字体这个话题，我最近也在不同的邮件客户端测试引用字体（@font-face）。
结果是悲惨的，这些浏览器安全的字体在邮件中利用还是遥遥无期。

当我们用CSS来声明颜色属性时，有些邮件客户端并不支持简写的16进制的颜色值，比如 color:#f60; 我们须要将其补充完全 color:#ff6600;。
为了达到最优的效果，我们须要利用常规写法。

段落

像前面提到的单元格的间距，段落的间距也无法做到所有客户真个同等。
我看到过设计师利用两个<br>或者用DIV写上内联(inline)的外边距(margin)样式填补这个短板，但是我最近的测试显示大多数情形下对段落的支持都还是比充足的（有一段韶光 Yahoo! 根本不支持段落标签）。

最好的实践方法是对每个段落通过内联(inline)的方法设置外边距(margin)，像下面这样：

再次提示，在你构建邮件的时候通过在head标签中增加样式，然后通过Premailer将他们转化成每个段落的内联样式。

如果你的设计对高度是很敏感的或者须要像素级别的完美，我强烈建议你不要将所有的段落写到一起，而是将文本的格式化事情放到表单的单元格中来做。
你可能会须要利用到表单的嵌套或者单元格添补(cellpadding)/CSS 来达到期望的样子。
下面便是一个例子：

链接

某些邮件客户端将会用他们的默认样式覆盖你的链接色，你可以通过两部来防止其发生。
第一，针对每一个链接设置一个内联的（inline）的颜色：

接下来，增加一个冗余的 span 标签在 a 标签中。

大概这些方案看上去比较过激，如果这个颜色对你的设计很主要，这个多余的 span 标签是你达到同等表现的最好办理方案。

HTML邮件中的图片

很主要的一件须要牢记在心中的关于图片的事情是你的订阅者可能看不到你的图片。
如果你有这方面的准备，你就会保持你的内容大略，并且主要的内容不通过图片的形式来展示。

在这个思想的辅导下，在利用HTML邮件的过程中，下面有一些基本的办法须要牢记：

1、避免占位图片

虽然利用占位图片和嵌套表格的办法在10年前很盛行，许多邮件客户端已经将其打消作为一种可靠的技能。
很多客户端会利用一个相同尺寸的空占位来更换图片，其余一些会将所有的图片移除。
大多数邮件客户端会给图片授予默认的图片区块，这将导致订阅者的第一觉得很差。
坚持将单元格授予固定的宽度，让其在没有图片的时候版式不会乱掉。

2、将图片定义尺寸

如果你没有给每个图片设置尺寸，当图片没有被下载时，有些客户端会自己发明一个他们自己的尺寸，你的版式就乱掉了。
同时，确保你的所有图片在被用到邮件中前，都被授予了精确的尺寸。
某些客户端会忽略你代码中设置的尺寸，而去利用真实的图片尺寸。

3、避免利用 PNG 图片

Lotus Notes 6 和 7 并不支持 8位（8-bit）和24位（24-bit）的 PNG 图片，以是须要利用GIF或者JPG格式的图片，纵然这会增加而外的图片大小。

4、为背景图片供应备份的颜色

Outlook 2007 不支持背景图片(aside from this hack to get full page background images working)。
如果你想在你的设计中利用背景图像，供应一个背景色作为备份支持方案。
这样就能同时办理图片被屏蔽和Outlook 2007的问题。

5、不要忘却标注替代文本（alt text）

短缺标准的支持意味着邮件客户端对语义化和访问性良好的HTML邮件的毁坏性是很大的。
纵然这样，从图片可能被屏蔽角度看，供应替代文本也是很主要的。
这样纵然图片在默认状态下被限定，大多数邮件客户端也能显示供应的文本来替代。
其余还须要技能的是某些客户端，比如 Outlook 2007, Hotmail 和 Apple Mail 在图片被屏蔽的时候，并不供应替代文本（alt text）.

6、针对 Hotmail 利用显示hack

令人费解的是，Windows Live Hotmail 对每个图片增加了几个像素的添补。
一个变通的方案便是利用下面的显示属性来办理这个问题。

这样就能移除掉Hotmail的添补值，但是你也可能会给其它客户端埋下隐患。

7、避免利用浮动属性（float）

Outlook 2007 和早期版本的 Notes 并不支持浮动属性（float）。
在邮件中我们可以利用对齐属性在针对图像标签做到浮动图片的目的。

如果你在 Yahoo！
的邮件中创造图片的怪异表现，增加 align=\"大众top\公众可能能够办理你碰着的问题。

视频邮件

由于短缺 Javascript 或者其他工具标签（object tag）的支持，视频邮件最大的程度便是gif动画（如果你认为那是视频的话）。
只管如此，我最近做的一些关于用html5 videio 标签的测试结果，还是让人觉得不错。

HTML 5的标签目前在一部分邮件终端是无法运行的，包括 Apple Mail,Entourage 2008, MobileMe 和 iPhone.作为如果视频不被支持的补救方法，你可以供应稳定的备选内容，比如gif 动画或者一个可以点击到浏览器播放视频的图片。

当然，你是否须要将视频添加到你的邮件里面，那便是其余一个议题了，如果你的答案是肯定的，你可以利用这些代码案例。

关于移动端邮件的那些事

移动端有机胺的情形近期显得比较凌乱了，随着iPhone,Android的发明和Palm和RIM的改进，认为移动端电子邮件终端不主要的年代一去不复返了。