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>
DOMINIK SYMONOWICZ's blogs - FOREVER HUNGRY of knowledge, sarcasm, smiling, music, dancing, and food ...lots of food. This IT blog is a collection of notes with a simple solution with an explanation, added documentation, sarcastic comment and weird example. I also write about a lesson learnt from my mistakes. A non-it blog can be found here: Dominik Symonowicz's non-IT blog and website
No comments:
Post a Comment