0

我讨厌写电子邮件模板。

话虽如此，我创建了一个非常好的表格模板，但 Outlook 2007 和 Outlook 2010 在 TR 之间创建的间距比我在其他电子邮件客户端中注意到的要大。

OL 2007 (http://screencast.com/t/YJ5LdTkiGR) OL 2010 (http://screencast.com/t/Ob1ii370C)

代码在下面找到。非常感谢任何帮助让事情在 Outlook 中工作，这样我就可以学习，下次不必打扰你 :)

<html>
<body>

<style>
tr {border:none;}
</style>

<table id="container" border="0"  background-color="#D3E2E9" width="620px" cellpadding="0" cellspacing="0" style="background:#D3E2E9;">
 <tr><td>


<table id="container_border"  cellpadding="0" cellspacing="0" style="border:1px solid #85898B; width:570px; margin-left:20px; margin-top:20px; margin-bottom:20px;">
 <tr><td>
<!-- content -->
<table id="content"  cellpadding="0" cellspacing="0" style="margin-left:15px; margin-top:20px; margin-bottom:20px;padding:10px; width:517px; background:white;">
 <tr><td>

 <tr>
  <td><img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/7.jpg"></td>
 </tr>
 <tr>
  <td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; margin-top:20px; padding:0 52px; font-weight:bold;">Announcing, da, da, da, DAAAAAAAAAAA, the brand new awesomely helpful, 
wildly interesting Back Bay Shutter Company website. Full of juicy information 
on all of our products, from shutters, shades and blinds to Shoji panels, this 
site will help make the job of choosing just the right window treatment a snap.</td>
 </tr>
 <tr>
  <td><img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/8.jpg"></td>
 </tr>
 <tr>
  <td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; margin-top:20px; padding:0 52px; font-weight:bold;">We even have product videos, so you can actually see how a product looks and 
works in people's homes (and who doesn't like a peak at someone else's home?). 
We also have a blog, brimming with design news and views. 
</td>
 </tr>
<tr>
<td>&nbsp;</td>
</tr>
 <tr>

<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; margin-top:90px; padding:0 22px; font-weight:bold;">
<table>
<tr>
<td>
<a href="" title="Join Our Facebook Page"><img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/6.jpg" border="0"></a>
</td>
<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; font-weight:bold;">
So become a Facebook fan and stay updated on what we're doing. And stop by often. We can't wait to show you around.
</td>
</tr>
</table>

</td>
 </tr>
 <tr>
  <td><img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/3.jpg"></td>
 </td></tr>
</table>
</td></tr>
</table>
</td></tr>
</table>

</body>
</html>
4

2 回答 2

1

请尝试使用下面的内联样式来清空 tds 避免更多间距，因为空 tds

style="font-size:0%; line-height:1px; mso-line-height-rule:exactly;"

简单而快乐的编码

于 2014-11-01T06:22:28.213 回答
0

额外的空间是由这个空行引起的：

<tr>
<td>&nbsp;</td>
</tr>

尝试将该行替换为：

<tr>
<td height="0" style="padding: 0; margin: 0; height: 0;"></td>
</tr>

或者，有时在处理 Outlook 时，最容易使用<br>间距。

<br>这是您在最后一段末尾添加2 的完整 HTML ：

<html>
<body>

<style>
tr {border:none;}
</style>

<table id="container" border="0"  background-color="#D3E2E9" width="620px" cellpadding="0" cellspacing="0" style="background:#D3E2E9;">
 <tr><td>


<table id="container_border"  cellpadding="0" cellspacing="0" style="border:1px solid #85898B; width:570px; margin-left:20px; margin-top:20px; margin-bottom:20px;">
 <tr><td>
<!-- content -->
<table id="content"  cellpadding="0" cellspacing="0" style="margin-left:15px; margin-top:20px; margin-bottom:20px;padding:10px; width:517px; background:white;">
 <tr><td>

 <tr>
  <td><img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/7.jpg"  style="display:block"></td>
 </tr>
 <tr>
  <td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; margin-top:20px; padding:0 52px; font-weight:bold;">Announcing, da, da, da, DAAAAAAAAAAA, the brand new awesomely helpful, 
wildly interesting Back Bay Shutter Company website. Full of juicy information 
on all of our products, from shutters, shades and blinds to Shoji panels, this 
site will help make the job of choosing just the right window treatment a snap.</td>
 </tr>
 <tr>
  <td><img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/8.jpg"  style="display:block"></td>
 </tr>
 <tr>
  <td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; margin-top:20px; padding:0 52px; font-weight:bold;">We even have product videos, so you can actually see how a product looks and 
works in people's homes (and who doesn't like a peak at someone else's home?). 
We also have a blog, brimming with design news and views.<br><br>
</td>
 <tr>

<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; margin-top:90px; padding:0 22px; font-weight:bold;">
<table>
<tr>
<td>
<a href="" title="Join Our Facebook Page"><img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/6.jpg" border="0" style="display:block"></a>
</td>
<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; font-weight:bold;">
So become a Facebook fan and stay updated on what we're doing. And stop by often. We can't wait to show you around.
</td>
</tr>
</table>

</td>
 </tr>
 <tr>
  <td><img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/3.jpg"></td>
 </td></tr>
</table>
</td></tr>
</table>
</td></tr>
</table>

</body>
</html>
于 2011-02-24T02:15:58.013 回答