CODEWITHSUNDEEP
htmlcsscss-tables
TheBoubou
TheBoubou

Reputation: 19933

Generate "table" with <div>

I'd like generate the representation below by <div>. The constraints :

PS : no debate table vs div ;-)

alt text

Upvotes: 3

Views: 1440

Answers (3)

Andrew Vit
Andrew Vit

Reputation: 19249

Here is my proposed markup:

<div class="row">
  <div class="col half">
    <div class="col narrow">(1)</div>
    <div class="col remainder">(2)</div>
  </div>
  <div class="col remainder">
    <div class="col narrow">(1)</div>
    <div class="col remainder">(2)</div>
  </div>
</div>
<div class="row">
  <div class="col half">(3)</div>
  <div class="col remainder">(3)</div>
</div>
<div class="row">
  (4)
</div>​

And styles:

/* structure */
.row { clear: both; overflow: hidden; }
.col { float: left; }
.half { width: 50%; }
.narrow { width: 30%; }
.remainder { float: none !important; overflow: hidden; }

/* skin: just for demo */
.row { text-align: center; border-bottom: 1px solid #999; }
.half { background: #fcc; }
.narrow { background: #ccf; }
.remainder { background: #cfc; }

The first two rows are split into half. In each half are two cells: the first is called narrow and is floated. I put 30% on the width for this one just for the demo (note: that's 30% of the half of the row). The other column is called remainder and is not floated. It uses overflow to set its own rendering context, which means it fills the block to the right of the floated column.

You can have more floated columns (left or right), but only one remainder.

I put it up on jsfiddle: play with it.

Upvotes: 2

Kenny Cason
Kenny Cason

Reputation: 12328

Sorry for the misread, my previous Answer was using TABLE when you wanted to use DIV. Also, note that if you want to use Borders, you have to offset the width percentage. (The other answer on this page may not display properly) 

<style type="text/css">
.wrapper { width:100%; background-color:#ddd; text-align:center; float:left;}
.quarter-row { width:25%; background-color:#bbb; float:left;  }
.half-row { width:50%; background-color:#999; float:left; }
.full-row { width:100%; background-color:#777; float:left; }
</style>

<div class="wrapper">
  <div class="quarter-row">1</div><div class="quarter-row">2</div><div class="quarter-row">3</div><div class="quarter-row">4</div>
  <div class="half-row">1 (50% width)</div><div class="half-row">2 (50% width)</div>
  <div class="full-row" >1 (100% width)</div>
</div>

Upvotes: 0

kcunning
kcunning

Reputation: 297

Here, try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
    <style type="text/css">
    div.row { width: 99.9%; border: 1px solid black; height: 1em;}
    div.cell2 {border: 1px solid black; height: 1em; width: 49.9%; float: left;}
    div.cell4 {border: 1px solid black; height: 1em; width: 24.9%; float: left;}
    </style>
</head>
<body>
    <div class = "row">
    </div>
    <div class = "row">
    </div>
    <div class = "cell2"></div><div class = "cell2"></div>
    <div class = "cell4"></div><div class = "cell4"></div>  <div class = "cell4"></div><div class = "cell4"></div>

</body>
</html>

The style is in the header, but it really should be in its own CSS file.

Upvotes: 0

Related Questions