Tableless design
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:
Tableless positioning
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!
This is going to be great stuff! 
Yay! I love this stuff man… Let’s talk about background images next as I always get those questions from people.
Also, let’s expand on the 3 column tableless layout with a single column above and two columns below the 3 column row?
Another great tut would be rounded corners accepted by IE and Mozilla browsers.
[Reply]
Hey Club!
Glad to see you liked it!
For the new layout you want its actually fairly common, a few tweaks here and there and you can come up with:
[code="css"]
#mainDiv
{
background-color: #ec4b4b;
height: 500px;
}
#divCenter
{
position: absolute;
top: 10px;
width: 500px;
background-color: #4bec4f;
text-align: center;
height: 150px;
margin-left: 25%;
}
#divLeft
{
position:absolute;
left: 10px;
top: 200px;
width: 50%;
height: 200px;
background-color: #4b80ec;
text-align: center;
}
#divRight
{
position:absolute;
right: 10px;
top: 200px;
height: 200px;
background-color: #ecdf4b;
width: 50%;
text-align: center;
}
[/code]
Just play around with the margins and dimensions and you’ll get the hang of it quicker than you think
[Reply]
http://www.oswd.org/ has thousands of css layouts and the are all open source, good way to figure them out.
[Reply]
forgot to mention that with the @import the browsers are more likely to cache the external file
[Reply]
Another layout solution with header and footer is:
[code]
Tableless layout
#outer #inner, #main, #content, {zoom:1;}
Here goes the header
Here some links
Here some advertisements
Here goes the content
Here goes the footer
[/code]
[Reply]
Buba Reply:
November 3rd, 2008 at 11:08 pm
Tableless layout
#outer #inner, #main, #content, {zoom:1;}
Here goes the header
Here some links
Here some advertisements
Here goes the content
Here goes the footer
[Reply]
Hi,
So, why phpFox is all tables then?
Regards,
[Reply]
Raymond Benc Reply:
January 5th, 2009 at 2:30 am
phpFox was created during a time when tables were still in. With phpFox2 we are finally going to be updating our layout and since its being developed from the group up this allows us to bring our product up-to-date in many areas including a tableless design.
[Reply]
Hi,
Raymond
Always use Reset CSS from
http://meyerweb.com/eric/tools/css/reset/
The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.
Consider reading this article
http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/
Using CSS Tables
CSS tables solve all the problems encountered when using absolute positioning or floats to create multi-column layouts in modern browsers. Specifying the value table for the display property of an element allows you to display the element and its descendants as though they’re table elements.
My favorite http://ajaxian.com/ has very interesting post,
Posted by Ben Galbraith at 1:18 pm Tuesday, December 30th, 2008
Ajax Experience Videos: Performance and Security
Even Faster Web Sites with Steve Souders
In this session you learn: How to make your Web sites 25-50% faster; The impact of iframes on your Web site, including blank iframes; How inline scripts block rendering in the entire page and downloads; What you might be doing with stylesheets that make your pages twice as slow; The various techniques for dynamically loading JavaScript, and how they vary in how they affect the browser.
Advanced Web App Security with Joe Walker
The security landscape is changing dramatically from month to month. Unless you are aware of CSRF, Anti-DNS Pinning, Javascript highjacking, and the many ways to fool an XSS filter, it’s likely that your Web application is not secure. Attackers used to concentrate on ActiveX, but now Javascript, CSS and even simple HTML elements have are used against Web sites.
The 7 Habits for Exceptional Perf with Stoyan Stefanov and Nicole Sullivan
Improvements in Web site performance are similar to improvements in energy or fuel efficiency: We make great progress, yet we end up consuming more. Learn how to balance design and features with the need for speed. This session highlights Yahoo!’s latest research results and performance breakthroughs.
Have big hopes for v2
Regards
[Reply]