HTML如何在一行中對齊兩個表？

Question

如何在頁面中間的一行中對齊兩個表？ ，我想看到的結果：

       11 12 11 12 
           21 22 21 22 

的結果是我得到：

11 12 
21 22 
11 12 
21 22 

。

<table border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td>11</td> 
    <td>12</td> 
    </tr> 
    <tr> 
    <td>21</td> 
    <td>22</td> 
    </tr> 
</table> 
<table border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td>11</td> 
    <td>12</td> 
    </tr> 
    <tr> 
    <td>21</td> 
    <td>22</td> 
    </tr> 
</table> 

Answer 1

這http://jsfiddle.net/pNH3T/是一個可能的解決方案：

<div style="display:block; width:100%"> 
    <div style="margin:0 auto; width:200px;"> 
    <table border="0" cellspacing="0" cellpadding="0" style="float:left; margin-right:10px;"> 
     <tr> 
     <td>11</td> 
     <td>12</td> 
     </tr> 
     <tr> 
     <td>21</td> 
     <td>22</td> 
     </tr> 
    </table> 
    <table border="0" cellspacing="0" cellpadding="0" style="float:left"> 
     <tr> 
     <td>11</td> 
     <td>12</td> 
     </tr> 
     <tr> 
     <td>21</td> 
     <td>22</td> 
     </tr> 
    </table> 
    </div> 
</div> 

Answer 2

您可以創建另一個表並嵌入在這兩個表：

<table border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td> 
    <table border="0" cellspacing="0" cellpadding="0"> 
      <tr> 
      <td>11</td> 
      <td>12</td> 
      </tr> 
      <tr> 
      <td>21</td> 
      <td>22</td> 
      </tr> 
    </table>  
</td> 
<td> 
    <table border="0" cellspacing="0" cellpadding="0"> 
     <tr> 
      <td>11</td> 
      <td>12</td> 
     </tr> 
     <tr> 
      <td>21</td> 
      <td>22</td> 
     </tr> 
    </table> 
</td> 
</tr> 
</table> 

，或者你可以使用CSS的float屬性。

Answer 3

請使用這個，根據需要調整寬度，如果你想放置在文檔的中心，拿一個div並對齊它的頁面中心，並在其中放置下面的html。

<table border="0" cellpadding="0" cellspacing="0" style="width:50%;float:left"> 
<tbody> 
<tr> 
    <td> 11</td> 
    <td> 12</td> 
</tr> 
<tr> 
    <td> 21</td> 
    <td> 22</td> 
</tr> 
</tbody> 
</table> 
<table border="0" cellpadding="0" cellspacing="0" style="width:50%;float:left"> 
<tbody> 
<tr> 
    <td> 11</td> 
    <td> 12</td> 
</tr> 
<tr> 
    <td> 21</td> 
    <td> 22</td> 
</tr> 
</tbody> 
</table>