テーブル内の画像は、セルパッディング= "0"であっても整列しません。

Question

テーブル内の画像を2枚使用しています（これはメール用ですのでテーブルを使用する必要があります） 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> 

Answer 1

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> 

を私はそれを動作させるために使用したトリック：

1. HTMLはテーブルにネストされています。これにより、複雑なセルレイアウトの管理が容易になり、中断しにくくなります。
2. すべてのセルは画像の幅を持っているため、セル間のギャップは許されません。
3. イメージにはdisplay：blockというインラインスタイルがあります。属性。これにより、異なるブラウザーや電子メールクライアントで発生する可能性のある、画像の下のギャップを無くすことができます。

あなたの電子メールコードをテストするとき、putsmail.comは受信トレイでどのように見えるかを確認するのに便利なツールです。さまざまな電子メールクライアントをデバッグするときは、興味深いヒントについてemailology.orgをご覧ください。

Answer 2

CELLPADDING = "0" <table>タグない<td>タグまたは<tr>タグ内に属します。

Answer 3

すごい私もあなたが<table>タグにこれを追加スペースの大部分を除去することではなく、何をしようとして想像することはできません。上記のように

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