HTMLの電子メールテーブルのボタン

Question

私は、たくさんの画像を使って電子メールを更新してコードを作成しようとしていますが、テーブルを使用する際に問題が発生しています。私はそれらが必要とするほど狭くなるようには見えない。私が望むのは、それらを互いにかなり接近させ、左に揃えることです。私は前にテーブルで仕事をしたことはありませんでしたが、私はそれらを読んで、すべてが正しいと思われますが、仕事はありません。何を編集する必要があるかについての提案はありますか？ PSこれはOutlookで多く見られるので、大きな要因です。

http://codepen.io/Mdadedesign/pen/qavwkg

<!-- begin snippet: js hide: false console: true babel: false --> 

<!-- language: lang-html --> 

<tr style='mso-yfti-irow:4;mso-yfti-lastrow:yes; background-color:pink; width:300px'> 


      <td width="90" style="background-color:lightblue;"> 
      <table width="90" style="float:left;"> 
       <tr> 
       <td> 
        <table border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto;"> 
        <tbody> 
        <tr> 
         <td align="center"> 
         <table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;"> 
          <tr> 
          <td align="left" bgcolor="#075aa0" width="90" style="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; padding: 5px;width: 90px;display: block;text-decoration: none;text-align: center;font-weight: bold;font-size: 11.5px;font-family: sans-serif;color: #ffffff;border: 1px solid red;line-height:15px;"> 
           <a href="http://premierdisability.com/" style="text-decoration:none;color:#fff;"> 
           Android App 
           </a> 
          </td> 
          </tr> 
         </table> 
         </td> 
        </tr> 
        </tbody> 
        </table> 
       </td> 
       </tr> 
      </table> 
      </td> 


      <td width="70" style="background-color:cornsilk;"> 
      <table width="70" style="float:left;"> 
       <tr> 
       <td> 
        <table border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto;"> 
        <tbody> 
        <tr> 
         <td align="center"> 
         <table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;"> 
          <tr> 
          <td align="center" bgcolor="#075aa0" width="70" style="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; padding: 5px;width: 90px;display: block;text-decoration: none;text-align: center;font-weight: bold;font-size: 11.5px;font-family: sans-serif;color: #ffffff;border: 1px solid red;line-height:15px;"> 
           <a href="http://premierdisability.com/" style="text-decoration:none;color:#fff;"> 
           Apple App 
           </a> 
          </td> 
          </tr> 
         </table> 
         </td> 
        </tr> 
        </tbody> 
        </table> 
       </td> 
       </tr> 
      </table> 
      </td> 


      <td width="70" style="background-color:lightblue;"> 
      <table width="70" style="float:left;"> 
       <tr> 
       <td> 
        <table border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto;"> 
        <tbody> 
        <tr> 
         <td align="center"> 
         <table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;"> 
          <tr> 
          <td align="left" bgcolor="#075aa0" width="90" style="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; padding: 5px;width: 90px;display: block;text-decoration: none;text-align: center;font-weight: bold;font-size: 11.5px;font-family: sans-serif;color: #ffffff;border: 1px solid red;line-height:15px;"> 
           <a href="http://premierdisability.com/" style="text-decoration:none;color:#fff;"> 
           Refer A Friend 
           </a> 
          </td> 
          </tr> 
         </table> 
         </td> 
        </tr> 
        </tbody> 
        </table> 
       </td> 
       </tr> 
      </table> 
      </td> 


        </tr> 

Answer 1

あなたは右、下にある3つのボタン、 "アンドロイドアプリケーション"、 "AppleのApp" の話と "友人を参照してください" していますか？

あなたが持っているスタイルを見ると、表に設定されている幅と、各ボタンのスタイルで設定されている幅（px）の両方があります。実際には合計幅で済ませるほどではありませんが、90pxから70px、90pxから60px、90pxから80pxに変更することができます。それらを小さくする場合は、それらをお互いに置くか、テキストとクリック可能な領域のサイズを小さくする必要があります。