表中的圖像不對齊，即使與cellpadding =「0」

我有一個表內的幾個圖像（這是一個電子郵件，所以我不得不使用表），即使我已經使用cellpadding=0。有任何想法嗎？表中的圖像不對齊，即使與cellpadding =「0」

<table> 
<tbody> 
    <tr> 
    <td cellpadding="0" colspan="5"><img src="http://www.tradetech.net/images/Holidayemail/tt_holiday_boat_23_01.gif" alt="" width="444" height="43" /></td> 
</tr> 
<tr cellpadding="0"> 
    <td cellpadding="0" rowspan="4"><img src="http://www.tradetech.net/images/Holidayemail/tt_holiday_boat_23_02.gif" alt="" width="46" height="252" /></td> 
    <td cellpadding="0" colspan="3"><img src="http://www.tradetech.net/images/Holidayemail/boxes.gif" alt="" width="296" height="142" /></td> 
    <td cellpadding="0" rowspan="4"><img src="http://www.tradetech.net/images/Holidayemail/tt_holiday_boat_23_04.gif" alt="" width="102" height="252" /></td> 
</tr> 
<tr cellpadding="0"> 
    <td cellpadding="0" colspan="3"><img src="http://www.tradetech.net/images/Holidayemail/tt_holiday_boat_23_05.gif" alt="" width="296" height="33" /></td> 
</tr> 
<tr cellpadding="0"> 
    <td cellpadding="0" rowspan="2"><img src="http://www.tradetech.net/images/Holidayemail/tt_holiday_boat_23_06.gif" alt="" width="32" height="77" /></td> 
    <td cellpadding="0"><img src="http://www.tradetech.net/images/Holidayemail/greeting.gif" alt="" width="151" height="29" /></td> 
    <td cellpadding="0" rowspan="2"><img src="http://www.tradetech.net/images/Holidayemail/tt_holiday_boat_23_08.gif" alt="" width="113" height="77" /></td> 
</tr> 
<tr cellpadding="0"> 
    <td cellpadding="0"><img src="http://www.tradetech.net/images/Holidayemail/tt_holiday_boat_23_09.gif" alt="" width="151" height="48" /></td> 
</tr> 
</tbody> 
</table>

來源

2011-12-14 KBB1

CELLPADDING不會在標籤上做任何事情，如上所述，因爲您正在創建HTML電子郵件，所以您需要在標籤上設置寬度以避免任何空間移動。只是添加圖像並沒有幫助。

我創建了一個小提琴凡在你的輪廓線了完美的圖像：http://jsfiddle.net/Scopestyle/6Qva2/

<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff">

<table width="444" border="0" cellspacing="0" cellpadding="0"> 
     <tr> 
     <td colspan="3"><img style="display: block;" src="http://placehold.it/444x43" alt="" width="444" height="43" /></td> 
     </tr> 
     <tr> 
     <td width="46" rowspan="3" valign="top"><img style="display: block;" src="http://placehold.it/46x252" alt="" width="46" height="252" /></td> 
     <td width="296"><img style="display: block;" src="http://placehold.it/296x142" alt="" width="296" height="142" /></td> 
     <td width="102" rowspan="3" valign="top"><img style="display: block;" src="http://placehold.it/102x252" alt="" width="102" height="252" /></td> 
     </tr> 
     <tr> 
     <td><img style="display: block;" src="http://placehold.it/296x33" alt="" width="296" height="33" /></td> 
     </tr> 
     <tr> 
     <td width="296" valign="top"> 
      <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
       <tr> 
       <td width="32" rowspan="2"><img style="display: block;" src="http://placehold.it/32x77" alt="" width="32" height="77" /></td> 
       <td width="151"><img style="display: block;" src="http://placehold.it/151x29" alt="" width="151" height="29" /></td> 
       <td width="113" rowspan="2"><img style="display: block;" src="http://placehold.it/113x77" alt="" width="113" height="77" /></td> 
       </tr> 
       <tr> 
       <td width="151"><img style="display: block;" src="http://placehold.it/151x48" alt="" width="151" height="48" /></td> 
       </tr> 
      </table> 

     </td> 
     </tr> 
    </table> 

</td>

如果你在看代碼的通知數我曾經使用它的技巧：

HTML嵌套在表格中。這使得複雜的單元格佈局更易於管理並且不太可能中斷。
所有單元格都具有圖像的寬度，所以我們不允許單元格之間出現空隙。
圖像具有內嵌樣式：display; block;屬性。這消除了圖像下方可能出現在不同瀏覽器和電子郵件客戶端中的任何間隙。

測試您的電子郵件代碼時，putsmail.com是一個方便的工具，可以查看收件箱中的內容。在調試不同的電子郵件客戶端時，請查看emailology.org以獲取有趣的提示。

來源

2013-12-16 13:48:07 Scopestyle

CELLPADDING = 「0」所屬的<table>標籤，而不是<td>標籤或<tr>標記內。

來源

2011-12-14 01:16:34 scarhand

也不是標籤 – 2011-12-14 01:18:14

哇，我甚至無法想象你正在試圖做的，但除去大部分的間距將其添加到<table>標籤的內容：

<table cellpadding="0" cellspacing="0" border="0">

來源

2011-12-14 02:03:12

表中的圖像不對齊，即使與cellpadding =「0」

回答

相關問題