outlook - 如何创建两栏电子邮件通讯

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 ，我想并排放置底部的两个灰色表格。

Fiddle

Answer 1

对于 HTML 电子邮件，嵌套表格是您的 friend :)

<强> 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>