Outlook的电子邮件模板 - 填充/距离有什么诀窍?

时间:2011-01-11 16:43:31

标签: html css outlook outlook-2007 email-templates

我讨厌写电子邮件模板。

据说,我已经创建了一个非常好的表格模板,但是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>

2 个答案:

答案 0 :(得分:1)

请尝试使用下面的内联样式清空tds以避免因空tds而增加间距

style =“font-size:0%; line-height:1px; mso-line-height-rule:exact;”

简单快乐的编码

答案 1 :(得分:0)

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

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

尝试用以下代码替换该行:

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

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

以下是您在最后一段末尾添加了2 <br>的完整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>