Tables are meant for tabular data. That's what they were initially created for. CSS allows for more extravogent layouts, and better positioning. CSS allows for more, and tables really restrict you. Plus, tables can get very dirty... and very jumbled.
A good CSS design can go a long way. Want some examples? Google for the CSS ZenGarden....you'll see some really nice examples...
Now, one thing to note: CSS does NOT replace HTML. CSS just removes the style from the HTML so that to change the look of the site, you edit one file. You still require HTML for the layout.
Some good tutorials are all over the web, and some good discussion on the pros and cons of CSS layouts. I'd suggest you start using CSS. You don't have to code a full site in it, but if you start playing around with it, you'll quickly realize the power of CSS.
<!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" xml:lang="en" lang="en" >
<head>
<title>CssCreator-->XHTML 1.0 Strict standard template </title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
<!--
#wrapper
{
width: 100%;
margin: 0;
padding: 0;
}
.row
{
width: 99%;
float: left;
height: auto;
margin: 5px 0;
padding: 0;
border: 1px solid #000;
}
.left
{
width: 100%;
background-color: #a4d3ee;
color: #000;
margin: 0;
padding: 0;
}
.sidebar
{
width: 140px;
margin: 2px;
padding: 0;
float: left;
border: 1px solid #000;
}
.right
{
margin-top: 0px;
margin-left: 160px; /* Change to width that you want left column to be */
float: right;
padding: 0;
}
.header
{
width: 100%;
height: 50px; /* Change to your height */
background-color: #ee4b4b; /* Change to your color */
color: #000;
padding: 2px 5px;
float: left;
margin: 0;
}
.content
{
width: 100%;
float: left;
background-color: #ccc; /* Change to your color */
height: auto;
padding: 5px;
margin: 0;
color: #000;
}
.clearer
{
height: 0px;
visibility: hidden;
clear: both;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div class="row">
<div class="left">
<div class="sidebar">Some content in the left hand column</div>
<div class="right">
<div class="header">This would be the header</div>
<div class="content">This is where the main meat of the content goes.<br /><br />
As you can see, it will expand as needed, and the left column will grow with it!!<br /><br /><br />
This just proves it.
</div>
</div>
</div>
</div>
<div class="row">
<div class="left">
<div class="sidebar">Some content in the left hand column</div>
<div class="right">
<div class="header">This would be the header</div>
<div class="content">This is where the main meat of the content goes.<br /><br />
As you can see, it will expand as needed, and the left column will grow with it!!<br /><br /><br />
This just proves it.
</div>
</div>
</div>
</div>
<div class="row">
<div class="left">
<div class="sidebar">Some content in the left hand column</div>
<div class="right">
<div class="header">This would be the header</div>
<div class="content">This is where the main meat of the content goes.<br /><br />
As you can see, it will expand as needed, and the left column will grow with it!!<br /><br /><br />
This just proves it.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
That gets you close, but it's not perfect, but it's something to work with....