Question

我正在尝试创建HTML电子邮件，这就是我使用表格的原因。我有一些开头的文字，后面跟着一些子弹点。但是，开头的文本被推到右边，而不是在子弹点上排队。

我的HTML：

<table bordercolor="#FF0000" style="color:#585A63; font-family:Arial,Helvetica, sans-serif; background:#FFFFFF;width:600px;" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td width="15" align="left" valign="top">
            <img src="images/spacer.gif" width="15" height="2" border="0" alt=" " style="display: block;" />          
        </td>
        <td width="288" align="left" valign="top" style="color: #585A63; font-family: Arial, Helvetica, sans-serif; font-size: 13px; background: #FFFFFF; width: 288px;">
            <p style="font-size: 22px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; color:#0078ae; margin: 10px 0px 10px 0px">
                Title Section Goes Here
            </p>  
            <p style="margin: 1em 0; color:#585A63; font-family:Arial, Helvetica, sans-serif; font-size:13px; font-weight: normal;">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non massa dolor. Integer magna eros, vulputate sit amet rhoncus sodales, euismod sit amet eros.
            </p>   
            <p style="margin: 13px 0 13px; color: #585A63;">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non massa dolor. Integer magna eros, vulputate sit amet rhoncus sodales, euismod sit amet eros.
            </p>     
            <p style="margin: 13px 0 13px; color: #585A63;">
                Sub Title Goes Here:<br /><br />
             </p>
                </td>
            </tr>
            <tr>
                <td>

                    <table width="260" style="color: #585A63; font-family: Arial, Helvetica, sans-serif; font-size: 13px; background: #FFFFFF; width: 260px;">
                        <tr>
                            <td width="5" height="15" valign="top">&bull;</td>
                            <td width="250" height="15" valign="top">Interesting point number 1</td>
                        </tr>

                        <tr><td>&nbsp;</td></tr>

                        <tr>
                            <td width="5" height="15" valign="top">&bull;</td>
                            <td width="250" height="15" valign="top">Interesting point number 2</td>
                        </tr>

                        <tr><td>&nbsp;</td></tr>

                        <tr>
                            <td width="5" height="15" valign="top">&bull;</td>
                            <td width="250" height="15" valign="top">Interesting point number 3</td>
                        </tr>

                        <tr><td>&nbsp;</td></tr>

                        <tr>
                            <td width="5" height="15" valign="top">&bull;</td>
                            <td width="250" height="15" valign="top">Interesting point number 4</td>
                        </tr>
                    </table>

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

Answer 1

在你的外表中你有两行。第一行有两列，第二行只有一列。如果删除包含间隔图像的第一行中的列，则应该正确排列。

删除它：

   <td width="15" align="left" valign="top">
       <img src="images/spacer.gif" width="15" height="2" border="0" alt=" " style="display: block;" />          
   </td>

Answer 2

这似乎是因为你将一个表嵌套在另一个表中。这是他们去嵌套的小提琴：http://jsfiddle.net/wWxYg/1/

这也是代码。

<table bordercolor="#FF0000" style="color:#585A63; font-family:Arial,Helvetica, sans-serif; background:#FFFFFF;width:600px;" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td width="15" align="left" valign="top">
            <img src="images/spacer.gif" width="15" height="2" border="0" alt=" "/>          
        </td>
        <td width="288" align="left" valign="top" style="color: #585A63; font-family: Arial, Helvetica, sans-serif; font-size: 13px; background: #FFFFFF; width: 288px;">

          <p style="font-size: 22px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; color:#0078ae; margin: 10px 0px 10px 0px">
          Title Section Goes Here
          </p>

          <p style="margin: 1em 0; color:#585A63; font-family:Arial, Helvetica, sans-serif; font-size:13px; font-weight: normal;">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non massa dolor. Integer magna eros, vulputate sit amet rhoncus sodales, euismod sit amet eros.
          </p>

          <p style="margin: 13px 0 13px; color: #585A63;">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non massa dolor. Integer magna eros, vulputate sit amet rhoncus sodales, euismod sit amet eros.
          </p>

          <p style="margin: 13px 0 13px; color: #585A63;">
          Sub Title Goes Here:<br /><br />
          </p>
        </td>
    </tr>                
</table>

<table width="260" style="color: #585A63; font-family: Arial, Helvetica, sans-serif; font-size: 13px; background: #FFFFFF; width: 260px;">
    <tr>
        <td width="5" height="15" valign="top">&bull;</td>
        <td width="250" height="15" valign="top">Interesting point number 1</td>
    </tr>

    <tr><td>&nbsp;</td></tr>

    <tr>
        <td width="5" height="15" valign="top">&bull;</td>
        <td width="250" height="15" valign="top">Interesting point number 2</td>
    </tr>

    <tr><td>&nbsp;</td></tr>

    <tr>
        <td width="5" height="15" valign="top">&bull;</td>
        <td width="250" height="15" valign="top">Interesting point number 3</td>
    </tr>

    <tr><td>&nbsp;</td></tr>

    <tr>
        <td width="5" height="15" valign="top">&bull;</td>
        <td width="250" height="15" valign="top">Interesting point number 4</td>
    </tr>
</table>

Answer 3

在第一行中，我用第二行交换第一个单元格。如果您想要间距，可以添加padding-left:10px;

jsfiddle： http://jsfiddle.net/wWxYg/2/

HTML表格没有正确堆叠

3 个答案: