2014-10-09 45 views
0

我正在設計的電子郵件有一些問題。我試圖將三張桌子放在一起,接下來的三張桌子(但是當我在移動設備上查看它時會一個接一個地做)。這適用於像yahoo和hotmail這樣的電子郵件客戶端,但它開始打破在展望中,兩人將與下一張桌子並排(在電子郵件的右側創建一個巨大的空間)。我對電子郵件設計頗爲陌生,所以任何幫助都很棒。展望正在打破我的電子郵件

<table width="593" border="0" cellspacing="0" cellpadding="0"> 
    <tbody> 
     <tr> 
      <td width="593"><table style="float: left;" align="center" 
        border="0" width="196" cellpadding="0" cellspacing="0"> 
        <tbody> 
         <tr> 
          <td height="5" colspan="3"></td> 
          <td width="5" colspan="3" rowspan="4">&nbsp;</td> 
         </tr> 
         <tr> 
          <td colspan="3" bgcolor="#ffffff"><span 
           style="font-size: 10px; font-family: Helvetica, Arial, sans-serif;"><img 
            src="entertainment.gif" alt="" width="38" height="38" 
            align="left" />&nbsp;&nbsp;<strong>Magazine 
             Subsription</strong><br> &nbsp; Some awesome stuff</span></td> 
         </tr> 
         <tr> 
          <td colspan="3" bgcolor="#ffffff"><a target="_blank" 
           href="LINK"><img style="display: block;" src="IMAGE" 
            alt="Parrot Rolling Spider" border="0" height="190" width="190"></a></td> 
         </tr> 
         <tr> 
          <td width="5" height="26" bgcolor="#ffffff">&nbsp;</td> 
          <td width="84" bgcolor="#ffffff"><span 
           style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif;">12,000 
            Points</span></td> 
          <td width="101" bgcolor="#ffffff"><table align="" 
            width="101" height="26" cellpadding="0" cellspacing="0"> 
            <tr valign="middle" align="center" width="300" height="10" 
             bgcolor="#8ec043" style="color: #ffffff;"> 
             <td valign="middle" 
              style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif" 
              width="83" height="24"><div align="center"> 
               <a href="LINK" 
                style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height: 10px; width: 100%; display: inline-block"><span 
                style="color: #FFFFFF">Spend Points</span></a> 
              </div></td> 
             <td width="16" valign="middle"><a href="LINK"><img 
               src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/maximile-email-elements2014/arrow.gif" 
               alt="" width="12" height="16" align="left" /></a></td> 
            </tr> 
           </table></td> 
         </tr> 
        </tbody> 
       </table> 
       <table style="float: left;" align="center" border="0" width="196" 
        cellpadding="0" cellspacing="0"> 
        <tbody> 
         <tr> 
          <td height="5" colspan="3"></td> 
          <td width="5" colspan="3" rowspan="4">&nbsp;</td> 
         </tr> 
         <tr> 
          <td colspan="3" bgcolor="#ffffff"><span 
           style="font-size: 10px; font-family: Helvetica, Arial, sans-serif;"><img 
            src="entertainment.gif" alt="" width="38" height="38" 
            align="left" />&nbsp;&nbsp;<strong>Magazine 
             Subsription</strong><br> &nbsp; Some awesome stuff</span></td> 
         </tr> 
         <tr> 
          <td colspan="3" bgcolor="#ffffff"><a target="_blank" 
           href="LINK"><img style="display: block;" src="IMAGE" 
            alt="Parrot Rolling Spider" border="0" height="190" width="190"></a></td> 
         </tr> 
         <tr> 
          <td width="5" height="26" bgcolor="#ffffff">&nbsp;</td> 
          <td width="84" bgcolor="#ffffff"><span 
           style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif;">12,000 
            Points</span></td> 
          <td width="101" bgcolor="#ffffff"><table align="" 
            width="101" height="26" cellpadding="0" cellspacing="0"> 
            <tr valign="middle" align="center" width="300" height="10" 
             bgcolor="#8ec043" style="color: #ffffff;"> 
             <td valign="middle" 
              style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif" 
              width="83" height="24"><div align="center"> 
               <a href="LINK" 
                style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height: 10px; width: 100%; display: inline-block"><span 
                style="color: #FFFFFF">Spend Points</span></a> 
              </div></td> 
             <td width="16" valign="middle"><a href="LINK"><img 
               src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/maximile-email-elements2014/arrow.gif" 
               alt="" width="12" height="16" align="left" /></a></td> 
            </tr> 
           </table></td> 
         </tr> 
        </tbody> 
       </table> 
       <table style="float: left;" align="center" border="0" width="196" 
        cellpadding="0" cellspacing="0"> 
        <tbody> 
         <tr> 
          <td height="5" colspan="3"></td> 
          <td width="5" colspan="3" rowspan="4">&nbsp;</td> 
         </tr> 
         <tr> 
          <td colspan="3" bgcolor="#ffffff"><span 
           style="font-size: 10px; font-family: Helvetica, Arial, sans-serif;"><img 
            src="entertainment.gif" alt="" width="38" height="38" 
            align="left" />&nbsp;&nbsp;<strong>Magazine 
             Subsription</strong><br> &nbsp; Some awesome stuff</span></td> 
         </tr> 
         <tr> 
          <td colspan="3" bgcolor="#ffffff"><a target="_blank" 
           href="LINK"><img style="display: block;" src="IMAGE" 
            alt="Parrot Rolling Spider" border="0" height="190" width="190"></a></td> 
         </tr> 
         <tr> 
          <td width="5" height="26" bgcolor="#ffffff">&nbsp;</td> 
          <td width="84" bgcolor="#ffffff"><span 
           style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif;">12,000 
            Points</span></td> 
          <td width="101" bgcolor="#ffffff"><table align="" 
            width="101" height="26" cellpadding="0" cellspacing="0"> 
            <tr valign="middle" align="center" width="300" height="10" 
             bgcolor="#8ec043" style="color: #ffffff;"> 
             <td valign="middle" 
              style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif" 
              width="83" height="24"><div align="center"> 
               <a href="LINK" 
                style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height: 10px; width: 100%; display: inline-block"><span 
                style="color: #FFFFFF">Spend Points</span></a> 
              </div></td> 
             <td width="16" valign="middle"><a href="LINK"><img 
               src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/maximile-email-elements2014/arrow.gif" 
               alt="" width="12" height="16" align="left" /></a></td> 
            </tr> 
           </table></td> 
         </tr> 
        </tbody> 
       </table> 
       <p>&nbsp;</p> 
       <table style="float: left;" align="center" border="0" width="196" 
        cellpadding="0" cellspacing="0"> 
        <tbody> 
         <tr> 
          <td height="5" colspan="3"></td> 
          <td width="5" colspan="3" rowspan="4">&nbsp;</td> 
         </tr> 
         <tr> 
          <td colspan="3" bgcolor="#ffffff"><span 
           style="font-size: 10px; font-family: Helvetica, Arial, sans-serif;"><img 
            src="entertainment.gif" alt="" width="38" height="38" 
            align="left" />&nbsp;&nbsp;<strong>Magazine 
             Subsription</strong><br> &nbsp; Some awesome stuff</span></td> 
         </tr> 
         <tr> 
          <td colspan="3" bgcolor="#ffffff"><a target="_blank" 
           href="LINK"><img style="display: block;" src="IMAGE" 
            alt="Parrot Rolling Spider" border="0" height="190" width="190"></a></td> 
         </tr> 
         <tr> 
          <td width="5" height="26" bgcolor="#ffffff">&nbsp;</td> 
          <td width="84" bgcolor="#ffffff"><span 
           style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif;">12,000 
            Points</span></td> 
          <td width="101" bgcolor="#ffffff"><table align="" 
            width="101" height="26" cellpadding="0" cellspacing="0"> 
            <tr valign="middle" align="center" width="300" height="10" 
             bgcolor="#8ec043" style="color: #ffffff;"> 
             <td valign="middle" 
              style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif" 
              width="83" height="24"><div align="center"> 
               <a href="LINK" 
                style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height: 10px; width: 100%; display: inline-block"><span 
                style="color: #FFFFFF">Spend Points</span></a> 
              </div></td> 
             <td width="16" valign="middle"><a href="LINK"><img 
               src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/maximile-email-elements2014/arrow.gif" 
               alt="" width="12" height="16" align="left" /></a></td> 
            </tr> 
           </table></td> 
         </tr> 
        </tbody> 
       </table> 
       <table style="float: left;" align="center" border="0" width="196" 
        cellpadding="0" cellspacing="0"> 
        <tbody> 
         <tr> 
          <td height="5" colspan="3"></td> 
          <td width="5" colspan="3" rowspan="4">&nbsp;</td> 
         </tr> 
         <tr> 
          <td colspan="3" bgcolor="#ffffff"><span 
           style="font-size: 10px; font-family: Helvetica, Arial, sans-serif;"><img 
            src="entertainment.gif" alt="" width="38" height="38" 
            align="left" />&nbsp;&nbsp;<strong>Magazine 
             Subsription</strong><br> &nbsp; Some awesome stuff</span></td> 
         </tr> 
         <tr> 
          <td colspan="3" bgcolor="#ffffff"><a target="_blank" 
           href="LINK"><img style="display: block;" src="IMAGE" 
            alt="Parrot Rolling Spider" border="0" height="190" width="190"></a></td> 
         </tr> 
         <tr> 
          <td width="5" height="26" bgcolor="#ffffff">&nbsp;</td> 
          <td width="84" bgcolor="#ffffff"><span 
           style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif;">12,000 
            Points</span></td> 
          <td width="101" bgcolor="#ffffff"><table align="" 
            width="101" height="26" cellpadding="0" cellspacing="0"> 
            <tr valign="middle" align="center" width="300" height="10" 
             bgcolor="#8ec043" style="color: #ffffff;"> 
             <td valign="middle" 
              style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif" 
              width="83" height="24"><div align="center"> 
               <a href="LINK" 
                style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height: 10px; width: 100%; display: inline-block"><span 
                style="color: #FFFFFF">Spend Points</span></a> 
              </div></td> 
             <td width="16" valign="middle"><a href="LINK"><img 
               src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/maximile-email-elements2014/arrow.gif" 
               alt="" width="12" height="16" align="left" /></a></td> 
            </tr> 
           </table></td> 
         </tr> 
        </tbody> 
       </table> 
       <table style="float: left;" align="center" border="0" width="196" 
        cellpadding="0" cellspacing="0"> 
        <tbody> 
         <tr> 
          <td height="5" colspan="3"></td> 
          <td width="5" colspan="3" rowspan="4">&nbsp;</td> 
         </tr> 
         <tr> 
          <td colspan="3" bgcolor="#ffffff"><span 
           style="font-size: 10px; font-family: Helvetica, Arial, sans-serif;"><img 
            src="entertainment.gif" alt="" width="38" height="38" 
            align="left" />&nbsp;&nbsp;<strong>Magazine 
             Subsription</strong><br> &nbsp; Some awesome stuff</span></td> 
         </tr> 
         <tr> 
          <td colspan="3" bgcolor="#ffffff"><a target="_blank" 
           href="LINK"><img style="display: block;" src="IMAGE" 
            alt="Parrot Rolling Spider" border="0" height="190" width="190"></a></td> 
         </tr> 
         <tr> 
          <td width="5" height="26" bgcolor="#ffffff">&nbsp;</td> 
          <td width="84" bgcolor="#ffffff"><span 
           style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif;">12,000 
            Points</span></td> 
          <td width="101" bgcolor="#ffffff"><table align="" 
            width="101" height="26" cellpadding="0" cellspacing="0"> 
            <tr valign="middle" align="center" width="300" height="10" 
             bgcolor="#8ec043" style="color: #ffffff;"> 
             <td valign="middle" 
              style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif" 
              width="83" height="24"><div align="center"> 
               <a href="LINK" 
                style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height: 10px; width: 100%; display: inline-block"><span 
                style="color: #FFFFFF">Spend Points</span></a> 
              </div></td> 
             <td width="16" valign="middle"><a href="LINK"><img 
               src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/maximile-email-elements2014/arrow.gif" 
               alt="" width="12" height="16" align="left" /></a></td> 
            </tr> 
           </table></td> 
         </tr> 
        </tbody> 
       </table> 
       <p>&nbsp;</p> 
       <p>&nbsp;</p></td> 
     </tr> 
    </tbody> 
