Pixel2Life

Tables to Valid XHTML/CSS
Welcome to my 2nd tutorial. In this one I will be teaching you how to take your current website/layout created with tables, tear it apart, and put it back together using valid XHTML and CSS.
In this tutorial I will be using an example template to teach you, however you can take the principles I teach here and apply them to your own creations.

What You Should Know:
I assume you have a good grasp on how to create a Table-Based layout.
I assume you are fairly confident in your CSS skills.

Well then, let’s get to it.
For this tutorial I have used a template from Zymic.com from which to work from. You can find the original here.
Xerox from Zymic.com is the one who created the original template.

I've edited it down a bit for simplicity, you can get the example we'll be working with throughout this tutorial here.
What we'll do today is tear apart the layout and rebuild it using valid XHTML and Div's

Here’s a bit of an overview of what we’re about to do:
a: Replace all tables with div’s
b: Remove any broken, or old invalid code.
c: Edit remaining code so it fits XHTML transitional standards.
d: Write a CSS file to style the new layout.