CSS and Tableless Design

[Sillysoft]

I have read a lot about using CSS for layout. It seems to be the current Big Thing amongst all the avant-garde web designers.

My problem is that I have a bunch of experience hacking out quick table-based websites. I haven't been able to justify putting aside the time to re-learn how to do it using CSS, since what I can do now works just fine for me.

[Sillysoft]

Weird, I posted a reply to you but my comment seems to have been put at the top of the thread!?!

Edit: After looking at it more it looks like we have set each set the forums to different timezones. So my posts look like they happened earlier in time then yours.

[Mike Boeh]

I adjusted the server time to reflect where it is... Sorry about that :) In 2 hours, everything will be back to normal as far as time goes...

[GameStudioD]

http://www.stopdesign.com/articles/throwing_tables/

This article talks about how you can use CSS instead of tables to create webpages. I think its quite interesting because I thought CSS was just used for changing colors and font size. It is much more powerful. The author took microsoft.com and used a CSS design without tables. The size of the html file was reduced significantly and the number of HTTP requests for images was reduced dramatically. This design is catching on because it is so more efficient and the html more readable.

http://www.csszengarden.com/

This site is done with CSS and is tableless. There are a couple of versions of this site that have a completely different look with essentially the same html file, and a different style sheet. This looks like a far better way to put together webpages.

[oNyx]

CSS is really great. I spent alot of time for some kind of crash course over the last two weeks. I rebuild the layout from a list apart (http://www.alistapart.com/) (that was really tough) and a complete page (searchengine streamlined) with 20 subpages using css, xhtml, php and js. The stylesheet is external and the js stuff is external, too. Each page is about 2-4 kb(!) plus some images. It loads really really fast and I don't even use frames :D

Over at csszengarden you can find a page with alot of resources:
http://www.mezzoblue.com/zengarden/resources/

Oh and "Tableless Design" means that the layout is done without tables. If you ever need a real table for displaying some data (eg highscores) you should use a table. Sure, you can mimic tables with css too, but that doesn't make any sense. You would end up with bloated markup and rather weird code.

Eg if you look at that page (http://www.stopdesign.com/articles/throwing_tables/), you'll see that the whole layout is done with css and that the small table there is done with <table>.

Oh and be sure to use a doctype and write your code as strict as you can (even if you use transitional). Eg inline elements (text, images...) needs to be inside a block element (<p>...</p>) otherwise IE 5.0/5.5 can produce some weird artifacts like a 4px gap.

Some tips here:
http://www.mezzoblue.com/css/cribsheet/

"When in doubt, validate." - That can save you alot of trouble.