CSS instead of tables?

[robertsaunders]

This might seem like a stupid question, but those of you who have read my other posts will know that I am only really a dilettante at this game, so please excuse my ignorance.

After my latest admonishment from the prof I am wondering whether I should go back to school and learn how to use CSS instead of tables for the basic layout of my websites. I do use CSS for defining font styles etc. but to date I have always used tables or frames for the basic layout of the site.

My question is, what is the advantage of CSS over tables, if indeed there is one?

[djr33]

Tables can cause slightly slower rendering times in browsers.

That seems to be the main issue.

Really not sure myself how to use CSS to replace tables.

Generally, the idea is to use DIV elements with CSS properties to replace the tables. However, this gets complex when you start having columns, since, by default, div elements are not designed to occupy the same line.

Tables are usually fine for "tabular data", like a chart, etc.

The problem comes with your layout, so try to replace all 1-cell tables, etc. with divs.

I'm sure someone else will give a more detailed response, perhaps including how to replace multi-column tables as well.

[mwinter]

Tables can cause slightly slower rendering times in browsers.

The rendering times can be increased substantially, depending on how the document is structured. A table cannot be rendered until the browser has enough data to know how many columns it has, and adjustments will need to be made regularly as content is added which affects the cell sizes.

That seems to be the main issue.

There's general principle, too: the table element was never meant to be used to lay out a document. Rather than implement CSS (which has existed for quite some time), it would seem that browser vendors chose to try and compete with each other, instead. This is how other presentational hacks and elements that should never have seen the light of day on the Web came into common use.

A table-based document is typically larger and harder to maintain, especially if its necessary to use nested tables. Semantic markup should be quite small and simple. WYSIWYG programs make editing table-based documents easier, but they can have the opposite effect on CSS.

Really not sure myself how to use CSS to replace tables.

There's no simple formula for it. I find it easier to rewrite the document from scratch when I present demonstrations on these forums.

Generally, the idea is to use DIV elements with CSS properties to replace the tables.

Not quite: one should use semantic markup. There's a subtle difference. The div element will surely come into play, but normally to do its job: act as a generic, block-level container.

However, this gets complex when you start having columns, since, by default, div elements are not designed to occupy the same line.

Not that complex. There are only two approaches: floats and absolute positioning. Both have their pros and cons, some of which are related to browser rendering bugs. That in itself is the biggest problem when trying to learn CSS, but it's gradually becoming less of an issue as those bugs are resolved and reliable workarounds are discovered.

Mike

[belsidaam]

I am also quite new in all this but yesterday I took the pain to redesign my whole page to use only divs: http://www.christopheolinger.com
The main problem is that the main page is a big div with auto margins left and right to have it centered on the page. Header, menu and footer as well as page content are inside. A typical setup I would say. As soon as i started with floats and absolute positioning I saw that divs move when I resized my browser window vertically. I suppose because of the auto margins left and right of the mainbox. I ended up to add auto margins on the left for all my divs and then worked with padding to position the content of the divs on the horizontal and the top plus position:absolute with the vertical. This is ok for firefox. For IE6 it was a bit different. Just download my css files (mainstyle.css and mainstyleIE6.css to see the differences). Just type http://www.christopheolinger.com/mainstyle.css.
Everything was cool yesterday on firefox and IE6 even when resizing windows and resolutions. Now IE7 comes and evrything shifted again. I suppose it will be easy to fix by just matching the vertical settings again. Does anybody now if these guys will ever stay with one rendering system so that we do not have to constantly program everything several times?
I just wanted to post this as an example and perhaps somebody can have a look to see if I did it right or completely wrong. Books don't tell you everything.
---I just saw that the mainstyleIE6.css is not accessible. I'll fix it tonight. Sorry. Maybe this is why everything is shifted in IE now.

Cheers guys. This site is greaet by the way.

Christophe (belsidaam)