css instead of tables

[steven]

im obviously very new to CSS and apparently there is a way to use CSS in the place of tables. how would i go about doing so? what are the advantages and disadvantages of doing so?
thanks.

[nkaisare]

Yes, W3C recommends using CSS for page layout instead of tables. Advantage of CSS include cleaner codes, smaller html pages and separation of content from layout. Making site-wide layout changes is simpler than tables method.

Disadvantage is that older browsers may not support it well (eg. NS 4.7x is really bad), whereas even the most recent browsers are not yet 100% compliant - very close but still not one-hundred-percent.

You can find good layout tutorials at (among other places)
http://www.glish.com/css/
http://www.thenoodleincident.com/tut...son/boxes.html

[Charles]

You'll find a lot of good information on how to use CSS for layout at http://glish.com/css/.

But you also asked why. There are, and always will be, browsers in use that do not understand CSS. But there are also browsers that do not understand tables. And to make matters worse, there are browsers that understand tables but that present them to the user in alternative ways. If you are using a screen reader on a table of data you need some way to keep track of where you are in the columns and rows. And an increasing number of screen readers are presenting what the reader takes to be the headings with each cell. And this really makes a mess out of things when you use tables for layout.

We still have to deal with the non-CSS browsers but that's an easy one. The proper way to make a web page is to start with an HTML 4.01 Strict (http://www.w3.org/TR/html4/) page that works. Use your mark up properly and put the menu at the bottom of the page. People listening to your web site do not want to have to hear the same menu every time they hit one of your pages. Only once you've done that do you add CSS for fonts and colours and layout. And behold, you have a page that will work on every browser that there is.

[Robert Wellock]

Having a navigation menu at the bottom of the page is an interesting idea; I would have thought using a "skip navigation" link with the # fragment identifier would have covered some of the navigation menu issues.

The only reason I'd say that is because what happens if user X wants to navigate through a site upon page entry and ends up receiving the main content first.

[Charles]

Originally posted by Robert Wellock
[W]hat happens if user X wants to navigate through a site upon page entry and ends up receiving the main content first.

User X "tabs" through the links on the page, quickly arriving at the navigation. User Y simply asks the browser for a list of all of the links on the page. But the "skip navigation" link method isn't so bad except for the problems it causes search engines.

[Robert Wellock]

Thanks for the insight on that; it was probably so obvious that I didn't consider the tab navigation like that. I had also thought the search engines might have hiccups.