Monday, April 11, 2011

Div as Table

There are many reason to use div instead of Table:

  • Tables are very slow when browsers load your pages.

  • Div tags are more likely for SEO.

Download Source: div-as-table  or view demo here




You can design a table based on CSS and DIV element if you apply this rule:

Sum of widths  for DIV tages taken as Column must be less than the width of div taken as Row.

CSS Code:


.divTable
{
width: 100%;
display:block;
padding-top:10px;
padding-bottom:10px;
padding-right:10px;
padding-left:10px;
}
.divRow
{
width: 99%;
display:block;
padding-bottom:5px;
}
.divColumn
{
float: left;
width: 24%;
display:block;
}

HTML Code:

<div class="divTable">
<div class="divRow">
<div class="divColumn">Welcome To mxTutorial.com</div>
<div class="divColumn">Welcome To mxTutorial.com</div>
<div class="divColumn">Welcome To mxTutorial.com</div>
<div class="divColumn">Welcome To mxTutorial.com</div>
</div>
<div class="divRow">
<div class="divColumn">Welcome To mxTutorial.com</div>
<div class="divColumn">Welcome To mxTutorial.com</div>
<div class="divColumn">Welcome To mxTutorial.com</div>
<div class="divColumn">Welcome To mxTutorial.com</div>
</div>
</div>