CODEWITHSUNDEEP
htmlcsslayout
Mahdi_Nine
Mahdi_Nine

Reputation: 14751

problem with showing tables in html

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

The layout I need

Link to the layout image

But I don't know how. Please help me.

Upvotes: 2

Views: 108

Answers (3)

Aeonius
Aeonius

Reputation: 1073

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

Upvotes: 1

kapa
kapa

Reputation: 78671

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.

Upvotes: 4

Kasturi
Kasturi

Reputation: 3333

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

Upvotes: -2

Related Questions