Aloha guys!
Today I wanted to talk about tableless design, have to admit it was a rather rough change for me and one of the steps my therapist suggested was to talk about it (lol!)
So, maybe you remember a couple of years ago (when internet was still a little less than 80% porn) that everything was done using tables, oh those were the days... but the real reason why everything was done with tables is because there was not another powerful enough alternative, so even when the almighty W3 said "Tables for layout is wrong..." there was not another way to accomplish the visual effects that we wanted. But hey! times change and internet browsers developers started listening to the W3 and for a couple of years now the html dom standard does offer all the ways needed to make an outstanding web page/site without using tables for the layout.
"But hey Mickey, it works fine with tables why make it more complicated?" The real thing is that it doesnt have to be more complicated, and once you learn the how-to you'll understand that tables are not a presentation tool... except for tables ;)
So lets see if it really is that much better, lets make a 3 columns page without using tables!
First the html:
<html> <head> <title> Tableless layout </title> <style type="text/css"> @import "mystyle.css"; </style> </head> <body> <div id="mainDiv"> <div id="divLeft" class="left-div"> Here some links </div> <div id="divCenter" class="center-div"> Here goes the content </div> <div id="divRight" class="right-div"> Here some advertisements </div> </div> </body> </html>
As you can see this is a pretty simple html page, but the point is demonstrated here easy enough, there is a div as a big container, it contains all the elements in the page, I put it here just to make it look a little nicer.
Then we have 3 divs, nothing too important there just simple divs with an id, we will now use CSS to position and format those divs, as its recommended by the W3:
#mainDiv
{
background-color: #ec4b4b;
height: 500px;
}
#divCenter
{
position: absolute;
top: 50px;
width: 500px;
background-color: #4bec4f;
text-align: center;
height: 200px;
margin-left: 28%;
}
#divLeft
{
position:absolute;
left: 50px;
top: 50px;
width: 250px;
height: 200px;
background-color: #4b80ec;
margin: 0;
text-align: center;
}
#divRight
{
margin: 0;
position:absolute;
right: 50px;
top: 50px;
height: 200px;
background-color: #ecdf4b;
width: 25%;
text-align: center;
}There are several properties in that css, but the important ones are the width, which can be set as a percentage or as a fixed number of px or with another measure unit called em, although its mostly used in the W3 for font sizing. Another important property is the position which when set to absolute allows us to position its element in any part of the window and thats what we use here. Then we only need to set the margins for the elements and thats it! we have a nice looking page like the one shown here:
There are other ways to achieve this, Ive tried them and at least in firefox some didnt work, this is the first one that I found first to work fine and comply with the W3 css standards, feel free to try it here
So, hope you liked this post and to all the developers that will be working around version 2, hope it helps you either refresh your knowledge or get more acquainted with the how-to
See you around!
