電子郵件模板中的TD之間的填充

我寫了一個電子郵件模板，它只有一組帶有超鏈接的圖像。它在我的瀏覽器上運行良好，但是當我通過電子郵件發送它時，由於tds之間不必要的填充而導致它被破壞。電子郵件模板中的TD之間的填充

這是它應該如何呈現。但我所看到的：

當我檢查它：

您看到不必要的填充？下面的代碼：

<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"> 
 
\t <tbody><tr> 
 
\t \t <td rowspan="2"> 
 
\t \t \t <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> 
 
\t \t <td colspan="8" rowspan="5"> 
 
\t \t \t <img src="http://thetwistedbit.net/imagehosting/5360/594eb68dbb799.gif" width="411" height="445" alt=""></td> 
 
\t \t <td colspan="5"> 
 
\t \t \t <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> 
 
\t \t <td> 
 
\t \t \t <img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="163" alt=""></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td colspan="5" rowspan="2"> 
 
\t \t \t <img src="http://thetwistedbit.net/imagehosting/5360/594eb68dd8c60.gif" width="361" height="105" alt=""></td> 
 
\t \t <td> 
 
\t \t \t <img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="10" alt=""></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td rowspan="8"> 
 
\t \t \t <img src="http://thetwistedbit.net/imagehosting/5360/594eb68de43fb.gif" width="231" height="403" alt=""></td> 
 
\t \t <td> 
 
\t \t \t <img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="95" alt=""></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td colspan="3" rowspan="2"> 
 
\t \t \t <img src="http://thetwistedbit.net/imagehosting/5360/594eb68e02a9f.gif" width="164" height="177" alt=""></td> 
 
\t \t <td> 
 
\t \t \t <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> 
 
\t \t <td rowspan="5"> 
 
\t \t \t <img src="http://thetwistedbit.net/imagehosting/5360/594eb68e25d27.gif" width="125" height="244" alt=""></td> 
 
\t \t <td> 
 
\t \t \t <img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="73" alt=""></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td rowspan="4"> 
 
\t \t \t <img src="http://thetwistedbit.net/imagehosting/5360/594eb68e4689f.gif" width="72" height="171" alt=""></td> 
 
\t \t <td> 
 
\t \t \t <img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="104" alt=""></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td rowspan="5"> 
 
\t \t \t <img src="http://thetwistedbit.net/imagehosting/5360/594eb68e47c27.gif" width="42" height="131" alt=""></td> 
 
\t \t <td rowspan="2"> 
 
\t \t \t <a href="https://www.facebook.com/TheTwistedBitSaddlery/"><img src="http://thetwistedbit.net/imagehosting/5360/594eb68e6685e.png" width="51" height="52" alt=""></a></td> 
 
\t \t <td colspan="5"> 
 
\t \t \t <img src="http://thetwistedbit.net/imagehosting/5360/594eb68e677fe.gif" width="281" height="2" alt=""></td> 
 
\t \t <td colspan="2" rowspan="2"> 
 
\t \t \t <a href="https://www.facebook.com/EquestrianStyle/"><img src="http://thetwistedbit.net/imagehosting/5360/594eb68e6685e.png" width="51" height="52" alt=""></a></td> 
 
\t \t <td colspan="2" rowspan="3"> 
 
\t \t \t <img src="http://thetwistedbit.net/imagehosting/5360/594eb68e877be.gif" width="150" height="67" alt=""></td> 
 
\t \t <td> 
 
\t \t \t <img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="2" alt=""></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td rowspan="4"> 
 
\t \t \t <img src="http://thetwistedbit.net/imagehosting/5360/594eb68ea96be.gif" width="89" height="129" alt=""></td> 
 
\t \t <td> 
 
\t \t \t <a href="https://www.pinterest.com/thetwistedbit/"><img src="http://thetwistedbit.net/imagehosting/5360/594eb68eab5fe.gif" width="51" height="50" alt=""></a></td> 
 
\t \t <td rowspan="4"> 
 
\t \t \t <img src="http://thetwistedbit.net/imagehosting/5360/594eb68ec9295.gif" width="15" height="129" alt=""></td> 
 
\t \t <td> 
 
\t \t \t <a href="https://www.instagram.com/TheTwistedBit/"><img src="http://thetwistedbit.net/imagehosting/5360/594eb68ecb9a6.gif" width="50" height="50" alt=""></a></td> 
 
\t \t <td rowspan="4"> 
 
\t \t \t <img src="http://thetwistedbit.net/imagehosting/5360/594eb68eeadad.gif" width="76" height="129" alt=""></td> 
 
\t \t <td> 
 
\t \t \t <img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="50" alt=""></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td rowspan="3"> 
 
\t \t \t <img src="http://thetwistedbit.net/imagehosting/5360/594eb68eebd4d.gif" width="51" height="79" alt=""></td> 
 
\t \t <td rowspan="3"> 
 
