There is a lot of information out on the web already about how to use Cascading Style Sheets (CSS) along with HTML elements such as DIV, SPAN, UL, LI, etc. to achieve the same results that one gets with html tables. Tables are considered obsolete any more and SEO experts warn that using tables can decrease your page rank.

This is a simple tutorial for those who just want to know how to tackle a simple problem using CSS instead of tables. In this example, we will build a three column table using only CSS and DIV tags.

Here is the finished product:

Bellingham Web Design Shopping Cart Example

Here is the HTML code:

	<div class="container22">

<div class="spacer22">
  &nbsp;
</div>

<div class="float22pad">&nbsp;</div>
<div class="float22a">   Product</div>
<div class="float22b">	Qty</div>
<div class="float22c">	Price</div>

					<div class="float23pad">&nbsp;</div>
				<div class="float23a">	Original Website</div>

				<div class="float23b">	1</div>
				<div class="float23c">	$189.00</div>

					<div class="float23pad">&nbsp;</div>
				<div class="float23a">	Web Design Analysis</div>
				<div class="float23b">	1</div>

				<div class="float23c">	$20.00</div>

					<div class="float23pad">&nbsp;</div>
				<div class="float23a">	SEO Analysis</div>
				<div class="float23b">	1</div>
				<div class="float23c">	$20.00</div>

<div class="spacer22">
  &nbsp;
</div>

	</div>

Here is the CSS code:

div.container22 {
width: 280px;
border: 2px dashed #333;
background-color: #ffe;
}

div.spacer22 {
clear: both;
width: 100%
}

div.float22pad {
float: left;
padding-left: 0px;
padding-right: 0px;
width: 5%;
}
div.float22a {
float: left;
padding-left: 0px;
padding-right: 0px;
width: 55%;
}
div.float22b {
float: left;
padding-left: 0px;
padding-right: 0px;
width: 10%;
}
div.float22c {
float: left;
padding-left: 0px;
padding-right: 0px;
width: 30%;
}

div.float23pad {
float: left;
font-size: 9pt;
padding-left: 0px;
padding-right: 0px;
width: 5%;
}

div.float23a {
float: left;
font-size: 9pt;
padding-left: 0px;
padding-right: 0px;
width: 55%;
}
div.float23b {
float: left;
font-size: 8pt;
padding-left: 0px;
padding-right: 0px;
width: 10%;
}
div.float23 c{
float: left;
font-size: 8pt;
padding-left: 0px;
padding-right: 0px;
width: 30%;
}

I set the width for container22 to 280px but I could have set it to 100% or whatever width I wanted.   There are actually four columns but the first column is simply there to create a little padding for the other three columns.