コンテンツは、現在の電子メールをコードに取り組んでテーブル

Question

の底に揃えるない：

私が囲んでいるテーブルの下に整列する（テーブルのうち、作成された）、このボタンを取得しようとしています。現時点ではそれは整列しないだろうし、私は理由が分からない。

<table width="300" min-width="300" height="500" class="promo_3" align="left"> 
 
    <tr> 
 
    <td valign="top"> 
 
     <a target="_blank" href="http://www.thing.html"> 
 
     <img class="promo" alt="Promo image 2" src="http://media.campaigner.com/image1.jpg"> 
 
     </a> 
 
     <br> 
 
     <br> 
 

 
     <h1> TRAINING </h1> 
 
     <span valign="top" class="content">TITLE HERE</span> 
 
     <p>TEXT HERE</p> 
 
     <br> 
 
     <!--Button THIS WILL NOT ALIGN TO THE BOTTOM --> 
 

 
     <table width="100%" border="0" cellspacing="0" cellpadding="0" style="padding-bottom:20px;"> 
 
     <tr> 
 
      <td height="20"> 
 
      <table border="0" cellspacing="0" cellpadding="0" align="center"> 
 
       <tr> 
 
       <td bgcolor="#f55926" valign="bottom" style="padding: 8px 30px 8px 30px; -webkit-border-radius:3px; border-radius:3px" align="center"><a href="http://www.thing.html" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; display: inline-block;">Read More</a> 
 
       </td> 
 
       </tr> 
 
      </table> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
     <!--Button + Social End --> 
 

 

 
    </td> 
 
    </tr> 
 

 

 
</table>

Answer 1

<table width="300" min-width="300" height="500" class="promo_3" align="left"> 
 
    <tr> 
 
    <td> 
 
     <a target="_blank" href="http://www.thing.html"> 
 
     <img class="promo" alt="Promo image 2" src="http://media.campaigner.com/image1.jpg"> 
 
     </a> 
 
     <br> 
 
     <br> 
 

 
     <h1> TRAINING </h1> 
 
     <span valign="top" class="content">TITLE HERE</span> 
 
     <p>TEXT HERE</p> 
 
     <br> 
 
     <!--Button THIS WILL NOT ALIGN TO THE BOTTOM --> 
 

 
     <table width="100%" border="0" cellspacing="0" cellpadding="0" style="padding-bottom:20px;"> 
 
     <tr> 
 
      <td height="20"> 
 
      <table border="0" align='left' cellspacing="0" cellpadding="0" align="center"> 
 
       <tr> 
 
       <td bgcolor="#f55926" valign="bottom" style="padding: 8px 30px 8px 30px;-webkit-border-radius:3px; border-radius:3px" align="center"><a href="http://www.thing.html" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; display: inline-block;">Read More</a> 
 
       </td> 
 
       </tr> 
 
      </table> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
     <!--Button + Social End --> 
 

 

 
    </td> 
 
    </tr> 
 

 

 
</table>

はたぶん、この方法を試してみて。一部の電子メールクライアントは悪名高いものであり、TD上のパッディングトップを使用できる電子メールクライアントの場合は、コードの下にコードを配置しない場合があります。お役に立てれば。

乾杯

Answer 2

これは、あなたが探しているものでしょうか？テーブルを含むボタンにalign = 'left'を追加するだけです。

二列で一つのテーブルに追加された私が行っている

<table width="300" min-width="300" height="500" class="promo_3" align="left"> 
    <tr> 
    <td valign="bottom"><br> 
     <br> 

    <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
    <tbody> 
    <tr> 
     <td height="200" valign="top"><a target="_blank" href="http://www.thing.html"><img class="promo" alt="Promo image 2" src="http://media.campaigner.com/image1.jpg"></a></td> 
    </tr> 
    <tr> 
     <td height="200" valign="top"> 

    <h1> TRAINING </h1> 
     <span valign="top" class="content">TITLE HERE</span> 
     <p>TEXT HERE</p> 


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



     <br> 
     <!--Button THIS WILL NOT ALIGN TO THE BOTTOM --> 

     <table width="100%" border="0" cellspacing="0" cellpadding="0" style="padding-bottom:20px;"> 
     <tr> 
      <td height="20"> 
      <table border="0" cellspacing="0" cellpadding="0" align="center"> 
       <tr> 
       <td bgcolor="#f55926" valign="bottom" style="padding: 8px 30px 8px 30px; -webkit-border-radius:3px; border-radius:3px" align="center"><a href="http://www.thing.html" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; display: inline-block;">Read More</a> 
       </td> 
       </tr> 
      </table> 
      </td> 
     </tr> 
     </table> 
     <!--Button + Social End --> 


    </td> 
    </tr> 


</table> 

、両方の行はコンテンツ整列トップと特定の高さを持っている：