Tables within Floated Divs

Wondering how to make a table layout in CSS within a floated div.

[mhutch]

Hey everyone,

How would I make a table layout in CSS within an already floated div? I want it to look like the following:

--------
¦ 1 ¦ 2 ¦
--------
¦ 3 ¦ 4 ¦
--------
¦ 5 ¦ 6 ¦
--------

Thanks a bunch.

- mhutch

[Harvs]

Here is a simple example of how it can be done:

CSS:

#container{float:left; background:blue; width:204px;}
.table_cell{float:left; width:100px; height:100px; background:red; border:1px solid black;}

HTML:

<div id="container">
<div class="table_cell"></div>
<div class="table_cell"></div>
<div class="table_cell"></div>
<div class="table_cell"></div>
<div class="table_cell"></div>
<div class="table_cell"></div>
</div>

I have used fixed widths here just to keep things simple.

There may be a difference in displaying between IE and other browsers due to IE getting the box model wrong. But if you don't use borders or padding there is no need to worry