Nusha
Nusha

Reputation: 262

html table structure

I'm very new to html, and I'm trying to do this:

Is it possible to build a table as follow: say on size 500X500px. with a center square size 200X200. and 4 rectangles around this square (2 will be 200X300, the others300X200 )? I tried to do so but I'm not sure its even possible.

Upvotes: 1

Views: 662

Answers (3)

Roko C. Buljan
Roko C. Buljan

Reputation: 206595

I'd suggest you to use DIVs:

jsBin demo

HTML:

<div id="wrapper">
  
  <div class="box box_vert">1</div>
  <div class="box box_horiz">2</div>
     
  <div class="box center">c</div> 
  
  <div class="box box_vert" style="float:right;">3</div>
  <div class="box box_horiz">4</div> 
  
</div>

CSS:

  #wrapper{
    width:600px;
    height:600px;
    position:relative;
    margin:50px auto;
    background:black;
  }
  .box{
    position:relative;
    float:left;
    width: 200px;
    height:200px;
  }
  .box_horiz{
    width:400px;
  }
  .box_vert{
    height:400px;
  }

Upvotes: 1

DA.
DA.

Reputation: 40697

Is this what you are looking for?

  <table border="1">
    <tr>
      <td colspan="2" height="150px;"></td>
      <td rowspan="2" width="150px;"></td>
    </tr>
    <tr>
      <td rowspan="2" width="150px;"></td>
      <td width="200px;" height="200px"></td>
    </tr>   
    <tr>
      <td colspan="2"   height="150px;"></td>
    </tr>   
  </table>

http://jsbin.com/inahaz

Upvotes: 3

user1370510
user1370510

Reputation: 120

try this one write below code in between style tags table{width:400px;height:400px;} td{width:200px;height:200px;}

Upvotes: 0

Related Questions