HTML表格没有正确堆叠

我试图创建一个HTML电子邮件，这就是为什么我使用表格。我有一些起始文本，然后是它下面的一些项目符号。但是，开始的文本被推向右侧，而不是排列在子弹点上方。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>

来源

2013-05-03 Timothy Adams

这似乎是因为你嵌套在另一个里面一个表。这里有一个小提琴与他们去嵌套：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>

来源

2013-05-03 01:53:19

我确实需要有嵌套的表格。我的外表实际上包含了几个嵌套表，但这是唯一给我带来问题的。 – 2013-05-03 01:58:43

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

移除此：

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

来源

2013-05-03 01:54:50 nolt2232

这不起作用。起始文本然后占用整行，而它应该只占用左边的1/2。 – 2013-05-03 02:02:45

你想要标题部分和子弹只占据左侧？如果是这样，只需将表格的宽度缩小即可。 http://jsfiddle.net/fMaLx/ – nolt2232 2013-05-03 02:06:24

在第一行中我交换与所述第二第一小区。如果你想间距可以添加padding-left:10px;

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

来源

2013-05-03 02:12:07 Mal

HTML表格没有正确堆叠

回答

相关问题