在一页中放置三个表

Question

我正在尝试放置三个 table，两个排成一行，第三个在第一个 table 下方。像这样：

table1 table2

table3

我所做的是这样做的，但它不会在 table1 和 table3 之间创建 space。

代码片段：

<div style="display: block;">
  <form name="" id="tableuser" method="post">
    <table class="one" style="float: left">
      TABLE1
    </table>
  </form>

 <form name="" id="tablegroup" method="post">
   <table class="two" style="float: right">
     TABLE2
   </table>
  </form>

<div style="display: block;">
 <table class="three" style="float: left">
   TABLE3
 </table>
</div>

如何才能将 table 的顺序排列正确？谢谢

Answer 1

首先，我想提一下，您应该为 CSS 使用 css 文件，而不是内联 CSS（样式和结构应保持分离）。

您可以通过在 table 2 和 3 之间添加另一个 div 来做到这一点：

<div style="clear:both;height:20px;"></div>

table {
    border:1px solid red;
}

<div style="display: block;">
    <form name="" id="tableuser" method="post">
        <table class="one" style="float: left"><tr><td>TABLE1</td></tr></table>
    </form>
    <form name="" id="tablegroup" method="post">
        <table class="two" style="float: right"><tr><td>TABLE2</td></tr></table>
    </form>
    <div style="clear:both;height:20px;"></div>
    <div style="display: block;">
        <table class="three" style="float: left"><tr><td>TABLE3</td></tr></table>
    </div>
</div>

在一页中放置三个表

Placing three tables in one page

html

css

html-table

css-tables