problem with showing tables in html

I want to show 2 tables in html first at center and second at right like this pic.

Link to the layout image

But I don't know how. Please he开发者_开发问答lp me.

You could use floats for a nice CSS solution:

#container { overflow: hidden; }
#table1 { float: left; width: 60%; }
#table2 { float: right; width: 39%; }

Given this HTML:

<div id="container">
    <table id="table1">...</table>
    <table id="table2">...</table>
</div>

jsFiddle Demo

Set widths according to your taste.

The overflow: hidden is needed because otherwise #container would collapse because by default floats are not taken into account when calculating parent's height.

Or in a div framework...

html

<div id="container">
  <div id="left">
    <table>
//left table
    </table>
  </div>
  <div id="right">
   <table>
//right table
   </table>
  </div>
</div>

css

#container{
top:0px;
left:0px;
height:100%;
width:100%;
position:absolute;
}
#left {
top:0px;
left:0px;
height:100%;
width:60%;
position:absolute;
}
#right{
top:0px;
left:60%;
height:100%;
width:40%;
position:absolute;
}

<table width="100%">

<tr><td width="33%"></td></tr>
<tr><td width="33%"> First table goes here </td></tr>
<tr><td width="33%"> Second table goes here</td></tr>

</table>