Aug222006

Where Have All The Tables Gone?

Goog Feed, CSS, Design    Comments (5)


I have been in the web world for around 5 years now, and when I first learned how to build a web page, my layouts were based on HTML tables. Now thanks to Cascading Style Sheets (which are nothing new) I have practically abandoned tables and now design with strictly CSS.

I used to fear CSS. I would look at a style sheet and think that tables were so much better. Until a few years ago, I figured out that you could create some nifty little rollovers with just an HTML anchor tag and a bit of CSS. Before I used to create rollover images in Photoshop and slice them up creating nifty rollovers which took forever to load.

CSS is all about freedom, optimization, beauty and ease of future manageability. With CSS you can change the look of a site quickly from one look and feel to another with the swapping out of a style sheet. No more going through pages of code and HTML to try to swap out all of the image names and possibly reposition things, CSS allows you to do all this cleaner, quicker, and all from one file.

Case In Point

At work we are developing a completely web-based totally configurable web enrollment system for the health care industry. Part of my task thus far have been to create the look and feel for the application. This app will be used by multiple clients, and each client will most likely want their own look and feel to the app, not a logo change, but an entire look and feel.

Here is my crack at a little illustration showing the power of css. One HTML document or set of code, you don't touch it at all, you just apply different style sheets and layout your page totally different based on the CSS not the HTML.
Pretty neat huh? You can see this in real action at the CSS Zen Garden.



Comments (5) | Print | Send | del.icio.us | Digg It! | Linking Blogs | 2835 Views
Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
[Add Comment]
Outstanding primer! Give us more details!!! Like, how should a non-designer type developer go about laying out their next web app so that style isn't such a huge issue?
# Posted By doug boude | 8/22/06 5:04 PM
I would love to know how you handle the box display differences between browsers. This is my biggest gripe with CSS. I can't stand the fact that it looks great in FF and then IE goes and messes it all up.
# Posted By Tony Petruzzi | 8/23/06 8:40 AM
@ Tony

Thanks for your response Tony. I too have problems at times with IE and Firefox compatability issues. One thing to remember off the bat is that Firefox is pretty compliant with the standards whereas IE is not. There are plenty of CSS hacks for different issues that you may run into, to help a site be compatible in both browsers. As time goes on and you get more familiar with CSS you will find these hacks become more prevelant in your development. When I develop and am laying out my CSS, I test in both browsers as I go. Quick example, when creating a div with a border around it of lets say 15px, firefox will render the width properly whereas IE needs you to tell it to be a little larger to allow for the same content space.

#container {
   width: 720px !important;
   width /**/: 750px; /* For IE */
   border: 15px solid #fff;
   }

These are the kings of hacks that must be put in to enable the CSS to be cross-browser compatible. Painful at times? Yes. But well worth the cost if you asked me. Hope that answered your question.
# Posted By Joe Gautreau | 8/23/06 9:45 AM
Hey Joe, how 'bout a quickie sample (in a separate blog post) of how to create cool flyout nav using CSS combined with Unordered Lists! Now THAT would be useful.
# Posted By db | 8/24/06 11:19 PM
@ db - Recently posted a response to your request for flyout navigations using css and unordered lists. Hope it's useful.

http://www.twoninemedia.com/blog/index.cfm/2006/8/...
# Posted By Joe Gautreau | 8/25/06 12:57 PM
[Add Comment]