HTMLテーブルコードでアラインされていないテーブルが作成される

写真とその説明をこの表に揃えようとしていますが、欠けているものは何もありません。可能であれば、画像/説明をすべて手に触れさせ、つなげてください。それがどのように見えるかHTMLテーブルコードでアラインされていないテーブルが作成される

<body background="http://i.imgur.com/M0jxU8g.jpg"><table> 
 
    <tr> 
 
    <td><img src="http://themilamgroup.com/email/templates/fallinventory/images/promo/promo_3_large.jpg" height="175px" width="300px"></td> 
 
<td><div style="background-color:#142232; height:135px;width:280px; color:#ffffff; padding:20px; text-align:center;">PENDED<br> 
 
$775,000 
 
<br><br> 
 
1771 Charity Drive<br> 
 
Brentwood, TN 37027 
 
<br><br> 
 
4 bdrm, 3.5 ba, 4115 sq ft</div></td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
    <div style="background-color:#142232; height:135px;width:280px;color:#ffffff; text-align:center; padding:20px">PENDED<br> 
 
$775,000 
 
<br><br> 
 
1771 Charity Drive<br> 
 
Brentwood, TN 37027 
 
<br><br> 
 
4 bdrm, 3.5 ba, 4115 sq ft</div></td> 
 
    <td><img src="http://themilamgroup.com/email/templates/fallinventory/images/promo/promo_3_large.jpg" height="175px" width="300px"></td> 
 
    </tr> <tr> 
 
    <td><img src="http://themilamgroup.com/email/templates/fallinventory/images/promo/promo_3_large.jpg" height="175px" width="300px"></td> 
 
<td> 
 
    <div style="background-color:#142232; height:135px;width:280px;color:#ffffff; text-align:center; padding:20px">PENDED<br> 
 
$775,000 
 
<br><br> 
 
1771 Charity Drive<br> 
 
Brentwood, TN 37027 
 
<br><br> 
 
4 bdrm, 3.5 ba, 4115 sq ft</div></td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
    <div style="background-color:#142232; height:135px;width:280px;color:#ffffff; text-align:center; padding:20px">PENDED<br> 
 
$775,000 
 
<br><br> 
 
1771 Charity Drive<br> 
 
Brentwood, TN 37027 
 
<br><br> 
 
4 bdrm, 3.5 ba, 4115 sq ft</div></td> 
 
    </tr> 
 
</table></body>

：あなたがテーブルを使用していると

出典

2016-11-03 GemKrafft

[こちら]（https://jsfiddle.net/6j5jLccj/1/）は必要ですか？ – Lal

、ここで

は私のコード、mailchimpのためのHTMLではかなりシンプルなメールテンプレートでありますこれを実現する唯一の方法は、列内のすべてのセルの内容が同じ幅であるかどうかです。それ以外の場合、列の幅は常に最も広い内容のセルによって定義されます。

左の列のコンテンツをフロートさせて、後のコンテンツを達成することもできますが、それは個人的に望ましい解決策ではありません。すべてのコンテンツのサイズを同じ幅に設定すると、はっきりと見えます。

あなたの情報DIVの幅は320pxです。幅は280pxで、両面に20pxの詰め物があります。側面でわずか10ピクセルのパディングを変更すると、すべてのコンテンツが300ピクセル幅になります。

あなたがゼロの間隔が必要な場合は、あなたのテーブルタグに次の属性を追加することができます。

cellspacing="0" cellpadding="0"

出典

2016-11-03 18:12:50

あなたは各画像の<table>のデフォルト値とインラインdisplay:block;をゼロにした場合、すべて否定すべきこと上のプレビューの意図しないスペース。

<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"> 
    <tr> 
     <td> 
      <!-- text goes here --> 
     </td> 
     <td> 
      <img src="" alt="" style="display: block;"> 
     </td> 
    </tr> 
</table>

出典

2016-11-04 16:10:34

HTMLテーブルコードでアラインされていないテーブルが作成される

答えて

関連する問題