HTML电子邮件中的Outlook表间距-没有常规技巧 [英] Outlook table spacing in HTML email - no usual tricks working
问题描述
我有一个按钮,为了使其在Outlook 2007/10中工作(!),我必须将三个元素-左图像,中间文本,右图像-放在它们在较大表中的嵌套表中.但是,这会导致Outlook 2007/10中经常被引用的问题,在表之间存在间隙.
I have a button that in order for it to work in Outlook 2007/10 (!) I have to put the three elements - left image, middle text, right image - in their own nested tables within a larger table. However, this causes the oft-quoted issue in Outlook 2007/10 which has the gaps between the tables.
下面是按钮的代码.显然,上面有html
head
body
等.
Below is the code for the button. Obviously, there's the html
head
body
etc above it.
我已经尝试过在img和表格上显示属性,宽度,对齐方式,border/padding/margin = 0 ...我已经尝试了所有可以在网上找到的解决方案,但没有任何方法可以解决!
I've tried display attributes, widths, align, border/padding/margin = 0 on img and tables alike... I've tried every solution I could find online and nothing is fixing it!
任何其他尝试的想法都将不胜感激!!
Any ideas for what else to try gratefully received!!
注意:这是Outlook中所有情况的发生,而不仅仅是其中之一.
Note: this is happening across the board in Outlook, not just one of them.
<tr>
<td style="width: 15px; font-size: 15px;" valign="top"> </td>
<td align="center" valign="middle">
<table align="center" cellpadding="0" cellspacing="0" height="40" width="243" border="0" style="margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; mso-table-lspace:0pt; mso-table-rspace:0pt; display: block; background-color: #f2f2f2;" valign="middle">
<tbody valign="middle">
<tr height="40">
<td height="40">
<table align="left" border="0" cellpadding="0" cellspacing="0" height="40" width="22" style="margin: 0; border: 0; padding: 0; width: 22px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #f2f2f2; mso-table-lspace:0pt; mso-table-rspace:0pt; display: block;" valign="middle">
<tbody>
<tr>
<td height="40" width="22" style="background-color: #f2f2f2;"><a href="#" style="border: 0; text-decoration: none; color: #ffffff;" target="_blank">
<img align="right" height="40" src="ctaleftgrey.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px; display: block;" width="22" /></a></td>
</tr>
</tbody>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" height="40" width="180" style="margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt; display: block; border-left: 1px solid #ec6608;" valign="middle">
<tbody>
<tr style="background-color: #ec6608;">
<td height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;"><a href="#" style="text-decoration:none; color:#ffffff" target="_blank">Text goes here</a></td>
</tr>
</tbody>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" height="40" width="36" style="margin: 0; border: 0; padding: 0; width: 36px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #f2f2f2; mso-table-lspace:0pt; mso-table-rspace:0pt; display: block;" valign="middle">
<tbody>
<tr>
<td height="40" width="36" style="background-color: #f2f2f2;"><a href="#" target="_blank"><img align="right" height="40" src="ctarightgrey.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px; display: block;" width="36" /></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 15px; font-size: 15px;" valign="top"> </td>
推荐答案
这一难题出奇的艰巨!我发现部分问题是由外部表上的align ="center"引起的,导致Outlook 2003和Live Mail中出现3px的间隙.如果仍然需要它与中心对齐,则可以将此代码包装在具有该属性的另一个表中.为了解决其余问题,我删除了多余的表,并向您的TD添加了align.我还添加了"border-collapse:崩溃;"到你的桌子上.您现在应该不会在桌面Outlook客户端中看到任何间距.
This one was surprisingly tough! I found that part of the issue was caused by the align="center" on the outer table, causing a 3px gap in Outlook 2003 and Live Mail. If you still need it to align to the center, I would wrap this code in another table with that attribute. To solve the rest of it I removed extra tables and added align to your TDs. I also added "border-collapse: collapse;" to your tables. You should see no spacing in desktop Outlook clients now.
<table cellpadding="0" cellspacing="0" height="40" width="238" border="0" style="border-collapse: collapse; margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; max-width:238px; color: #ffffff; width:238px;height: 40px; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color: #f2f2f2;">
<tbody>
<tr>
<td height="40" width="22" align="left">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">
<a href="#" style="border: 0; text-decoration: none; color: #ffffff;" target="_blank">
<img height="40" src="ctaleftgrey.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="22" />
</a>
</p>
</td>
<td height="40" width="180" align="left">
<table border="0" cellpadding="0" cellspacing="0" height="40" width="180" style="border-collapse: collapse; margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt; " valign="middle">
<tbody>
<tr>
<td height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">
<a href="#" style="text-decoration:none; color:#ffffff;border: 0px;" target="_blank">Text goes here</a>
</p>
</td>
</tr>
</tbody>
</table>
</td>
<td height="40" width="36" align="left">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">
<a href="#" target="_blank">
<img height="40" src="ctarightgrey.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="36" />
</a>
</p>
</td>
</tr>
</tbody>
这篇关于HTML电子邮件中的Outlook表间距-没有常规技巧的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!