Question

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 help me.

Answer 1

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.