如何堆疊包含文字的HTML表格？

如何堆疊中間帶有文字的HTML表格？我正在將文字顯示在表格的側面。我錯過了什麼？如何堆疊包含文字的HTML表格？

<!DOCTYPE html> 
<html> 
<body> 
    <p style="align: left;"> Table1 </p> 
    <table style="background-color: #E0E0E0; font-family: helvetica; font-size: 15px; clear: left;" border="1" align="left"> 
     <tr> 
      <th> No. </th> 
      <th> Name </th> 
     </tr> 
     <tr> 
      <td> 1 </td> 
      <td>Name1</td> 
     </tr> 
    </table> 
    <p style="align: left;"> Table2 </p> 
    <table style="background-color: #E0E0E0; font-family: helvetica; font-size: 15px; clear: left;" border="1" align="left"> 
     <tr> 
      <th> No. </th> 
      <th> Color </th> 
     </tr> 
     <tr> 
      <td> 1 </td> 
      <td> Color1 </td> 
     </tr> 
    </table> 
</body> 
</html>

來源

2017-03-01 Jean

[類似這樣？]（http://jsfiddle.net/WW3bh/30770/）你的問題不清楚，請告訴我們你在找什麼。 –

如果你刪除所有'style =「align：left;」'和'align =「left」'，它們會自動堆棧（？） –

@SpencerWieczorek是的。那正是我正在尋找的。請張貼它作爲答案。 – Jean

有被定義爲第二paragaph推到它自己的線不是CSS，這樣做的一個方法是添加clear:both在它的CSS：

<p>Table1</p> 
 
<table style="background-color:#E0E0E0; font-family: helvetica;font-size: 15px;clear: left;" border="1" align ="left"> 
 
<tr><th>No.</th><th>Name</th></tr> 
 
<tr><td> 1 </td><td>Name1</td></tr> 
 
</table> 
 
<p style="clear:both">Table2</p> 
 
<table style="background-color:#E0E0E0; font-family: helvetica;font-size: 15px;clear: left;" border="1" align ="left"> 
 
<tr><th>No.</th><th>Color</th></tr> 
 
<tr><td> 1 </td><td>Color1</td></tr> 
 
</table>

或簡單的去除align和導致此clear，HTML會做你想做的默認：

<p>Table1</p> 
 
<table style="background-color:#E0E0E0; font-family: helvetica;font-size: 15px;" border="1" > 
 
<tr><th>No.</th><th>Name</th></tr> 
 
<tr><td> 1 </td><td>Name1</td></tr> 
 
</table> 
 
<p>Table2</p> 
 
<table style="background-color:#E0E0E0; font-family: helvetica;font-size: 15px;" border="1"> 
 
<tr><th>No.</th><th>Color</th></tr> 
 
<tr><td> 1 </td><td>Color1</td></tr> 
 
</table>

來源

2017-03-01 22:54:35