What? No tables, Why?

I remember the day I discovered the slicing tool in Photoshop. I swear I had found a gold mind. I would design my web layout in Photoshop than use the slice tool to prepare a table for my layout. It would then automatically export the sliced images and create a table based html file.
Little did I know although this was making my life easier, it was making a lot of others lives harder!

Tables were never meant for layouts, plain and simple. They were designed for plain old table data, not complex web site layouts. Has anyone ever realised tables can only render once its entire content has loaded? If you hadn't its probably because you have gotten use to unnecessary waiting. Go try it, make sure your cache is empty and hit Yahoo. Notice the bottom half of the site loaded in one big chunk instead of rendering top to bottom. At least Yahoo have dealt with this issue and placed the most important part (the search box) in its own table so it loads faster. Bit of a strange way of doing things if you ask me.

One of the main reasons I switched from tables was the issues with updating my site. Dreamweaver never displayed tables correctly for me and trying to find a certain nested table while in code-mode was harder to find than a talented pop-singer!

And lastly, one of the most major factors of reasons why I don't use tables is, complex table designs use far to much bandwidth and make your code unnecessary detailed.

Lets have a look at these two methods in action.

Firstly here is a simple table layout. It consists of a container table, left table,right table.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="60%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td></td>
<td></td>
</tr>
</table></td>
</tr>
</table>
Now here is the the sample layout while using XHTML & CSS.

XHTML:

<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>

CSS:

#container {
padding: 0;
width: 100%;
margin-left: auto;
margin-right: auto;
}

#left {
float: left;
}

#right {
float: right;
}

By using CSS we can now control each div individually with its own elements and use them throughout the entire site without any worry of redundancy.

You don't have to worry to much about the code if your feeling a tad bit lost. I just added it to show you the "behind the scenes" look instead of just talking about it. Next we can jump in to how we go about setting up the code I just created.