/    Sign up×
Community /Pin to ProfileBookmark

css instead of tables

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.

to post a comment
CSS

5 Comments(s)

Copy linkTweet thisAlerts:
@nkaisareFeb 23.2003 — 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/tutorials/box_lesson/boxes.html
Copy linkTweet thisAlerts:
@CharlesFeb 23.2003 — [font=georgia]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.[/font]
Copy linkTweet thisAlerts:
@Robert_WellockFeb 24.2003 — 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.
Copy linkTweet thisAlerts:
@CharlesFeb 24.2003 — [i]Originally posted by Robert Wellock [/i]

[B][W]hat happens if user X wants to navigate through a site upon page entry and ends up receiving the main content first. [/B][/QUOTE]
[font=georgia]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.[/font]
Copy linkTweet thisAlerts:
@Robert_WellockFeb 24.2003 — 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.
×

Success!

Help @steven spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...