</table> 
+0

這可能是'Outlook分頁符錯誤'。在這裏看到我的答案 - http://stackoverflow.com/a/5662054/582278,http://stackoverflow.com/a/5662156/582278 – 2014-10-09 14:52:41

+0

可能重複[HTML電子郵件 - Outlook 2007 + 10,無關表格對齊]( http://stackoverflow.com/questions/5630718/html-email-outlook-200710-unrelated-tables-aligning) – 2014-10-09 14:53:40

+0

我看着這些帖子,並嘗試添加:但它沒有區別...... – Schro 2014-10-09 15:42:47

回答

0

,你可以把你的內容完全不同的表像這樣解決這個問題的前景錯誤:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
</head> 

<body> 
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td align="left" valign="top" style="font-size:36px;">SOME HEADER CONTENT TO GO IN HERE</td> 
    </tr> 
</table> 
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
    <tbody> 
     <tr> 
      <td width="593"><table style="float: left;" align="center" border="0" width="196" 
        cellpadding="0" cellspacing="0"> 
        <tbody> 
         <tr> 
          <td bgcolor="#ffffff"><span 
           style="font-size: 10px; font-family: Helvetica, Arial, sans-serif;"><img 
            src="entertainment.gif" alt="" width="38" height="38" 
            align="left" />&nbsp;&nbsp;<strong>Magazine 
             Subsription</strong><br> &nbsp; Some awesome stuff</span></td> 
         </tr> 
         <tr> 
          <td bgcolor="#ffffff"><a target="_blank" 
           href="LINK"><img style="display: block;" src="IMAGE" 
            alt="Parrot Rolling Spider" border="0" height="190" width="190"></a></td> 
         </tr> 
         <tr> 
          <td bgcolor="#ffffff"><table width="100%" border="0" cellspacing="0" cellpadding="0"> 
          <tr> 
           <td width="84" height="26" bgcolor="#ffffff"><span 
           style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif;">12,000 
            Points</span></td> 
          <td width="101" bgcolor="#ffffff"><table align="" 
            width="101" height="26" cellpadding="0" cellspacing="0"> 
            <tr valign="middle" align="center" width="300" height="10" 
             bgcolor="#8ec043" style="color: #ffffff;"> 
             <td valign="middle" 
              style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif" 
              width="83" height="24"><div align="center"> 
               <a href="LINK" 
                style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height: 10px; width: 100%; display: inline-block"><span 
                style="color: #FFFFFF">Spend Points</span></a> 
              </div></td> 
             <td width="16" valign="middle"><a href="LINK"><img 
               src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/maximile-email-elements2014/arrow.gif" 
               alt="" width="12" height="16" align="left" /></a></td> 
            </tr> 
           </table></td> 
          </tr> 
          </table></td> 
         </tr> 

        </tbody> 
       </table> 
       <table style="float: left;" align="center" border="0" width="196" 
        cellpadding="0" cellspacing="0"> 
        <tbody> 
         <tr> 
          <td bgcolor="#ffffff"><span 
           style="font-size: 10px; font-family: Helvetica, Arial, sans-serif;"><img 
            src="entertainment.gif" alt="" width="38" height="38" 
            align="left" />&nbsp;&nbsp;<strong>Magazine 
             Subsription</strong><br> &nbsp; Some awesome stuff</span></td> 
         </tr> 
         <tr> 
          <td bgcolor="#ffffff"><a target="_blank" 
           href="LINK"><img style="display: block;" src="IMAGE" 
            alt="Parrot Rolling Spider" border="0" height="190" width="190"></a></td> 
         </tr> 
         <tr> 
          <td bgcolor="#ffffff"><table width="100%" border="0" cellspacing="0" cellpadding="0"> 
          <tr> 
           <td width="84" height="26" bgcolor="#ffffff"><span 
           style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif;">12,000 
            Points</span></td> 
          <td width="101" bgcolor="#ffffff"><table align="" 
            width="101" height="26" cellpadding="0" cellspacing="0"> 
            <tr valign="middle" align="center" width="300" height="10" 
             bgcolor="#8ec043" style="color: #ffffff;"> 
             <td valign="middle" 
              style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif" 
              width="83" height="24"><div align="center"> 
               <a href="LINK" 
                style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height: 10px; width: 100%; display: inline-block"><span 
                style="color: #FFFFFF">Spend Points</span></a> 
              </div></td> 
             <td width="16" valign="middle"><a href="LINK"><img 
               src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/maximile-email-elements2014/arrow.gif" 
               alt="" width="12" height="16" align="left" /></a></td> 
            </tr> 
           </table></td> 
          </tr> 
          </table></td> 
         </tr> 

        </tbody> 
       </table> 
       <table style="float: left;" align="center" border="0" width="196" 
        cellpadding="0" cellspacing="0"> 
        <tbody> 
         <tr> 
          <td bgcolor="#ffffff"><span 
           style="font-size: 10px; font-family: Helvetica, Arial, sans-serif;"><img 
            src="entertainment.gif" alt="" width="38" height="38" 
            align="left" />&nbsp;&nbsp;<strong>Magazine 
             Subsription</strong><br> &nbsp; Some awesome stuff</span></td> 
         </tr> 
         <tr> 
          <td bgcolor="#ffffff"><a target="_blank" 
           href="LINK"><img style="display: block;" src="IMAGE" 
            alt="Parrot Rolling Spider" border="0" height="190" width="190"></a></td> 
         </tr> 
         <tr> 
          <td bgcolor="#ffffff"><table width="100%" border="0" cellspacing="0" cellpadding="0"> 
          <tr> 
           <td width="84" height="26" bgcolor="#ffffff"><span 
           style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif;">12,000 
            Points</span></td> 
          <td width="101" bgcolor="#ffffff"><table align="" 
            width="101" height="26" cellpadding="0" cellspacing="0"> 
            <tr valign="middle" align="center" width="300" height="10" 
             bgcolor="#8ec043" style="color: #ffffff;"> 
             <td valign="middle" 
              style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif" 
              width="83" height="24"><div align="center"> 
               <a href="LINK" 
                style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height: 10px; width: 100%; display: inline-block"><span 
                style="color: #FFFFFF">Spend Points</span></a> 
              </div></td> 
             <td width="16" valign="middle"><a href="LINK"><img 
               src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/maximile-email-elements2014/arrow.gif" 
               alt="" width="12" height="16" align="left" /></a></td> 
            </tr> 
           </table></td> 
          </tr> 
          </table></td> 
         </tr> 

        </tbody> 
       </table></td> 
     </tr> 
    </tbody> 
</table> 
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
    <tbody> 
     <tr> 
      <td width="593"><table style="float: left;" align="center" border="0" width="196" 
        cellpadding="0" cellspacing="0"> 
        <tbody> 
         <tr> 
          <td bgcolor="#ffffff"><span 
           style="font-size: 10px; font-family: Helvetica, Arial, sans-serif;"><img 
            src="entertainment.gif" alt="" width="38" height="38" 
            align="left" />&nbsp;&nbsp;<strong>Magazine 
             Subsription</strong><br> &nbsp; Some awesome stuff</span></td> 
         </tr> 
         <tr> 
          <td bgcolor="#ffffff"><a target="_blank" 
           href="LINK"><img style="display: block;" src="IMAGE" 
            alt="Parrot Rolling Spider" border="0" height="190" width="190"></a></td> 
         </tr> 
         <tr> 
          <td bgcolor="#ffffff"><table width="100%" border="0" cellspacing="0" cellpadding="0"> 
          <tr> 
           <td width="84" height="26" bgcolor="#ffffff"><span 
           style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif;">12,000 
            Points</span></td> 
          <td width="101" bgcolor="#ffffff"><table align="" 
            width="101" height="26" cellpadding="0" cellspacing="0"> 
            <tr valign="middle" align="center" width="300" height="10" 
             bgcolor="#8ec043" style="color: #ffffff;"> 
             <td valign="middle" 
              style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif" 
              width="83" height="24"><div align="center"> 
               <a href="LINK" 
                style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height: 10px; width: 100%; display: inline-block"><span 
                style="color: #FFFFFF">Spend Points</span></a> 
              </div></td> 
             <td width="16" valign="middle"><a href="LINK"><img 
               src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/maximile-email-elements2014/arrow.gif" 
               alt="" width="12" height="16" align="left" /></a></td> 
            </tr> 
           </table></td> 
          </tr> 
          </table></td> 
         </tr> 

        </tbody> 
       </table> 
       <table style="float: left;" align="center" border="0" width="196" 
        cellpadding="0" cellspacing="0"> 
        <tbody> 
         <tr> 
          <td bgcolor="#ffffff"><span 
           style="font-size: 10px; font-family: Helvetica, Arial, sans-serif;"><img 
            src="entertainment.gif" alt="" width="38" height="38" 
            align="left" />&nbsp;&nbsp;<strong>Magazine 
             Subsription</strong><br> &nbsp; Some awesome stuff</span></td> 
         </tr> 
         <tr> 
          <td bgcolor="#ffffff"><a target="_blank" 
           href="LINK"><img style="display: block;" src="IMAGE" 
            alt="Parrot Rolling Spider" border="0" height="190" width="190"></a></td> 
         </tr> 
         <tr> 
          <td bgcolor="#ffffff"><table width="100%" border="0" cellspacing="0" cellpadding="0"> 
          <tr> 
           <td width="84" height="26" bgcolor="#ffffff"><span 
           style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif;">12,000 
            Points</span></td> 
          <td width="101" bgcolor="#ffffff"><table align="" 
            width="101" height="26" cellpadding="0" cellspacing="0"> 
            <tr valign="middle" align="center" width="300" height="10" 
             bgcolor="#8ec043" style="color: #ffffff;"> 
             <td valign="middle" 
              style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif" 
              width="83" height="24"><div align="center"> 
               <a href="LINK" 
                style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height: 10px; width: 100%; display: inline-block"><span 
                style="color: #FFFFFF">Spend Points</span></a> 
              </div></td> 
             <td width="16" valign="middle"><a href="LINK"><img 
               src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/maximile-email-elements2014/arrow.gif" 
               alt="" width="12" height="16" align="left" /></a></td> 
            </tr> 
           </table></td> 
          </tr> 
          </table></td> 
         </tr> 

        </tbody> 
       </table> 
       <table style="float: left;" align="center" border="0" width="196" 
        cellpadding="0" cellspacing="0"> 
        <tbody> 
         <tr> 
          <td bgcolor="#ffffff"><span 
           style="font-size: 10px; font-family: Helvetica, Arial, sans-serif;"><img 
            src="entertainment.gif" alt="" width="38" height="38" 
            align="left" />&nbsp;&nbsp;<strong>Magazine 
             Subsription</strong><br> &nbsp; Some awesome stuff</span></td> 
         </tr> 
         <tr> 
          <td bgcolor="#ffffff"><a target="_blank" 
           href="LINK"><img style="display: block;" src="IMAGE" 
            alt="Parrot Rolling Spider" border="0" height="190" width="190"></a></td> 
         </tr> 
         <tr> 
          <td bgcolor="#ffffff"><table width="100%" border="0" cellspacing="0" cellpadding="0"> 
          <tr> 
           <td width="84" height="26" bgcolor="#ffffff"><span 
           style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif;">12,000 
            Points</span></td> 
          <td width="101" bgcolor="#ffffff"><table align="" 
            width="101" height="26" cellpadding="0" cellspacing="0"> 
            <tr valign="middle" align="center" width="300" height="10" 
             bgcolor="#8ec043" style="color: #ffffff;"> 
             <td valign="middle" 
              style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif" 
              width="83" height="24"><div align="center"> 
               <a href="LINK" 
                style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height: 10px; width: 100%; display: inline-block"><span 
                style="color: #FFFFFF">Spend Points</span></a> 
              </div></td> 
             <td width="16" valign="middle"><a href="LINK"><img 
               src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/maximile-email-elements2014/arrow.gif" 
               alt="" width="12" height="16" align="left" /></a></td> 
            </tr> 
           </table></td> 
          </tr> 
          </table></td> 
         </tr> 

        </tbody> 
       </table></td> 
     </tr> 
    </tbody> 
</table> 
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td align="left" valign="top" style="font-size:36px;">FOOTER<br /> 
     Ts&amp;Cs to go here as well</td> 
    </tr> 
</table> 

</body> 
</html> 

此外,避免行跨度和列跨度 - 使用嵌套表來代替。我已在上面的代碼中對此進行了修改