HTML 中的表格对齐方式

Question

如何将 3 个不同的表 - L1、L2、R1 放置在以下指定位置：

左上角 L1 - 2 行
L2 紧下方 L1 左侧 - 2 行。
右上角的 R1 - 这有 10 行

问题是 L2 位于 L1 的下方，因为它是内联的，我怎样才能让它显示在 L1 的正下方？应该向左/向右浮动还是任何其他设置都可以帮助我实现这一目标？

<table class="one" id="L1">
    <tr>
        <th>Month-1</th>
        <th>Savings-1</th>
    </tr>
    <tr>
        <td>January</td>
        <td>0</td>
    </tr>
</table>
<table class="one" id="L2">
    <tr>
        <th>Month-2</th>
        <th>Savings-2</th>
    </tr>
    <tr>
        <td>January</td>
        <td>0</td>
    </tr>
    <tr>
        <td>February</td>
        <td>0</td>
    </tr>
    <tr>
        <td>March</td>
        <td>0</td>
    </tr>
    <tr>
        <td>April</td>
        <td>0</td>
    </tr>
    <tr>
        <td>May</td>
        <td>0</td>
    </tr>
    <tr>
        <td>June</td>
        <td>0</td>
    </tr>
    <tr>
        <td>July</td>
        <td>0</td>
    </tr>
    <tr>
        <td>August</td>
        <td>0</td>
    </tr>
    <tr>
        <td>Sep</td>
        <td>0</td>
    </tr>
    <tr>
        <td>Oct</td>
        <td>0</td>
    </tr>
    <tr>
        <td>Nov</td>
        <td>0</td>
    </tr>
</table>
<table class="two" id="R1">
    <tr>
        <th>Month-3</th>
        <th>Savings-3</th>
    </tr>
    <tr>
        <td>December</td>
        <td>0</td>
    </tr>
</table>

.inlineTable {
display: inline-block;
}
table.one {
width:45%;
display:inline-block;
vertical-align:top;
}
table.two {    
text-align:left;
}

Answer 1

看到这个fiddle

我稍微更改了您的表格顺序。另外，我添加了两个新的 div。请参阅下面的HTML

<div class="left">
    <table class="one">
        <tr>
            <th>Month-1</th>
            <th>Savings-1</th>
        </tr>
        <tr>
            <td>January</td>
            <td>0</td>
        </tr>
    </table>
    <table class="two">
        <tr>
            <th>Month-3</th>
            <th>Savings-3</th>
        </tr>
        <tr>
            <td>December</td>
            <td>0</td>
        </tr>
    </table>
</div>
<div class="right">
    <table class="one">
        <tr>
            <th>Month-2</th>
            <th>Savings-2</th>
        </tr>
        <tr>
            <td>January</td>
            <td>0</td>
        </tr>
        <tr>
            <td>February</td>
            <td>0</td>
        </tr>
        <tr>
            <td>March</td>
            <td>0</td>
        </tr>
        <tr>
            <td>April</td>
            <td>0</td>
        </tr>
        <tr>
            <td>May</td>
            <td>0</td>
        </tr>
        <tr>
            <td>June</td>
            <td>0</td>
        </tr>
        <tr>
            <td>July</td>
            <td>0</td>
        </tr>
        <tr>
            <td>August</td>
            <td>0</td>
        </tr>
        <tr>
            <td>Sep</td>
            <td>0</td>
        </tr>
        <tr>
            <td>Oct</td>
            <td>0</td>
        </tr>
        <tr>
            <td>Nov</td>
            <td>0</td>
        </tr>
    </table>
</div>

并且，还添加了下面给出的 CSS

.left,.right{
    float:left;
    width:50%;
}

Answer 2

我不是花车的忠实粉丝，但它们在这里工作，除了 class 值外，您的标记没有任何变化。你甚至可以通过使用 :first-child 选择器来完成同样的事情。

.inlineTable {
  display: inline-block;
}
table {
  width: 45%;
  vertical-align: top;
  background: #ddd;
  margin-bottom: 10px;
}
table.left {
  float: left;
}
table.right {
  float: right;
}

<table class="left">
  <tr>
    <th>Month-1</th>
    <th>Savings-1</th>
  </tr>
  <tr>
    <td>January</td>
    <td>0</td>
  </tr>
</table>
<table class="right">
  <tr>
    <th>Month-2</th>
    <th>Savings-2</th>
  </tr>
  <tr>
    <td>January</td>
    <td>0</td>
  </tr>
  <tr>
    <td>February</td>
    <td>0</td>
  </tr>
  <tr>
    <td>March</td>
    <td>0</td>
  </tr>
  <tr>
    <td>April</td>
    <td>0</td>
  </tr>
  <tr>
    <td>May</td>
    <td>0</td>
  </tr>
  <tr>
    <td>June</td>
    <td>0</td>
  </tr>
  <tr>
    <td>July</td>
    <td>0</td>
  </tr>
  <tr>
    <td>August</td>
    <td>0</td>
  </tr>
  <tr>
    <td>Sep</td>
    <td>0</td>
  </tr>
  <tr>
    <td>Oct</td>
    <td>0</td>
  </tr>
  <tr>
    <td>Nov</td>
    <td>0</td>
  </tr>
</table>
<table class="left">
  <tr>
    <th>Month-3</th>
    <th>Savings-3</th>
  </tr>
  <tr>
    <td>December</td>
    <td>0</td>
  </tr>
</table>

Demo

HTML 中的表格对齐方式

Alignment of tables in HTML

html

css

html-table

vertical-alignment

看到这个fiddle