尝试使电子邮件签名正常工作，但无法使图像部分与表列齐平，似乎是底部和右侧的空白/填充。下面是我使用的代码，在浏览器中看起来很好但不是邮件（outlook）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>J.Clarke</title>
<style>
.btmStrip{
/*border:1px solid red;
padding-bottom:50px;
background: linear-gradient(bottom, #000 70%, #fff 70%);
background: -o-linear-gradient(bottom, #000 70%, #fff 70%);
background: -moz-linear-gradient(bottom, #000 70%, #fff 70%);
background: -webkit-linear-gradient(bottom, #000 70%, #fff 70%);
background: -ms-linear-gradient(bottom, #000 70%, #fff 70%); */
}
</style>
</head>
<body>
<table width="700" border="0" cellspacing="0" cellpadding="0" style="border-spacing:0;">
<tbody>
<tr>
<td width="118"> </td>
<td width="62"> </td>
<td colspan="3" rowspan="2" style="text-align:right;padding-right:5%;"><a href="http://name.co.za/" target="_blank"><img src="logo1.jpg" width="131" height="90" alt="co name"/></a></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td colspan="3"><span style="vertical-align:text-top; font-size:14px;font-family:'Montserrat Ultra Light';">Warm Regards,</span></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="4"></td>
</tr>
<tr>
<td width="118" style="height:0px; background-color: #fff;line-height:0px"></td>
<td width="62" style="height:0px; background-color: #fff;line-height:0px"></td>
</tr>
<tr style="background-color:#fff;">
<td colspan="2" rowspan="2" style="text-align:left;"></td>
<td colspan="2" style="text-align:left;"></td>
</tr>
<tr style="background-color:#000;">
<td colspan="2" style="text-align:left;"></td>
</tr>
<tr style="background-color:#000;">
<td colspan="4" style="text-align:center;"></td>
</tr>
<tr style="background-color:#fff;">
<td colspan="2" rowspan="17" align="right" valign="bottom"><img style="display:block" src="http://overit.co.za/tst.jpg" width="180" height="175" alt=""/></td>
<td colspan="2" style="text-align:right;">
</td>
</tr>
<tr style="background-color:#fff;">
<td colspan="2" style="text-align:left;"></td>
</tr>
<tr style="background-color:#fff;">
<td colspan="2" style="text-align:right;"> </td>
</tr>
<tr style="background-color:#000;">
<td colspan="2" style="text-align:left;">
</td>
</tr>
<tr style="background-color:#000;">
<td colspan="2" style="text-align:right;"></td>
</tr>
<tr style="background-color:#000;">
<td colspan="2" style="text-align:right;"></td>
</tr>
<tr style="background-color:#fff;">
<td colspan="2" style="text-align:center;padding:0px 5px;"><hr style="border-bottom: 1px solid #000; background-color:#000;margin-left: 0px;"/></td>
</tr>
<tr style="background-color:#000;">
<td colspan="2" style="text-align:left;"></td>
</tr>
<tr style="background-color:#fff;">
<td colspan="2" style="text-align:center;padding-bottom:2px;"><span style="font-family:'Montserrat Ultra Light'; vertical-align:text-top; font-size:16px;"><span style="font-family:'Montserrat SemiBold';">Name Name</span> | <a style="text-decoration:none;color:#282828;" href="mailto:name@name.co.za" target="_blank">name@name.co.za</a> | <a style="text-decoration:none;color:#282828;" href="http://name.co.za/" target="_blank">www.name.co.za</a> </span></td>
</tr>
<tr style="background-color:#000;">
<td colspan="2" style="text-align:left;" height="11px"></td>
</tr>
<tr style="background-color:#000;">
<td colspan="2" style="text-align:center;"><span style="font-family:'Montserrat Ultra Light'; color:#fff;font-size:10px;"><span style="font-family:'Montserrat SemiBold';">name</span> | 031 031031031 | <a style="text-decoration:none;color:#fff;" href="mailto:kloof@satincandy.co.za" target="_blank">name@name.co.za</a> | <span style="font-family:'Montserrat SemiBold';">name</span> | 031 031031031 | <a style="text-decoration:none;color:#fff;" href="mailto:dnorth@name.co.za" target="_blank">dnorth@name.co.za</a></span></td>
</tr>
<tr style="background-color:#000;">
<td colspan="2" style="text-align:left;"></td>
</tr>
<tr style="background-color:#000;">
<td colspan="2" style="text-align:right;" height="25px"> </td>
</tr>
<!-- <tr style="background-color:#000;">
<td colspan="2" style="text-align:right;" height="28.75px"> </td>
</tr>-->
<!-- <tr style="background-color:#000;">
<td colspan="2" style="text-align:right;" height="28.75px"> </td>
</tr>-->
<tr style="background-color:#000;">
<td width="415" height="18.75px" style="text-align:right;"> </td>
<td width="105" style="text-align:right;" height="18.75px"> </td>
</tr>
<tr style="background-color:#000;">
<td style="text-align:right; padding-bottom:10px;" height="30px"><span style="color:#fff; font-family:'Montserrat Ultra Light';"><span style="color:#d7ab64; font-family:'Montserrat Regular'; font-size:80%;"><a style="text-decoration:none;color:#d7ab64;" href="http://satincandy.co.za/" target="_blank">SHOP NOW</a></span> | <a style="text-decoration:none;color:#fff;font-size:80%;" href="http://satincandy.co.za/" target="_blank">SIGN UP TO OUR NEWSLETTER</a></span></td>
<td width="105" style="text-align:left;padding-right:15px;padding-bottom:10px;" height="30px"><a target="_blank" href="https://www.facebook.com"><img data-class="external" src="instagram.png" align="right"></a>
<a target="_blank" href="https://www.facebook.com/"><img data-class="external" src="pintrest.png" align="right"></a>
<a target="_blank" href="https://www.facebook.com/"><img data-class="external" src="facebook.png" align="right"></a>
<a target="_blank" href="https://www.facebook.com/"><img data-class="external" src="twitter.png" align="right"></a></td>
</tr>
</tbody>
</table>
</body>
</html>
答案 0 :(得分：0)
导致问题的列和行跨度。试试这段代码：
<table width="700" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding-left:180px;padding-bottom:20px;">Warm regards</td>
</tr>
<tr>
<td style="padding-left:180px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td bgcolor="#000000" height="2"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding-left:180px;padding-top:20px;padding-bottom:20px;"><span style="font-family:'Montserrat SemiBold';">loren loren loren loren loren</span></td>
</tr>
<tr>
<td bgcolor="#000000"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="180" align="left" valign="top"><img src="http://placehold.it/180x150/000000/ffffff/?text=Logo+Goes+Here" width="180" height="150" /></td>
<td bgcolor="#FFFFFF" style="padding-top:50px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#000000">
<tbody>
<tr>
<td style="text-align:right; padding-bottom:10px;" height="30px"> </td>
<td style="text-align:left;padding-right:15px;padding-bottom:10px;" height="30px"> </td>
</tr>
<tr>
<td style="text-align:right; padding-bottom:10px;" height="30px"><span style="color:#fff; font-family:'Montserrat Ultra Light';"><span style="color:#d7ab64; font-family:'Montserrat Regular'; font-size:80%;">loren loren loren loren loren</span></td>
<td width="105" style="text-align:left;padding-right:15px;padding-bottom:10px;" height="30px"><a target="_blank" href="https://www.facebook.com"> <img data-class="external" src="instagram.png" align="right" /> </a> <a target="_blank" href="#"> <img data-class="external" src="pintrest.png" align="right" /> </a> <a target="_blank" href="#"> <img data-class="external" src="facebook.png" align="right" /> </a> <a target="_blank" href="#"> <img data-class="external" src="twitter.png" align="right" /> </a></td>
</tr>
<tr>
<td style="text-align:right; padding-bottom:10px;" height="30px"> </td>
<td style="text-align:left;padding-right:15px;padding-bottom:10px;" height="30px"> </td>
</tr>
</tbody>
</table></td>
</tr>
</table></td>
</tr>
</tbody>
</table>
我重新编码并删除了行间距和col跨度。您可以在代码中添加和删除任何内容。