Шаблоны электронной почты для Outlook - Каковы хитрости при заполнении / расстоянии?

Я ненавижу писать шаблоны электронной почты.

с учетом сказанного, у меня есть довольно хороший шаблон для таблиц, созданный, но 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 ответа

Пожалуйста, попробуйте использовать ниже встроенный стиль, чтобы пустые тдс избежать большего расстояния, потому что пустые тдс

style="font-size:0%; line-height:1px; mso-line-height-rule: точно;"

простое и удачное кодирование

Источник

Дополнительный пробел вызван этой пустой строкой:

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

Попробуйте заменить эту строку на:

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

Кроме того, иногда при работе с Outlook проще всего <br> для интервалов.

Вот ваш полный HTML с 2 <br> добавлено в конце последнего абзаца:

<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>
Источник
Другие вопросы по тегам