最近一直在忙找工作，好久都没有写过博客了，就是上周，我刚入职的第一周，leader问我有没有写过EDM，我连EDM是啥都不知道，但是还是放心的交给了我，只告诉我用table布局，样式写在行内。然后就给我一张效果图，看起来不是太复杂。而且是定宽高的那种。
然后就开始码代码，我的确是用来table进行布局，只是里面用了好多p和ul标签，然后天真的加了许多margin和padding进行调整。然后在浏览器上看了一下效果，和效果图一样，然后用qq邮箱发了HTML格式的邮件，打开邮件一看当时就懵逼了，完全两个模样，打开控制台一看，我的标签好多都给我转换了，简直变得面目全非。
仔细观察发现，好多样式都没有加上，邮件自动给过滤了，比如padding，margin等，然后我尝试用另一种方式去实现这个模板，直接就重新做了一版，全部都用table自带的标签以及自带的属性，想通过align和valign实现居中，于是乎就重写了代码。去掉了ul标签以及p标签，码完代码又重新发了一遍邮件，效果比之前好多了，只是在居中方面还是有问题，在客户端中没有实现居中，也就是说table自带的居中属性失效了。。。。
发现问题后便是解决问题了。其实table利用三列布局，中间td定宽或者根据内容自适用，两边td不设宽度，出来效果就是两侧td宽度相等，中间内容水平居中的效果
上面这些操作其实基本已经可以实现具体的效果了，但是在我这还有一个问题，是在小米手机内置邮箱软件中会将img的原始大小显示出来，也就是我给它设置的宽高没起作用，我试着给它的父标签设置宽高，可是还是不行，最后我用style方式给他加了宽高，而且通过important赋予最高级别，结果搞定了，其实一般来说不建议用style给元素设置宽高，因为有的软件会直接将style过滤掉，这里只能做一个兼容性处理，通过width和height并且加上style赋上important界别的宽高，所以，保全期间，再给img设置大小是还是采用双管齐下的方式吧。
下面赋上代码结构
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<table width = "100%" bgcolor = "#ededed">
<tr>
<td></td>
<td width = "600">
<table width = "600" bgcolor = "white" style="border-top:2px solid #ff4a02;">
<!--顶部40px空白-->
<tr>
<td height="30" width = "600" colspan="3">
</td>
</tr>
<!--顶部标题和logo-->
<tr>
<td colspan="3">
<table width = "600">
<tr>
<td width="40">
</td>
<td align = "left" style = "font-size:20px;font-weight:600;">
满五周年员工信息
</td>
<td width="40">
<img width="40" height="40" src="http://10.236.91.5:8888/001/logo.jpg" style="width:40px !important;height:40px !important;">
</td>
<td width="40">
</td>
</tr>
</table>
</td>
</tr>
<!--顶部大图-->
<tr>
<td colspan="3">
<img width = "600" src="http://10.236.91.5:8888/001/big-title.jpg" style="width:600px !important;">
</td>
</tr>
<!--40px空白-->
<tr>
<td colspan="3"> </td>
</tr>
<!--问候语-->
<tr>
<td width="40"> </td>
<td align = "left" valign="middle" style = "font-size:20px;font-weight:600;">总 您好
</td>
<td width="40"> </td>
</tr>
<!--40px空白-->
<tr>
<td colspan="3"> </td>
</tr>
<!--摘要-->
<tr>
<td width="40"> </td>
<td align = "left" valign="middle" style="font-size:16px;">如下是小米网2016年6月18日至2016年6月24日之间满五周年的员工信息，共计3人
</td>
<td width="40"> </td>
</tr>
<!--分割线-->
<tr>
<td width="40"> </td>
<td style="border-bottom:1px solid #e5e5e5;"> </td>
<td width="40"> </td>
</tr>
<!--40px空白-->
<tr>
<td width="40"> </td>
<td> </td>
<td width="40"> </td>
</tr>
<!--数据列表-->
<tr>
<td width="40"> </td>
<td>
<table height = "200">
<tr>
<td width="20"></td>
<td>
<table height = "200" style="border:1px solid #aa6a51;margin:auto;">
<tr>
<td width = "160" height="200" bgcolor="red">
<table width = "160" height = "200">
<tr><td height ="20"> </td></tr>
<tr><td align ="center" width="116" height="160"><img src="http://b2c-mioa-res/2ee0ba87-fe60-4654-873d-d50752ed91c1?thumb=1&w=1000&h=1000" width="116" height="160" style="width:116px !important;height:160px !important"></td></tr>
<tr><td height ="18"> </td></tr>
</table>
</td>
<td width="20"> </td>
<td width="260">
<table width = "100%">
<tr align="left">
<td height = "40" style="font-size:20px;font-weight:600;color:black;">丁强<span style="color:#a0a0a0;">(709)</span>
</td>
</tr>
<tr align="left">
<td height="24" style="font-size:16px;">五周年纪念: <span style="color:#a0a0a0;">09月21日</span></td>
</tr>
<tr align="left">
<td height="24" style="font-size:16px;">岗位: <span style="color:#a0a0a0;">SPA工程师</span></td>
</tr>
<tr align="left">
<td height="24" style="font-size:16px;">部门: <span style="color:#a0a0a0;">平台研发部</span></td>
</tr>
<tr align="left">
<td height="24" style="font-size:16px;">电话: <span style="color:#a0a0a0;">1830395</span></td>
</tr>
<tr align="left">
<td height="24"><span>邮箱: </span><a href="http://www.baidu.com/" style="font-size:14px;color:#f24e28;">yuqiang@.com</a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="20"></td>
</tr>
</table>
</td>
<td width="40"> </td>
</tr>
<!--40px空白-->
<tr>
<td width="40"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td width="40"> </td>
<td>
<table height = "200">
<tr>
<td width="20"></td>
<td>
<table height = "200" style="border:1px solid #aa6a51;margin:auto;">
<tr>
<td width = "160" height="200" bgcolor="red">
<table width = "160" height = "200">
<tr><td height ="20"> </td></tr>
<tr><td align ="center" width="116" height="160"><img src="http://2ee0ba87-fe60-4654-873d-d50752ed91c1?thumb=1&w=1000&h=1000" width="116" height="160" style="width:116px !important;height:160px !important"></td></tr>
<tr><td height ="18"> </td></tr>
</table>
</td>
<td width="20"> </td>
<td width="260">
<table width = "100%">
<tr align="left">
<td height = "40" style="font-size:20px;font-weight:600;color:black;">丁强<span style="color:#a0a0a0;">(709)</span>
</td>
</tr>
<tr align="left">
<td height="24" style="font-size:16px;">五周年纪念: <span style="color:#a0a0a0;">09月21日</span></td>
</tr>
<tr align="left">
<td height="24" style="font-size:16px;">岗位: <span style="color:#a0a0a0;">SPA工程师</span></td>
</tr>
<tr align="left">
<td height="24" style="font-size:16px;">部门: <span style="color:#a0a0a0;">平台研发部</span></td>
</tr>
<tr align="left">
<td height="24" style="font-size:16px;">电话: <span style="color:#a0a0a0;">1830395</span></td>
</tr>
<tr align="left">
<td height="24"><span>邮箱: </span><a href="http://www.baidu.com/" style="font-size:14px;color:#f24e28;">yuqiang@.com</a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="20"></td>
</tr>
</table>
</td>
<td width="40"> </td>
</tr>
<!--分割线-->
<tr>
<td width="40"> </td>
<td style="border-bottom:1px solid #e5e5e5;"> </td>
<td width="40"> </td>
</tr>
<!--40px空白-->
<tr>
<td width="40"> </td>
<td> </td>
<td width="40"> </td>
</tr>
<tr>
<td width="40"> </td>
<td colspan="2" align="left" style="font-size:20px;font-weight:600;">祝福语推荐</td>
</tr>
<!--40px空白-->
<tr>
<td colspan="3"> </td>
</tr>
<tr align="left">
<td width="40"> </td>
<td style="font-size:16px;">过去的五年，是艰苦创业的五年，是努力拼搏的五年，也是公司值得骄傲的五年。广大员工，沿着公司发展的方向，兢兢业业，努力拼搏，爱岗敬业，朝着共同的目标一同奋进，取得了巨大的成绩。</td>
<td width="40"> </td>
</tr>
<!--40px空白-->
<tr>
<td colspan="3"> </td>
</tr>
<tr align="left">
<td width="40"> </td>
<td style="font-size:16px;">辛苦五年，我们创造佳绩，努力五年，我们成就奇迹，来年更需积极，努力团结一起，全员一起奋斗，公司创新天地，愿你身体健康，万事如意，合家快乐，幸福甜蜜。<span style="color:#f24e28">复制</span></td>
<td width="40"> </td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
