OK, I've decided to go tableless... now what?

[tombstoneweb]

Hi all,

I am beginning the process of redesigning one of my websites. I have read many threads on different aspects of tables vs css design and have decided to redesign my website using a tableless design. I have been designing static pages in tables for a while and have decided to jump out of the box and into the water (so to speak) but have no idea where to start. I have just started using css instead of the many depreciated tags I've been using for years and am starting to get a grasp on it.

I guess what I am looking for is a direction to go to educate myself in the things I will need to know to pull this off. I have an old page of mine that is only 5 pages long, so I figure that would be a good one to start on (I'll do the 40 page site when I know what I am doing). I am thinking the hardest part will be thinking outside the tables.

[Web-Design-Guy]

Well done for going tableless!

A good place to start might be taking a look at free templates, for example here:

http://www.opendesigns.org/

Maybe grab a couple you like, open then up and see how the design is achieved.

When I made the switch a few years ago - and to an extent still - there was lots of trial and error involved but it will be worth it in the end.

Good luck.

[tombstoneweb]

Well done for going tableless!
A good place to start might be taking a look at free templates, for example here:
http://www.opendesigns.org/
Maybe grab a couple you like, open then up and see how the design is achieved.

Thank you Web-Design-Guy, I will do that.
It looks like it'll be almost the same as when I first learned html. Find a website that does something you like, look at the code and try to figure out how it works.

Any other suggestions out there?

[danlefree]

Try A List Apart - you will have to venture back in time through the articles, however, ALA has been promoting (and explaining) best practices in table-free design for ages.

[tombstoneweb]

Try A List Apart - you will have to venture back in time through the articles, however, ALA has been promoting (and explaining) best practices in table-free design for ages.

Wow, there is a lot to wade through there. Thanks for the link. I'll be checking out the articles.

After looking that website over, I believe I will need to find some more "basic" information on tableless design. A lot of it seems far more advanced in css than I am at the moment.

[Fitz]

... I believe I will need to find some more "basic" information on tableless design. A lot of it seems far more advanced in css than I am at the moment.

OK, how about kicking off here:
CSS Introduction

or if that's too basic, wade through the (free) tutorial further (keep clicking next) until you arrive where your own knowledge tapers off. Haven't read it all but happened to come across this site today via another WPW thread and thought it looked very useful indeed - hope it helps you too!

[scotthai]

Hey Tombstoneweb,
The first step into the cold water can be hard since you are venturing outside of your comfort zone, (going from tables to div's and external css markup). This is a hard first step, and one that definately gets easier as you go. There are countless resources online for help with your css or semantic web markup. (Some have been mentioned above, but one of my favorite is the css zen garden, (css Zen Garden: The Beauty in CSS Design)) - in the Zen Garden you will find that all the underlying source code for the web page is the same, while the css that runs it creates some real powerful presentations.

Also, for books, the css zen garden is a book, I like Bullet Proof Web Design (v2 is now on the shelves), and sitepoint's css 101 can be very useful as well when learning how to design and develop website's of any nature.

Probably the best thing you can take from leaving tables and going to the new divs / css approach is that you can easily begin to work with Dhtml in your layouts and get a more rich web interface than you could have gotten with tables, plus it is easier (for me) to mark up the DOM at run-time with a more structured approach via XHtml / CSS.

I hope this helps and it is a very exciting territory of web you are getting yourself into so have fun, don't get frustrated, and stick with it and you can pick it up very fast.

Scott Haines
Newfront Creative
San Francisco Bay Area Website Design and Development

[chrisJumbo]

You might want to check out some blogs, as well. Wordpress blogs (except for customizations) depend on CSS. If you can think of your page in terms of blocks, that will help.

Sitepoint has a couple of good books, "Build Your Own Web Site The Right Way Using HTML & CSS" and "HTML Utopia: Designing Without Tables Using CSS, 2nd Edition". I believe the first book is more for beginners of HTML.

The <DIV> element tends to be used the most to control where the different blocks are placed.

[dlsweb]

BUT
never forget IE and Firefox does not show your pages the same.
It is a shame that there still has to be differences in browsers.

Heck, there are differences in monitors or maybe the OS?? set at the same resolution.
The problem I had was a div clear left, and for most people, the rest of the page was fine.
For others, the next div showed below the first div, rather than to the right of it, because the width was 10 px larger than the screen.

Anyway, hacks should not be needed for pages to look the same in all browsers/resolutions.

[chrisJumbo]

It would be nice if Hacks weren't needed, but they are.

I recently came across a fun one though. My page in IE looked as I expected, but FF did not. I had to explicity add a height to my divs for it to display correclty in FF. Not really a hack, but interesting that IE could handle expanding the div w/o the pre-determined height, but FF could not.

@tombstoneweb, have we scared you enough, yet?