yaofly2012
commented
1 year ago 回顾table的元素们
table
display: table特殊性
display: table元素首先是个块元素，但是尺寸（宽高）是由内容决定（默认情况下）的。这一点跟display: block元素不同。
display: table元素像是个width: fit-content的display: block元素。但是display: table元素也可以显示的指定宽度和高度。
综上display: table元素和display: block元素区别在于：
display: table元素默认宽度由内容决定，display: block元素默认宽度则占据整行。
其他情况两者倒是没啥区别。
属性
1. cellpadding
2. cellspacing
3. border
4. align
5. width
但这些都是被废弃的属性（都可以用CSS实现），在实际编程中我们更多的是重置这些属性。
相关CSS属性
td
display: table-cell特殊性
元素以表格单元格td的形式呈现，具体表现同td，如：
- 支持垂直对齐
- 无法使用
margin属性
1.
height2.
width3.
align4.
valign
背景
产品大大让美化下发给用户的邮件内容。还有之前写过EMD，自认为不难，但是实际做的时候发现却没那么容易。因为之前写的EDM页面都是基于公司公共页面结构，自己只是填充一些内容。不过好在会用Google，网上确实不少资源。
EDM（Email Direct Marketing）电子邮箱营销
都2022年谁还用EDM呀。国内用户手机不离手，但是海外用户难以使用短信、app通知触达。EDM是触达海外用户的重要方式。
考虑的问题
限制 & 注意事项
其他博客里列举了很多，这里汇总比较重要的。
1.
table布局采用table元素布局。即：
table->tr->td作为容器；table，tr的属性实现对齐方式。刚开始不太习惯，并且
table本身也带有很多默认的属性，导致实现起来比较困难。2. 内联样式
尽量采用内联样式。 如果要使用
style标签声明样式，则最好加上!import。记得把style标签放在body里，不要放在head标签里，因为有些邮箱会忽略head标签内容。3. 图片的使用
图片估计是唯一可以使用的外部资源了，但是需要注意的是
实战
重置
table默认样式通常会重置
table的border,cellspacing,cellpadding属性，并且指定width。如果
table占据整行，最好也加上min-width: 100%样式，因为目前在IOS gmail遇到table宽度完全由内容决定，即指定width="100%"无效，效果如图（期望结果：表格和按钮占据整行）：综上最终
table样式如：移动端适配
利用媒体查询
@media但是有些邮箱并不支持媒体查询（目前测试发现有华为P20 内置邮箱）
容器居中
方式1：
table元素的align特性方式2:
div元素的align特性元素对齐
td（有时也可用tr）元素的align，valign特性。垂直（水平）间距
方式1:
td指定paddingtable(tbody,tr)无法指定padding的，因为表格的内容展示在td里，所以只能给td指定padding。方式2: 利用空
td的高度(宽度)实现垂直（水平）间距。 注意windows版outlook会忽略空td的高度，不过可以这样写避免这个问题：为了避免空格
高度超过单元格高度可以指定font-size:0;。border实现td制定CSSborder属性table本身有border属性，但基本都赋值为0，如果真要实现border效果，可采用CSSborder属性。 记得在td上采用border属性控制。border-radius实现可以给
table或者td指定border-radius样式，但如果采用table实现，则要border-collapse: separate;很遗憾windows版outlook不支持经验总结
display: inline-block& 圆角按钮Outlook并不支持该属性。
内容结构不能强依赖图片
有些邮箱默认不加载图片，一定要保证图片不加载是内容结构也能正常阅读。
一定先多看看效果
网上很多针对HTML email的校验工具和发送邮件服务，但基本都收费。屌丝就发给自己看开，土豪的话可以借助工具。
多看看别人怎么写的
奇葩的Outlook
Outlook与Word等共享HTML渲染引擎。几乎仅支持HTML2，其能力堪比IE5！ mac版Outlook表现到是很好。
参考