10 December 2008

Using Div to generate Table Like Structure

"The Div tag defines a division or a section in an HTML document. The Div tag is often used to group block-elements to format them with styles"- offical defination by W3Schools.
If you are new to using div elements then the very first problem that you might face is generating the table,tr,td structure using only div's (since you were so hooked up on the old Table structure). But the fact is that using div's you can (and will) save lot of HTML coding (after learning few simple tricks), plus the div elements are also very very flexible.
Here's a basic code snippet to get you started with...

<style type="text/css">

.tablediv {
display: table;
border:1px solid #666666;
border-spacing:5px;/*cellspacing:poor IE support for this*/
border-collapse:separate;
}

.rowdiv {
display: table-row;
width:auto;
}

.celldiv {
float:left; /*fix for IE since display:inline doesn't work */
display: table-cell;

}

</style>

/* Style can be used in HTML as follows:*/

<body>

<div class="tablediv" style="width:500px;">
<div class="rowdiv" style="width:100%;">
<div class="celldiv" style="width="50%;"> one cell/td in a table</div>
<div class="celldiv" style="width="50%;"> one cell/td in a table</div>
</div>
</div>

</body>

No comments: