HTML如何在一行中对齐两个表格？答案

【问题标题】：HTML how to align two tables in one row?HTML如何在一行中对齐两个表格？
【发布时间】：2012-12-26 00:51:00
【问题描述】：

如何将两个表格排成一行，在页面中间？我想看到的结果：

                                11 12   11 12
                                21 22   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>

【问题讨论】：

标签： html html-table

【解决方案1】：

请使用这个，根据需要调整宽度，如果你想放置在文档的中心，取一个 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>

【讨论】：

只需在第一个添加一个
在最后添加一个
，这个更简单，将 100px 更改为你希望

【解决方案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 属性。

【讨论】：

【解决方案3】：

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>

【讨论】：