在一页中放置三个表格答案

【问题标题】：Placing three tables in one page在一页中放置三个表格
【发布时间】：2016-02-17 14:15:54
【问题描述】：

我正在尝试放置三张桌子，两张在一行中，第三张在第一张桌子下方。像这样：

表1表2

表3

我做了什么，但它没有在 table1 和 table3 之间创建一个空间。

代码sn-p：

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

我怎样才能以正确的顺序放置表格？谢谢

【问题讨论】：

jsfiddle.net/g72o2s96

标签： html css html-table css-tables

【解决方案1】：

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

您可以通过在表 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>

【讨论】：