Migrating From Tables To CSS

[Justagreenhorn]

My website is an old fashioned one which is heavily foundationed with tables and frames.

It certainly looks outdated and (perhaps 'endangered' too).

What is the best way to go about converting it to CSS without pain?

Thanks in advance for the help.

[TechnMist]

Well the first thing to realise is that it is all boxes, so identify the content and keep it as an element.

There is nothing wrong intrinsically with a table, the reason they got a bad rap, was the levels of embedding. A minimal table is:

<table
><tbody
><tr
><td
>Information</td></tr></tbody></table>

which is 4 deep, now if you embed a table in a table then you get 8 deep etc.

That can affect the render of the page, and of course there is a slight extra load with html (but it is minimal).

Still tables for tabular information is good, and still tables for page layout is ok, but over use is not wise.

It is probably better to accept that what you are doing is a site upgrade and a redesign perhaps, rather than just take a get rid of tables and replace with divs approach (that battle was long ago).

[ScriptMan]

There is an old saying, no pain no gain. But I assure you it is worth the effort. With CSS you can do everything that you can do with tables.

As mentioned above tables are fine for tabular data. They should not be used for layout.

Is this a scripted site? That makes it a bit more of a challenge sinces the tr and td can be strung over several diffrent scripts.

It is best to take it a step at a time working offline. Starting with a stylesheet that defines your layout, fonts and colors.

[Hades]

Originally Posted by Justagreenhorn

My website is an old fashioned one which is heavily foundationed with tables and frames.

It certainly looks outdated and (perhaps 'endangered' too).

What is the best way to go about converting it to CSS without pain?

Thanks in advance for the help.

I think the less painful way to do it is:

1. Learn the basics of CSS, and CSS positioning. Nothing too advanced, just to know what you can accomplish and how the code should look like. Don't try to code the whole thing from scratch if it's your first time.
   
2. Pick a predefined layout that more or less looks like your website from a CSS gallery like this one: http://blog.html.it/layoutgala/ (there are more, just google "CSS layouts").
   
3. Download the layout, fill it with your website's content and apply CSS from what you've learned to accomplish what you had before.

And of course, if you have questions feel free to ask here

[Justagreenhorn]

Thanks for all the guidance.

My main problem is with the frames and the js script includes.

My site consists of 2 left-side frames, 2 content-window frames and 2 right-side frames.

Within each frame, I have a couple of javascript includes, thus there are many such includes in all. These are working fine on my present site's tables&frames format.

I sure don't know which is a good starting point to proceed with. Hope to do it in stages, though.

[Hades]

I could be wrong and maybe somebody has a better approach, but I'd say forget the scripts for now, get the layout right, even if it only has dummy content. Once you have the layout, put the static content, and last the JS and PHP scripts, one by one.

The problem with this approach is the fact that you won't be able to do a transition from your current website to the new one, set up a local instance for testing since it will be impossible to upload your files to the server and see the results until the job is completed.

You may also want to consider hiring a coder to help you or teach you, if you need to get it done urgently.

[ScriptMan]

Is it really frames? Or is that just the way it appears?

JS and php scripts run just fine inside a div. No real difference between a div and a table cell when it comes to those.

Here in the coding forum it is okay to post a link if you want to do so. You can make it a non-live link by omitting the www, as in this example mysite.com.

I won't speak for Hades though I doubt he would mind, but it is also fine for you to PM the link to me if you prefer not to post it.

[Hades]

Yeah, post the link to your site, that way we can estimate the effort it will take to convert it to html/css

[Justagreenhorn]

SingaporeGallery.com: Snapshots Of Beautiful Singapore

[ScriptMan]

Yep. That is frames. You explained it correctly. Haven't bumped into that syle much lately.

At least all the stuff is pre-sorted for you. Using PHP you could follow the same general outline with a 3 column design. And if you want to keep the right column as two seperate areas it could have an upper and lower div. I would make the center section the main page and include the side panel content from a seperate file.

The search engines see that as at least 4 different pages right now. Once you get it all on one page using includes they will see it as one big page.

I only viewed a couple of pages. How many pages do you have or is the content in a database?

[Justagreenhorn]

Thanks for the tip.

As a matter of fact, I had converted my PHP site to the present one because of the SEO problem, frames being my latest implementation as I initially found it very good, especially the very 'nice' way it works with javascript.

For those interested in this aspect of CSS, this is a useful site I found:-

CSS With Frames: Templates

Nice article i really like it, and it has some meaning also. Nice one

Good tips u have given for the standing for a competition and i really like it.

I also like it and its a good Optimization and i really like it.

Anyone has any suggestions on how best to convert this site to CSS format?

Site URL: SingaporeGallery.com

Where to start?

Thanks in advance.