如何創建一個雙列電子郵件通訊

Question

我想創建一個兩欄電子郵件傳單，但我遇到編碼的問題，因爲Outlook討厭CSS。

我使用的表格儘可能簡單，但我希望左右兩個單獨的表格，以便我可以根據需要向其中添加數據。

我試着在兩個表格上左右兩邊使用float，但是Outlook忽略了這種風格。

我知道底部的兩個灰色表格分別位於各自的「持有人」表格中，但這樣我可以在添加新文章時複製灰色的「數據」表格。

<table class="all" width="auto" height="auto" border="0" cellspacing="0"><tr><td height="504"> 

<table width="750" height="140" border="0" cellspacing="0"> 
    <tr> 
    <td width="200" valign="bottom" bgcolor="#E6E6E6">&nbsp;</td> 

    <td width="345" align="center" valign="bottom" bgcolor="#E6E6E6">&nbsp;</td> 
    <td width="152" align="center" valign="bottom" bgcolor="#E6E6E6">&nbsp;</td> 
    <td width="45" align="center" valign="bottom" bgcolor="#E6E6E6">&nbsp;</td> 
    </tr> 
    <tr> 
    <td width="200" valign="bottom" bgcolor="#E6E6E6">&nbsp;</td> 
    <td align="center" valign="bottom" bgcolor="#E6E6E6"><font color="#111111" face="Arial Narrow" size="+2">DECEMBER NEWSLETTER</font></td> 
    <td width="152" align="center" valign="bottom" bgcolor="#E6E6E6"><font size="2"><strong>#4 - <span class="orange">04.12.13</span></strong></font></td> 
    <td width="45" align="center" valign="bottom" bgcolor="#E6E6E6">&nbsp;</td> 
    </tr> 
</table> 

<table width="750" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td width="75" height="50" bgcolor="#E6E6E6" scope="row">&nbsp;</td> 
    <td width="600" rowspan="2" scope="row"><img src="http://placehold.it/600x200"/></td> 
    <td width="75" bgcolor="#E6E6E6" scope="row">&nbsp;</td> 
    </tr> 
    <tr> 
    <td width="75" height="81" scope="row">&nbsp;</td> 
    <td scope="row">&nbsp;</td> 
    </tr> 
</table> 


<table class="holder" width="750" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td valign="top" scope="row"> 

    <table class="inlinetableleft" width="360"> 
     <tr> 
      <td width="371" align="left">  

<!------------LEFT COLUMN------------------>   

<table width="360" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <th height="103" colspan="4" align="left" valign="middle" bgcolor="#CCCCCC" scope="row">&nbsp;</th> 
    </tr> 
    </table>  

<!--------------LEFT COLUMN END------------->  

</td> 
</tr> 
</table> 
<table class="inlinetableright" width="360"> 
<tr> 
    <td align="left">  

<!------------RIGHT COLUMN------------------>     

<table width="360" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td height="106" align="left" bgcolor="#CCCCCC" scope="row">&nbsp;</td> 
    </tr> 
    </table>  

<!-----------RIGHT COLUMN END-------------->  

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


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

這是我的通訊的一個小提琴到目前爲止，這是我想要並排的底部兩個灰色表。

Fiddle

Answer 1

對於HTML格式的電子郵件，嵌套表是你的朋友:)

JSFiddle

注：表格周圍的邊框是隻是爲了顯示你在哪裏表是。

<table border="0" width="600" cellpadding="0" cellspacing="0" align="center"> 
    <tr> 
     <td colspan="2"> 
      header content here 
     </td> 
    </tr> 
    <tr> 
     <td width="300"> 

      <table border="0" width="300" cellpadding="1" cellspacing="0" align="left"> 
       <tr> 
        <td>Left Content</td> 
       </tr> 
      </table> 



     </td> 
     <td width="300"> 

      <table border="0" width="300" cellpadding="1" cellspacing="0" align="left"> 
       <tr> 
        <td>Right content</td> 
       </tr> 
      </table> 

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