How Do I Convert My HTML Tables to CSS?

I’m trying to finish a new website. However, I’ve run into roadblock
with CSS. I know that I need to change my header and footer tables
to CSS to improve load time and SEO. But I’m a rookie programmer
as you’ll see...

If you’ll open my View Source at: www.ComparingVitamins.com,
you’ll see 6 main tables, 2 in the header, and 4 in the footer.

Header:
1. Header image is actually 9 images instead of one.
(Is this OK to solve the size adjustment problem?)
2. Horizontal links menu

Footer:
1. Affiliate links
2. Horizontal links menu
3. Payment and shipping images
4. Social media images

Here are my questions…
1. Should I combine the 2 header tables into one table?
2. Should I combine the 4 footer tables into one table?
3. In the header, should I put the red font “Save 20-79%...” into a table?
4. In the footer, should I put the Legal Disclaimer and Copyright into a table(s)?
5. MOST importantly, how do I transform the html code into CSS?

Thank you for your help,

Greg

 

Create a set of classes that look like this

.maintable {position: relative; width: 600px; height: 60px;}
.cell_1_1 {position: absolute; left: 0px; top: 0px; width: 300px; height: 20px;}
.cell_1_2 {position: absolute; left: 300px; top: 0px; width: 300px; height: 20px;}
.cell_2_1 {position: absolute; left: 0px; top: 20px; width: 300px; height: 20px;}
.cell_2_2 {position: absolute; left: 300px; top: 20px; width: 300px; height: 20px;}

Code (markup):

Then when you want to put your table in you can use code like

<div class="maintable">
 <div class="cell_1_1"> blah balh blah balh anything you want in that cell </div>
 <div class="cell_1_2"> blah blah blah anything you want in that cell</div>

Code (markup):

though really you should start thinking outside of the "putting stuff in tables" box now that we can position things wherever we want (and have been able to for a good five years )

If you search "convert tables to CSS" on google, there are probably tons of walkthroughs, and prob a freeware program or two

If you are really optimizing for SEO, best to use an external stylesheet

 

llamataboot,

Thank you very much for taking the time to reply. I actually searched and read about
"convert tables to css" and "css generators" before I posted my questions. But the code looked so confusing, I was thinking of giving up and hiring a programmer. However, your code looks easy enough that I may give it a try.

In the meantime I deleted a lot of redundant programming in my tables by reducing them from several cells to 1 or 2 cells. So do I still need to convert them to CSS for load time and SEO?

Also what do you think of my header image(S) which is 9 images instead of one? Is this a good idea to solve screen resolution resizing problems?

Thanks again,

Greg

 

You can have a look as well at Flexi CSS Layouts - a Dreamweaver Extension that help you create Css layouts in Dreaweaver without coding.

This might get things easier to replicate in CSS from tables.