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

Question

如何让两个表格在同一行中间对齐页面？ 我想要看到的结果是：

                                11 12   11 12
                                21 22   21 22

The result that I get:

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>

- user1942505

Answer 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>

- user1954395

---

只需在此处添加<div style="width:100px; margin:0 auto;">作为开头，在结尾处添加</div>，这个更简单，将100px更改为您想要的大小即可。 - Color

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中使用浮动属性。

- gwt

Answer 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>

- Mihai Matei