Tuesday, February 23, 2010

Create Table Like Structure using DIV Objects


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
1
Asad Hafeez
Yousufi
http://asadyousufi.blogspot.com/
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

Put Footer Here

2 comments:

  1. Thanks a lot sir!! this is the only way that worked for me.
    -Neel

    ReplyDelete

Followers

Search This Blog