I know that using <div> tags is the "smart" way to code and serve as a replacement in some capacity, to using tables. I'm ready to now experiment with converting some of my sites' pages over to using them.

Has anyone seen any pages out there that walk the novice coder through converting a complex table (2, 3, or more tables embedded), into <div>'s?

Specifically, I want to know how to properly set alignment and how width is affected when using CSS widths. Is it safe to assume that <div>'s are more universally compatible than tables?

Many thanks!

That's a little difficult to answer; have you ever tried CSS before or is this a whole new ballgame to you? Depending on your level of experience, we can guide you several ways.

Yeah I'm ramping up my CSS rapidly but can't yet say I'm an expert at it. I know how to set background images, set widths/height, and some of the other properties, and reference them in the code.

Half of the issue is that all of my sites are done using DotNetNuke which is table based. So I'll probably never be able to completely crawl out from under the <table> rock, but I'd like to give it a shot.

Re-working a tabled layout to CSS is about the hardest thing there is to do, believe me, I've done it many times and it's a royal PITA.

In converting a 5000+page site from tables to CSS, I found the best way was to set up the new layout in CSS FIRST, then just copy the content from the old pages into the new CSS layout. It'll save you a LOT of hair-pulling if you attack it that way.

I would recommend this book, it's VERY good:
http://www.sitepoint.com/books/css2/

Don't do that. It's changing from horse to donkey. DIVs the the worst way to make a layout because they aren't really compatible with web browsers. So, if you want to have a web site compatible for all browsers, user definitions and operating systems use tables.

If you really want a web site to look identical on all browsers, you wouldn't use html at all; it would just be a bunch of tiff files and no rendering involved. Nobody does this, for obvious reasons. We allow a little bit of flexibility in exchange for a great deal of benefits. Your web site has a target audience ( I'm a photographer - I don't expect many blind visitors ) and, well, for a lot of us, our target uses a modern browser. Or so we'd hope.

LadynRed's advice about pulling up the old site, and copying and pasting the content, is probably the easiest way to go about it on a large scale.

Here are some sites that I have been referring to:
http://css-discuss.incutio.com/?page=ThreeColumnLayouts
http://www.alistapart.com/articles/multicolumnlayouts
http://www.intensivstation.ch/en/

DIVs the the worst way to make a layout because they aren't really compatible with web browsers.

Your source for this fact?

In this case I agree with lady'n red!

You better start from scratch - new one and copy the content.

BTW...there is one advice that I learned from Eric Meyer (CSS Guru):

look at Your page, I presume - table layout . Give a red border to Your tables and You'll see a bunch of red squares (tables). Divide Your page into logical divisions and start to code.

But I repeat. Start from scratch.

And of course, very interesting fact about DIV's from root. ha-ha-ha...He must be joker!

DIVs the the worst way to make a layout because they aren't really compatible with web browsers.

Root, you truly have NO CLUE what you're talking about. ALL browsers render divs and there are NO compatibility issues whatsoever.

Bottom line - tables for layout are OUT, they are the PAST. If you want to be a modern web designer/web master, you do NOT use tables for layout, only for tabular data they way they were meant to be used.

So, why the biggest companys in the world use tables in their website layouts? See google for example...

When you play with DIVs you are in trouble.

So, why the biggest companys in the world use tables in their website layouts?

Mostly because they are using content management systems that still spew table-based layouts. It's NOT because of compatibility issues with divs, that's absurd. Your 'logic' is flawed if you think divs are bad because Google uses tables.

Your attitude is that of a person who refuses to update and learn new methods - like the guy who refused to give up his horse after the automobile came along

its good that you want to switch, but you also have understand that you can make the same junk code using divs as you can with tables. so before you just start making divs right and left, youve got understand the reason why you are switching, and the fundamental principles of "web standards".

good luck.

Originally Posted by siddiqui05

.... youve got understand the reason why you are switching, and the fundamental principles of "web standards".

good luck.

The one among the many reasons is: cleaner code with modern approach to web design.

If You are in web design, then tables are OUT. Tables are for tabular data.

Well thanks everyone for the responses!

I didn't know this was such a contentious issue. Well I will certainly look at some of those tutorial links.

For me, tables have been an easy crutch to continue using because the content managment system I use is based on them. If I want to add new elements it's easier for me to just add another <tr> than learn how to implement <div>'s.

But I think the time has come because as others have said, it's the preferred method. Thanks again.

Originally Posted by root

So, why the biggest companys in the world use tables in their website layouts? See google for example...

http://www.microsoft.com/en/us/default.aspx - no tables
http://www.redhat.com/ - no tables
http://www.yahoo.com/ - the largest web portal, uses only 2 tables

Would you provide some help about how <div> is done in Front Page?
I mean inserting Div's , setting Div's properties...etc because I tried css with tables and it was really bad experience. I want to convert the way I'm working to Div's with css as a layout

Divs could be fine but when you start adding stuff they have much more
probability to fail. Html is not poetry. Code is *not* poetry. With tables you have much more control over you are coding and you get a much more robust solution that works fine in all systems and all browsers.

Some people are worried because their cms not uses divs/tables, so hack your cms or try to make your own. Get control over what you do. Personally, I don't accept immediate use solutions for a website. A website is a project that are in constant evolution. If you believe that DIVs are the best solution for you go ahead... But be careful, depression is more often present in people who use DIVs that in people who use tables. :P

But be careful, depression is more often present in people who use DIVs that in people who use tables.

Oh brother.........

@root. are you serious? its 2007. im not trying to start anything, but what im hearing is you have not tried css/xhtml so you are making 4 year old assumptions that you cannot do anything robust with it

http://www.cssmania.com
http://www.unmatchedstyle.com
http://www.styleboost.com
http://www.stylegala.com
http://www.w3csites.com
http://www.cssremix.com

and i could list about 40 more sites that will show you how robust you can get with css/xhtml if you know what you are doing.

and the headaches you are talking about only last at the intial stages of learning, once you figure it out, its simple as pie.

@houdini, if you need a good book to get started, check out web standards solutions by dan cederholm, and then css mastery by andy budd.