最近一直在忙找工作，好久都没有写过博客了，就是上周，我刚入职的第一周，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>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？