8 March 2011

how to make table using div in xhtml with css without using table tag

Let's say that you have allergy on using table tag and his friends ( tr td and etc) , but you have secret mission to create a amazing table.
Question is ... what to do ?
Answer is ... use div and CSS.

Easy to say, harder to do.
Many beginners spent hours on using bad language  about "why div are so f... complicated ,even for simple table".
Don't panic.
It is quite simple
You need 2 files
one with html where you
one with css where you store

In html you need to remember that
When you create div they need to have attribute class like:
<div class="sideLeft">  ,
so then browser knows where find style which should be  applied  to your specified div

In css you need to remember that class should be written in this way:
div.sideLeft
so browser can find specific div and apply defined style

How to translate my table from  table world to div world ?

In CSS you need remember to put 3 things

in div which will behave as  table tag <table> in css  should contain:
display: table;

in div which will behave as tr tag <tr> in css should contain:
display: table-row;

in div which will behave as tr tag <td> in css should contain:
display: table-cell;

 How it looks in practice ?
Here is example of table 3 x 2
(style are include in html file, however is a bad practice!)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
div.page {
display: table;
width: 100%;
background-color: #004400;
}

div.leftSide {
display: table-cell;
}

div.middleSide {
display: table-cell;
background-color: #008800;
}

div.rightSide{
display: table-cell;
padding: 15px;
cellspacing: 5px;
text-align: right;
}
div.cell{
display: table-row;
font-family:"Verdana",Sans-serif;
font-size: 0.7em;
}
</style>
</head>
<body>
<div id="page">
<div align="left" id="leftSide" class="leftSide">
<div id="cell">
Cell 1
</div>
<div id="cell">
Cell 2
</div>
</div>

<div align="middle" id="middleSide" class="middleSide">
<div id="cell">
Cell 1
</div>
<div id="cell">
Cell 2
</div>
</div>

<div align="right" id="rightSide" class="rightSide">
<div id="cell">
Cell 1
</div>
<div id="cell">
Cell 2
</div>
</div>



</div>
</body>
</html>