html电子邮件表显示了outlook.com和gmail的差距

时间:2014-09-19 02:31:48

标签: html email outlook gmail

我使用表创建了一个html电子邮件。它在浏览器中显示良好,但当我在outlook.com中查看它时,gmail和Outlook客户端存在水平“间隙”,表格似乎也更宽(在右侧)和更长(在底部)。

我一直在网上搜索很长一段时间没有成功的答案,并尝试了很多不同的东西(我是html的新手)。我已经尝试将表放在另一个表容器中,我已经删除了tds之间的间隙,我在图像周围添加了一个段落容器(它修复了gmail中的一个空白但是在Outlook客户端中创建了另一个以前不存在的空白)。我的所有细胞都定义了宽度和高度,就像我的桌子一样。我已经将填充,边框等设置为0.我尝试将display:block添加到每个图像,但它将整个表格水平推出并使其变得非常宽。

我没有想法!请帮忙,因为我需要解决这个问题,我还没有添加文本。我在这里包含了我的代码。非常感谢。

<!-- Save for Web Slices (AP-MelbourneCup14-4.psd) -->
<table id="table_01" width="100%" height="100%"><table id="Table_02" width="510" height="818" border="0" style="border-spacing:0" cellpadding="0" cellspacing="0" bgcolor="#F0f0f0" align="center">
	<tr>
		<td colspan="6" width="510" height="19"></td>
	</tr>
	<tr>
		<td width="510" height="75" colspan="6"><p style="margin:0; font-size:0px; line-height:0"><img id="AP_MelbourneCup14_4_02" src="images/AP-MelbourneCup14-4_02.png" width="510" height="75" alt="" border="0"/></td>
	</tr>
	<tr>
		<td colspan="6" width="510" height="76"></td>
	</tr>
	<tr>
		<td rowspan="9" width="22" height="521"></td>
		<td rowspan="3" width="355" height="225" bgcolor="#f0f0f0"><p style="margin:0; font-size:0px; line-height:0"><img id="AP_MelbourneCup14_4_05" src="images/AP-MelbourneCup14-4_05.png" width="355" height="225" alt="" border="0"/></td>
		<td colspan="4" width="133" height="107"></td>
	</tr>
	<tr>
		<td colspan="3" width="108" height="87" bgcolor="#000000"></td>
		<td rowspan="8" width="25" height="414"></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="2" width="108" height="56"></td>
	</tr>
	<tr>
		<td width="355" height="25"></td>
	</tr>
	<tr>
		<td colspan="2" width="398" height="33" bgcolor="#303473"></td>
		<td colspan="2" width="65" height="33"></td>
	</tr>
	<tr>
		<td rowspan="4" width="355" height="238"><p style="margin:0; font-size:0px; line-height:0"><img id="AP_MelbourneCup14_4_13" src="images/AP-MelbourneCup14-4_13.png" width="355" height="238" alt="" border="0"/></td>
		<td colspan="2" width="57" height="57"><p style="margin:0; font-size:0px; line-height:0"><img id="AP_MelbourneCup14_4_14" src="images/AP-MelbourneCup14-4_14.png" width="57" height="57" alt="" border="0"/></td>
		<td rowspan="2" width="51" height"112"></td>
	</tr>
	<tr>
		<td colspan="2" width="57" height="55"></td>
	</tr>
	<tr>
		<td colspan="3" width="108" height="87" bgcolor="#000000"></td>
	</tr>
	<tr>
		<td colspan="3" width="108" height="39"></td>
	</tr>
	<tr>
		<td colspan="6" width="510" height="105"><p style="margin:0; font-size:0px; line-height:0"><img src="images/AP-MelbourneCup14-4_19.png" alt="" width="510" height="105" align="bottom" id="AP_MelbourneCup14_4_19" border="0"/></p></td>
	</tr>
	<tr>
		<td colspan="6" width="510" height="22" bgcolor="#0697d4"></td>
	</tr>
</table> </table>
<!-- End Save for Web Slices -->
  

1 个答案:

答案 0 :(得分:0)

代码有很多错误。对于初学者来说,这过于复杂。图像应该有样式=&#34;显示:块&#34;如果您不需要与它们内联任何内容,以避免某些电子邮件客户端在图像周围添加不​​必要的额外填充。您可以在第24-26行指定列和行,但它们不会相加。您有没有结束标记的段落标记...由于您不熟悉HTML,您可能需要尝试新的Litmus工具来创建电子邮件:https://litmus.com/email-builder