2014-09-19 127 views
0

我已經使用表格創建了一個html電子郵件。它在瀏覽器中顯示效果很好,但是當我在outlook.com中查看它時,gmail和outlook客戶端存在橫向「差距」,該表格也似乎更寬(右側)和更長(底部)。html電子郵件表格顯示outlook.com和gmail的差距

我一直在尋找一個很長的時間沒有成功的答案的互聯網,並嘗試了很多不同的東西(我是新來的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"> 
 
\t <tr> 
 
\t \t <td colspan="6" width="510" height="19"></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <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> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td colspan="6" width="510" height="76"></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td rowspan="9" width="22" height="521"></td> 
 
\t \t <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> 
 
\t \t <td colspan="4" width="133" height="107"></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td colspan="3" width="108" height="87" bgcolor="#000000"></td> 
 
\t \t <td rowspan="8" width="25" height="414"></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td colspan="3" rowspan="2" width="108" height="56"></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td width="355" height="25"></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td colspan="2" width="398" height="33" bgcolor="#303473"></td> 
 
\t \t <td colspan="2" width="65" height="33"></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <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> 
 
\t \t <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> 
 
\t \t <td rowspan="2" width="51" height"112"></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td colspan="2" width="57" height="55"></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td colspan="3" width="108" height="87" bgcolor="#000000"></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td colspan="3" width="108" height="39"></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <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> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td colspan="6" width="510" height="22" bgcolor="#0697d4"></td> 
 
\t </tr> 
 
</table> </table> 
 
<!-- End Save for Web Slices -->

+0

有一種關於編碼電子郵件的說法 - 從不嘗試從頭開始。我強烈建議爲此使用一個庫。 – 2014-09-19 02:40:45

回答

0

有一個與代碼,使太多的錯誤。這對初學者來說過於複雜。如果你不需要在內容中包含任何內容,圖像應該有style =「display:block」,以避免一些電子郵件客戶端在圖像周圍添加不​​需要的額外填充。您可以在第24-26行指定列和行,但它們不會相加。你有沒有結束標籤的段落標籤...因爲你是HTML的新手,你可能想嘗試使用新的Litmus工具來創建電子郵件:https://litmus.com/email-builder

相關問題