电子邮件模板中 TD 之间的填充答案

【问题标题】：Padding between TDs in email template电子邮件模板中 TD 之间的填充
【发布时间】：2017-06-24 21:01:56
【问题描述】：

我写了一个电子邮件模板，它只有一组带有超链接的图像。它在我的浏览器上运行良好，但是当我通过电子邮件发送它时，由于 tds 之间不必要的填充，它被破坏了。

这就是它应该呈现的方式。但我所看到的：

当我检查它时：

你看到不必要的填充了吗？代码如下：

<html><head>
<title>Email Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (594bfefd1385a.jpeg) -->
<table id="Table_01" width="1004" height="577" border="0" cellpadding="0" cellspacing="0">
	<tbody><tr>
		<td rowspan="2">
			<a href="https://www.thetwistedbit.com/collections/ego-7-tall-boots#utm_source=hypermail&amp;utm_medium=email&amp;utm_campaign=ego7&amp;utm_term=ego7"><img src="http://thetwistedbit.net/imagehosting/5360/594eb68d7e313.gif" width="231" height="173" alt=""></a></td>
		<td colspan="8" rowspan="5">
			<img src="http://thetwistedbit.net/imagehosting/5360/594eb68dbb799.gif" width="411" height="445" alt=""></td>
		<td colspan="5">
			<a href="https://www.thetwistedbit.com/#utm_source=hypermail&amp;utm_medium=email&amp;utm_campaign=ego7"><img src="http://thetwistedbit.net/imagehosting/5360/594eb68db1f3f.gif" width="361" height="163" alt=""></a></td>
		<td>
			<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="163" alt=""></td>
	</tr>
	<tr>
		<td colspan="5" rowspan="2">
			<img src="http://thetwistedbit.net/imagehosting/5360/594eb68dd8c60.gif" width="361" height="105" alt=""></td>
		<td>
			<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="10" alt=""></td>
	</tr>
	<tr>
		<td rowspan="8">
			<img src="http://thetwistedbit.net/imagehosting/5360/594eb68de43fb.gif" width="231" height="403" alt=""></td>
		<td>
			<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="95" alt=""></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="2">
			<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e02a9f.gif" width="164" height="177" alt=""></td>
		<td>
			<a href="https://www.google.com/maps/place/28+N+Central+Ave,+Hartsdale,+NY+10530/@41.0195605,-73.7994692,17z/data=!3m1!4b1!4m5!3m4!1s0x89c2948a2925d351:0x84bfe9e32b3fb392!8m2!3d41.0195565!4d-73.7972805"><img src="http://thetwistedbit.net/imagehosting/5360/594eb68e23617.gif" width="72" height="73" alt=""></a></td>
		<td rowspan="5">
			<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e25d27.gif" width="125" height="244" alt=""></td>
		<td>
			<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="73" alt=""></td>
	</tr>
	<tr>
		<td rowspan="4">
			<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e4689f.gif" width="72" height="171" alt=""></td>
		<td>
			<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="104" alt=""></td>
	</tr>
	<tr>
		<td rowspan="5">
			<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e47c27.gif" width="42" height="131" alt=""></td>
		<td rowspan="2">
			<a href="https://www.facebook.com/TheTwistedBitSaddlery/"><img src="http://thetwistedbit.net/imagehosting/5360/594eb68e6685e.png" width="51" height="52" alt=""></a></td>
		<td colspan="5">
			<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e677fe.gif" width="281" height="2" alt=""></td>
		<td colspan="2" rowspan="2">
			<a href="https://www.facebook.com/EquestrianStyle/"><img src="http://thetwistedbit.net/imagehosting/5360/594eb68e6685e.png" width="51" height="52" alt=""></a></td>
		<td colspan="2" rowspan="3">
			<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e877be.gif" width="150" height="67" alt=""></td>
		<td>
			<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="2" alt=""></td>
	</tr>
	<tr>
		<td rowspan="4">
			<img src="http://thetwistedbit.net/imagehosting/5360/594eb68ea96be.gif" width="89" height="129" alt=""></td>
		<td>
			<a href="https://www.pinterest.com/thetwistedbit/"><img src="http://thetwistedbit.net/imagehosting/5360/594eb68eab5fe.gif" width="51" height="50" alt=""></a></td>
		<td rowspan="4">
			<img src="http://thetwistedbit.net/imagehosting/5360/594eb68ec9295.gif" width="15" height="129" alt=""></td>
		<td>
			<a href="https://www.instagram.com/TheTwistedBit/"><img src="http://thetwistedbit.net/imagehosting/5360/594eb68ecb9a6.gif" width="50" height="50" alt=""></a></td>
		<td rowspan="4">
			<img src="http://thetwistedbit.net/imagehosting/5360/594eb68eeadad.gif" width="76" height="129" alt=""></td>
		<td>
			<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="50" alt=""></td>
	</tr>
	<tr>
		<td rowspan="3">
			<img src="http://thetwistedbit.net/imagehosting/5360/594eb68eebd4d.gif" width="51" height="79" alt=""></td>
		<td rowspan="3">
			<img src="http://thetwistedbit.net/imagehosting/5360/594eb68f15f75.gif" width="51" height="79" alt=""></td>
		<td rowspan="3">
			<img src="http://thetwistedbit.net/imagehosting/5360/594eb68f16f15.gif" width="50" height="79" alt=""></td>
		<td colspan="2" rowspan="3">
			<img src="http://thetwistedbit.net/imagehosting/5360/594eb68f37e75.gif" width="51" height="79" alt=""></td>
		<td>
			<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="15" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="http://thetwistedbit.net/imagehosting/5360/594eb68f36aec.gif" width="62" height="64" alt=""></td>
		<td colspan="3">
			<a href="https://www.thetwistedbit.com/#utm_source=hypermail&amp;utm_medium=email&amp;utm_campaign=ego7"><img src="http://thetwistedbit.net/imagehosting/5360/594eb68f589ec.gif" width="285" height="25" alt=""></a></td>
		<td>
			<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="25" alt=""></td>
	</tr>
	<tr>
		<td colspan="3">
			<img src="http://thetwistedbit.net/imagehosting/5360/594eb68f5a15d.gif" width="285" height="39" alt=""></td>
		<td>
			<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="39" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="231" height="1" alt=""></td>
		<td>
			<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="42" height="1" alt=""></td>
		<td>
			<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="51" height="1" alt=""></td>
		<td>
			<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="89" height="1" alt=""></td>
		<td>
			<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="51" height="1" alt=""></td>
		<td>
			<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="15" height="1" alt=""></td>
		<td>
			<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="50" height="1" alt=""></td>
		<td>
			<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="76" height="1" alt=""></td>
		<td>
			<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="37" height="1" alt=""></td>
		<td>
			<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="14" height="1" alt=""></td>
		<td>
			<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="62" height="1" alt=""></td>
		<td>
			<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="88" height="1" alt=""></td>
		<td>
			<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="72" height="1" alt=""></td>
		<td>
			<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="125" height="1" alt=""></td>
		<td></td>
	</tr>