\t \t \t <img src="http://thetwistedbit.net/imagehosting/5360/594eb68f15f75.gif" width="51" height="79" alt=""></td> 
 
\t \t <td rowspan="3"> 
 
\t \t \t <img src="http://thetwistedbit.net/imagehosting/5360/594eb68f16f15.gif" width="50" height="79" alt=""></td> 
 
\t \t <td colspan="2" rowspan="3"> 
 
\t \t \t <img src="http://thetwistedbit.net/imagehosting/5360/594eb68f37e75.gif" width="51" height="79" alt=""></td> 
 
\t \t <td> 
 
\t \t \t <img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="15" alt=""></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td rowspan="2"> 
 
\t \t \t <img src="http://thetwistedbit.net/imagehosting/5360/594eb68f36aec.gif" width="62" height="64" alt=""></td> 
 
\t \t <td colspan="3"> 
 
\t \t \t <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> 
 
\t \t <td> 
 
\t \t \t <img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="25" alt=""></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td colspan="3"> 
 
\t \t \t <img src="http://thetwistedbit.net/imagehosting/5360/594eb68f5a15d.gif" width="285" height="39" alt=""></td> 
 
\t \t <td> 
 
\t \t \t <img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="39" alt=""></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td> 
 
\t \t \t <img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="231" height="1" alt=""></td> 
 
\t \t <td> 
 
\t \t \t <img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="42" height="1" alt=""></td> 
 
\t \t <td> 
 
\t \t \t <img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="51" height="1" alt=""></td> 
 
\t \t <td> 
 
\t \t \t <img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="89" height="1" alt=""></td> 
 
\t \t <td> 
 
\t \t \t <img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="51" height="1" alt=""></td> 
 
\t \t <td> 
 
\t \t \t <img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="15" height="1" alt=""></td> 
 
\t \t <td> 
 
\t \t \t <img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="50" height="1" alt=""></td> 
 
\t \t <td> 
 
\t \t \t <img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="76" height="1" alt=""></td> 
 
\t \t <td> 
 
\t \t \t <img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="37" height="1" alt=""></td> 
 
\t \t <td> 
 
\t \t \t <img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="14" height="1" alt=""></td> 
 
\t \t <td> 
 
\t \t \t <img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="62" height="1" alt=""></td> 
 
\t \t <td> 
 
\t \t \t <img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="88" height="1" alt=""></td> 
 
\t \t <td> 
 
\t \t \t <img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="72" height="1" alt=""></td> 
 
\t \t <td> 
 
\t \t \t <img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="125" height="1" alt=""></td> 
 
\t \t <td></td> 
 
\t </tr> 
 
</tbody></table> 
 
<!-- End Save for Web Slices --> 
 

 
</body></html>

請幫幫忙，先謝謝了。

來源

2017-06-24 Umer Javed

電子郵件模板是一個複雜的世界，由於許多不同的電子郵件客戶端在那裏，他們正試圖保持他們的用戶的安全和快樂的方式。在任何人都可能能夠幫助你解決這個問題之前，你必須在用於查看電子郵件的電子郵件客戶端上添加一些信息，無論是離線（例如outlook，thunderbird）還是在線（例如Gmail，雅虎）......甚至那麼，如果任何人能夠在這個特定的情況下幫助你，它可能仍然不會在其他電子郵件客戶端看起來很棒。 –

你可能最好使用[Mailchimp和他們的模板之一]（https://mailchimp.com/features/email-templates/），他們照顧的混亂.. –

確實是一個混亂，但有一個簡單的固定。沒有看到我假設的代碼。 – Syfer

我認爲這是您創建的第一封電子郵件嗎？它不是填充，它是圖像中缺少的顯示塊。既然你有這麼多的合併單元格和行跨度模板可能無法在某些電子郵件客戶端正常工作：使用下面的代碼在HTML中，所有圖片：

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

注意。上面的代碼將確保你所有的圖像都坐在一起齊平。

建議沒有的話可以掉以輕心：

永遠不會做另存爲網頁從Photoshop。它創建的表大部分時間不可修復。

請勿使用色譜柱。有些電子郵件電子郵件客戶不喜歡它。

只有圖像電子郵件將有交付問題，一般規則是有70/30（有一天60/40），以獲得最佳結果。

使用媒體查詢或Gmail修復或您的電子郵件在Gmail應用程序中看起來真的很混亂。

讓我知道上述修復程序是否有效。

乾杯

來源

2017-06-25 03:21:13 Syfer

我修好了，我所做的全部刪除了所有的colspans和rowspans。我以這樣的方式切片，以便我有一張平衡的桌子。而且，這在每個電子郵件客戶端都可以爲我工作。雖然它從27片切換到103片，但最終奏效。哈哈 –

我不會推薦103.試着保持下來。如果你喜歡，我可以給你一個網格。爲什麼這麼多切片？ – Syfer

如果這是正確的答案，請接受它作爲正確的答案。 – Syfer

電子郵件模板中的TD之間的填充

回答

相關問題