Below is a table Structure created by using DIV Objects, you should keep in mind that W3C clearly stated that we should use table objects only for tabular data, my example here is not encouraging using DIV objects for tabular data, I just use tabular data example for clarification and simplicity.
Code:
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title>
<style type="text/css">
body
{
margin: 0px;
font-family:Verdana;
}
div.tableStart
{
width: 100%;
display: table;
}
div.tableRow
{
display: table-row;
}
div.tableCell
{
display: table-cell;
width: 20%;
}
div.tableHeader
{
display: table-cell;
width: 100%;
}
div.tableFooter
{
display: table-cell;
width: 100%;
}
/*IE Only code */
* html div.outTable
{
width: 100%;
display: block;
height: 100%;
border: 1px #f00 dotted;
}
* html div.tableRow
{
display: inline;
height: 100%;
}
* html div.tableCell
{
display: inline;
width: 20%;
float: left;
height: auto;
}
* html div.tableHeader
{
display: inline;
width: 100%;
float: left;
height: auto;
}
* html div.tableFooter
{
display: inline;
width: 100%;
float: left;
height: auto;
}
</style>
</head>
<body>
<div class="tableStart">
<div class="tableRow">
<div class="tableHeader" style="background-color:#9999FF">
<h2>Put Header Here</h2></div>
</div>
</div>
<div class="tableStart">
<div class="tableRow">
<div class="tableCell" style="background-color:#66CCFF;height:25px;">
<b>ID</b> div>
<div class="tableCell" style="background-color:#66CCFF;height:25px;">
<b>Fisrt Name</b></div>
<div class="tableCell" style="background-color:#66CCFF;height:25px;">
<b>Last Name</b>
</div>
<div class="tableCell" style="background-color:#66CCFF;height:25px;">
<b>Blog Address</b>
</div>
<div class="tableCell" style="background-color:#66CCFF;height:25px;"><b>Comments</b></div>
>div>
<div class="tableRow">
<div class="tableCell" style="background-color:#CCCCFF">
<h6>1</h6></div>
<div class="tableCell" style="background-color:#CCCCFF">
<h6>Asad Hafeez</h6></div>
<div class="tableCell" style="background-color:#CCCCFF">
<h6>Yousufi</h6>
</div>
<div class="tableCell" style="background-color:#CCCCFF">
<h6>http://asadyousufi.blogspot.com/</h6>
</div>
<div class="tableCell" style="background-color:#CCCCFF"><h6>This is a testing text, all div objects reflecting same hight and width,
This code is tested in IE 8.0 and FF 6.x</h6></div>
</div>
</div>
<div class="tableStart">
<div class="tableRow">
<div class="tableFooter" style="background-color:#66CCFF"><h2>Put Footer Here</h2></div>
</div>
</div>
</body>
</html>
Put Header Here
ID
Fisrt Name
Last Name
Blog Address
Comments
