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]

Originally Posted by 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.

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]

Originally Posted by 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.

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]

Originally Posted by tombstoneweb

... 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?

[Webnauts]

Originally Posted by 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?

Our site is fully tableless and it works back to IE3. For sure IE3 and IE4 do not understand our stylesheets, but it is fully accessible, because the structure is well done.

Our site looks the same in all browsers including IE5.5, IE6 and IE7, with some minor bugs which are almost invisible in IE5 too. But that because we did not have the time to get that fixed yet. But is it necessary?

So what is scary here?

[Peter (IMC)]

<div id="box">
<div id="top"></div>
<div id="middle">
<div id="leftcolumn"></div>
<div id="content"></div>
<div id="rightcolumn"></div>
</div>
<div id="footer"></div>
</div>

That's a basic lay-out for a 3 column design with a top and footer. Now you try to do the CSS..

[inertia]

I havent read this thread fully so sorry if its already been mentioned...

I've been getting to grips with div/css in the last 6 months and have found the FF addon "firebug" to be a great help! Fiddling around with the CSS parameters in firebug is fun and helps you to understand the dynamics of div/css.

[DesignsOnline]

Does anyone know of a program that will draw css tables in the same way that Dreamweaver or Frontpage will let you draw html tables?

It would be very very useful...

[jScott_Harris]

now what?...change your mind...tableless is overrated, over-hyped and it under delivers. People are all the time bragging about their tableless designs and yet I see little to no advancement in traditional html methods done right. Google could care less if there is 5 table tags and a few tr's and td's or a the same number of div's, spans and other things. What does care? Broswers. And until microsoft, mozilla, apple and others decide to use the exact same rendering engines, tableless isn't going to be worth the headache. You may become the world's best at table-free design and I guarantee you that you will have more cross browser issues than someone cluelessly using tables embedded in tables embedded in tables and so on.

Now all this being said, there is a great medium to be found. Embedding tables endlessly or using crazy rowspans and colspans is ridiculous in its own right. There's a balance between the two concepts that when achieved, you can get really clean, user-friendly, seo-friendly code without all the hangups.

[Peter (IMC)]

Originally Posted by jScott_Harris

now what?...change your mind...tableless is overrated, over-hyped and it under delivers. People are all the time bragging about their tableless designs and yet I see little to no advancement in traditional html methods done right. Google could care less if there is 5 table tags and a few tr's and td's or a the same number of div's, spans and other things. What does care? Broswers. And until microsoft, mozilla, apple and others decide to use the exact same rendering engines, tableless isn't going to be worth the headache. You may become the world's best at table-free design and I guarantee you that you will have more cross browser issues than someone cluelessly using tables embedded in tables embedded in tables and so on.

Now all this being said, there is a great medium to be found. Embedding tables endlessly or using crazy rowspans and colspans is ridiculous in its own right. There's a balance between the two concepts that when achieved, you can get really clean, user-friendly, seo-friendly code without all the hangups.

100% tableless has the advantage that you´re forced not to be lazy. You have to do it right otherwise it will break. The result is that for a search engine you pretty much always do things right without even realizing it.

Besides that, tableless is cool for a website builder. And when you start doing dynamic websites, tableless is actually easier than using tables.