Размещение трех таблиц на одной странице

Question

Я пытаюсь разместить три таблицы, две в одну строку и третью под первой таблицей. Как это:

table1 table2

Таблица3

, что я сделал это делает, но это не создает пространство между table1 и Table3.

фрагмент кода:

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

как я могу поместить таблицы в правильном порядке? спасибо

Answer 1

Во-первых, я хочу упомянуть, что вы используете CSS-файл для CSS, а не встроенный CSS (стиль и структура должны оставаться раздельными).

Вы можете сделать это путем добавления другой DIV Разногласия между таблицей 2 и 3:

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