CODEWITHSUNDEEP
htmlhtml-table
MadsterMaddness
MadsterMaddness

Reputation: 735

HTML How to create a group of boxes using table?

<table style="width:100%; height:50%; border: 1px solid black;border-collapse: collapse;padding: 5px; text-align: center;" rules="all">
  <tr>
    <td colspan="4" rowspan="2">1</td>
    <td colspan="2" rowspan="2">2</td>


  </tr>
<tr>
    <td colspan="2" rowspan="2">3</td>
    <td colspan="4" rowspan="2">4</td>
</tr>
</table>

I would like to create a table with 2 rectangles and 2 squares, where the height (row span) is always 2 and the first and the last rectangle have a width of 4.

What I want my table to look like:

enter image description here

I am completely stuck!!! My current table draws 4 columns of squares?! Can someone please explain this to me? I feel like such a noob!

Thank you in advance! Please let me know if you have questions, or if I need to explain anything! :)

Upvotes: 0

Views: 7867

Answers (3)

dsuess
dsuess

Reputation: 5347

Nowadays tables are used to code, what tables in general are made for: represent information with consistent columns or row to group data.

If it's just for layout, consider to use containers with css instead:

div {
  border: 1px solid gray;
  float: left;
  height: 2em; /*2 em = 2x font-size*/
}
div.big {
  width: 66%;
}
div.small {
  width: 33%
}
/* make flip to next line if sums to 100% so leave 1%*/
<div class="big">a</div>
<div class="small">b</div>

<div class="small">c</div>
<div class="big">d</div>

Upvotes: 1

Arber Braja
Arber Braja

Reputation: 445

Is this what you require?

As you might see from my code below, i have used divs instead of tables. Tables arent created for layouts, thats why i havent used tables and prefered to use divs.

http://cssdeck.com/labs/full/vyrs7f0l

* { box-sizing: border-box; }
p { margin: 0; padding: 0; padding: 10px; }

#container {
  width: 500px;
  height: 500px;
  margin: 0 auto;
  padding: 20px;
}

#container .box {
  display: inline-block;;
  /* position: relative; */
  border: 1px solid black;
  height: 50%;
  margin: 2px 0;
}

#container .box1 {
  width: 66%;  
}

#container .box2 {
  width: 33%;
}

#container .box3 {
  width: 33%;
}

#container .box4 {
  width: 66%;
}
<div id="container">
   
  <div class="box box1">
    <p>Box 1</p>
  </div>
  
  <div class="box box2">
     <p>Box 2</p>
  </div>
  
  <div class="box box3">
     <p>Box 3</p>
  </div>
  
  <div class="box box4">
     <p>Box 4</p>
  </div>
  
</div>

Upvotes: 0

Alessandro Marchisio
Alessandro Marchisio

Reputation: 545

<table style="width:500px; height:250px; border: 1px solid black;border-collapse: collapse;padding: 5px; text-align: center;" rules="all">
  <tr>
    <td colspan="2" >1</td>
    <td colspan="1" style="width: 33%;height:50%" >2</td>


  </tr>
<tr>
    <td colspan="1" style="width: 33%">3</td>
    <td colspan="2" >4</td>
</tr>
</table>

Upvotes: 2

Related Questions