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

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

с учетом вышесказанного, у меня есть довольно хороший шаблон таблицы, созданный, но Outlook 2007 и Outlook 2010 создают большой интервал между TR, чем я заметил в других почтовых клиентах.

OL2007 (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 ]

1 голос
/ 01 ноября 2014

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

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

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

0 голосов
/ 24 февраля 2011

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

<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>
...