</tbody></table>
<!-- End Save for Web Slices -->

</body></html>

请帮忙，在此先感谢。

【问题讨论】：

电子邮件模板是一个复杂的世界，因为那里有许多不同的电子邮件客户端以及他们试图让用户安全和快乐的方式。在任何人可能能够帮助您解决此问题之前，您必须在用于查看电子邮件的电子邮件客户端上添加一些信息，无论是离线（例如 Outlook、Thunderbird）还是在线（例如 gmail、雅虎）......甚至那么，如果有人能够在这种特定情况下为您提供帮助，那么在其他电子邮件客户端中可能仍然不会很好。
你可能最好使用Mailchimp and one of their templates，他们会处理混乱的......
确实一团糟，但有一个简单的解决方法。还没有看到我假设的代码。
@Syfer，我确实没有看过代码，我意识到图像周围的额外间距通常与display:block（无需查看代码：）有关，只是试图提供一些明智的建议，因为我和你一样认为这可能是 OP 的第一个电子邮件模板，我想知道 OP 是否意识到他让自己陷入了困境......
很好，我注意到他不应该为电子邮件做的事情。有很多事情安静，但我认为这些应该足以克服真正的基本错误。现在让我们希望我的回答不会迟到哈哈

标签： html html-email email-templates

【解决方案1】：

我认为这是您创建的第一封电子邮件？它不是填充，它是图像中缺少的显示块。对 html 中的所有图像使用以下代码：

 style="display:block;" hspace="0" vspace="0" alt="" border="0"

注意：由于您有这么多的 colspan 和 rowspan，模板可能无法在某些电子邮件客户端中正常工作。上面的代码将确保您的所有图像彼此齐平。

一个不可掉以轻心的忠告：

永远不要从 Photoshop 中保存为 web。它创建的表格大部分时间都无法修复。
不要使用列跨度。一些电子邮件电子邮件客户端不喜欢它。
只有图片电子邮件才会有递送问题，一般规则是有 70/30（某天 60/40）以获得最佳效果。
使用媒体查询或 Gmail 修复，否则您的电子邮件在 Gmail 应用中看起来会很混乱。

让我知道上述修复是否有效。

干杯

【讨论】：

我修复了它，我所做的只是删除了所有的 colspans 和 rowspans。我以这样的方式切片，我将有一个平衡的桌子。这在每个电子邮件客户端中都对我有用。虽然它从 27 片变成了 103 片，但它终于奏效了。哈哈
我不推荐 103。尽量保持低调。如果你愿意，我可以给你一个网格。为什么这么多片？
如果这是正确答案，请接受它作为正确答案。