<TABLE> vs. <DIV> when and where

[Davo]

Hi Folks,

There seems to be something about not using tables for layout, but use divs
instead. I'm not sure if I've got this right. If the output looks like what
you want, then it shouldn't matter what tags you use I would have thought,
or am I missing something?

tia,
Davo

[David Dorward]

Davo wrote:

There seems to be something about not using tables for layout, but use divs
instead.

No, use the most appropriate markup to describe your content, then use
CSS for presentation.

If the output looks like what you want, then it shouldn't matter what tags you use I would have thought,
or am I missing something?

Text browsers. Aural browsers. Small screen devices (like mobile phone
browsers). Search engine indexing robots. etc. etc.

--
David Dorward
<http://dorward.me.uk/>

[Adrienne Boswell]

Gazing into my crystal ball I observed "Davo" <wa******@hotmail.com>
writing in
news:45**********************@per-qv1-newsreader-01.iinet.net.au:

Hi Folks,

There seems to be something about not using tables for layout, but use
divs instead. I'm not sure if I've got this right. If the output looks
like what you want, then it shouldn't matter what tags you use I would
have thought, or am I missing something?

tia,
Davo

There are several advantages, both for the user and the author. By
removing presenational markup and using an external stylesheet, what
used to take hours and days, takes a few seconds.

Of course, you want to avoid div-itis. Do not abuse them, and nest them
umpteen levels deep. Use the correct markup for the job, if it's a
paragraph use <p>, if it's a list use list markup, if it's tabular data
use a table. You will find that by using semantic markup, you can avoid
div-itis.

Remember that the least amount of markup makes the lightest page. Your
page should be light as a feather and full of content. Makes download
for the user much faster, indexing for the search engines much easier,
parsing for browsers easier as well.

HTH
--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

[Jim Carlock]

"Davo" posted...
: There seems to be something about not using tables for layout,
: but use divs instead. I'm not sure if I've got this right. If the
: output looks like what you want, then it shouldn't matter what
: tags you use I would have thought, or am I missing something?

You're missing all the heartache and suffering! :-)

Tables end up easier to implement and understand and appreciate.
Stick with tables when appropriate!

--
Jim Carlock
Post replies to the group.

[David E. Ross]

Davo wrote:

Hi Folks,

There seems to be something about not using tables for layout, but use divs
instead. I'm not sure if I've got this right. If the output looks like what
you want, then it shouldn't matter what tags you use I would have thought,
or am I missing something?

tia,
Davo

The largest problem occurs, not with a single table for creating
presentation, but when nested tables are required.

Too often with this usage, the depth of nesting becomes greater than
some browsers can handle. If tables are reserved for only tabular
presentations, you can then see how nesting rarely makes sense and why
some browsers have thus not been designed to handle deep nesting.

Also, for special browsers that make the Web accessible to the
handicapped (e.g., audio browsers for the blind), nested tables are
difficult to render in a sensible manner.

--
David E. Ross
<http://www.rossde.com/>

Natural foods can be harmful: Look at all the
people who die of natural causes.

[Ed Seedhouse]

On Sat, 10 Mar 2007 19:47:02 +1000, "Davo" <wa******@hotmail.comwrote:

>Hi Folks,

There seems to be something about not using tables for layout, but use divs
instead. I'm not sure if I've got this right.

It isn't. Not the DIV part, that is. Don't use tables for layout, true
and good advice. Use DIVS instead, untrue and very bad advice.

In fact the idea is not to use html for layout, in fact not for
presentation at all.

>If the output looks like what
you want, then it shouldn't matter what tags you use I would have thought,
or am I missing something?

Yes, you are missing the biggest thing of all - the old computer concept
of "separation of concerns". Use semantic, valid html to mark up the
content according to it's meaning, ignoring presentation completely.
Then use CSS to define the presentation, including the layout. This may
require the addition of grouping elements like DIV or SPAN to provide
the hooks for CSS rules, but not very many nor very often.

See: http://pages.prodigy.net/chris_beall/TC/

Modern web pages separate concerns: html markup for the concern of
coding the meaning of the content, and CSS for the separate concern of
changing the presentation of the content.

[=?ISO-8859-1?Q?G=E9rard_Talbot?=]

Davo wrote :

Hi Folks,

There seems to be something about not using tables for layout, but use divs
instead. I'm not sure if I've got this right. If the output looks like what
you want

Looks? HTML 4 was never designed to be medium-dependent or
device-dependent or browser-dependent. HTML was designed to be
independent of devices used and independent of medium used. The
proper/best suited markup is ultimately what matters.

Use <tablefor presenting tabular data; don't use table for creating
page sections, page divisions, menus, page header, page footer, etc...

, then it shouldn't matter what tags you use I would have thought,

or am I missing something?

tia,
Davo

If the same output can be achieved with a better semantic markup code
and with a smaller filesize which can also better interoperate without
detrimental accessibility problems, then why would you want to use a
worst semantic markup code that uses bloated code which can not
interoperate well and which creates accessibility problems?

Table-based webpage design versus CSS-based webpage design: resources,
explanations and tutorials
http://www.gtalbot.org/NvuSection/Nv...CSSDesign.html

Throwing Tables Out the Window.
http://www.stopdesign.com/articles/throwing_tables/
A very bold and amazing article. The author takes the microsoft.com
webpage, then removes all of the tables and implements CSS design and
reduces the original file size of 62%!
"If multiplied out by an average of 38.7 million page views per day,
that 25 KB savings per page could add up to about 924 GB in bandwidth
savings per day, or 329 terabytes per year."

If bandwidth costs for Giga-bytes and tera-bytes represent thousands and
thousands of dollars, why would you want to waste such money?

Tableless layout with Dreamweaver.
http://www.adobe.com/devnet/dreamwea...ss_layout.html
DreamWeaver has a 6 parts tutorial on how to use CSS template instead of
table design:
"tables do a pretty lousy job of page construction. Among their
shortcomings is the implied bias of the code towards presentation rather
than structure, the necessity to nest tables in order to achieve the
most basic of layouts, and enough redundant bandwidth-hogging tags to
feed a large family of tag eating monsters for literally a month."

Why should I use CSS layout instead of tables? (alt.html FAQ).
http://www.html-faq.com/csspositioning/?csslayout
Resource from the newsgroup discussion alt.html FAQ

Why tables for layout is stupid. Problems defined, solutions offered.
http://www.hotdesign.com/seybold/
Most possibly the best resource on this issue covering all aspects: it
was a seminar presentation, part of a conference in 2003. Translated in
12 other languages.

Gérard
--
Using Web Standards in your Web Pages (Updated Dec. 2006)
http://developer.mozilla.org/en/docs...your_Web_Pages

[Stephen Poley]

On Sat, 10 Mar 2007 10:37:22 -0800, "David E. Ross" <no****@nowhere.not>
wrote:

>Davo wrote:

>Hi Folks,

There seems to be something about not using tables for layout, but use divs
instead. I'm not sure if I've got this right. If the output looks like what
you want, then it shouldn't matter what tags you use I would have thought,
or am I missing something?

The largest problem occurs, not with a single table for creating
presentation, but when nested tables are required.

And even more so when there are several ROWSPANs and COLSPANs involved.

>Too often with this usage, the depth of nesting becomes greater than
some browsers can handle.

An even greater risk is that when you want to change to a different
authoring tool (nested tables are hardly ever marked up by hand) other
authoring tools can't handle the particular layout involved. You then
face a nightmare of a conversion.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[Davo]

Thanks to all for the replies, I think I understand the problem a little
better.

The concern I have with using CSS in place of tables is that older browsers
won't display properly, I know this is less of a problem with each passing
day, but still may be a point of contention with my management.

One way of doing this I've seen mentioned is using Java script redirection
and using two different versions of the page. However there are a few
problems with this

- latency? not sure if this is an issue
- cost of course
- and the biggie, what if they have javascript turned off?

Do any of you knowledgable people know of a best way to do this? The
solution has to be client side, as the back end will only be static pages.

tia,
Davo

[Andy Dingley]

On Sun, 11 Mar 2007 21:27:53 +1000, "Davo" <wa******@hotmail.comwrote:

>The concern I have with using CSS in place of tables is that older browsers
won't display properly,

Rubbish, and has been so for some years

[Davo]

Hi again gents,

Please disregard my last, after some more experiments, I think I'll stick
with tables as Jim advises, it's just too hard otherwise, I'd like it to be
otherwise but it aint so.

thanks,
Davo

"Davo" <wa******@hotmail.comwrote in message
news:45**********************@per-qv1-newsreader-01.iinet.net.au...

Thanks to all for the replies, I think I understand the problem a little
better.

The concern I have with using CSS in place of tables is that older

browsers

won't display properly, I know this is less of a problem with each passing
day, but still may be a point of contention with my management.

One way of doing this I've seen mentioned is using Java script

redirection

and using two different versions of the page. However there are a few
problems with this

- latency? not sure if this is an issue
- cost of course
- and the biggie, what if they have javascript turned off?

Do any of you knowledgable people know of a best way to do this? The
solution has to be client side, as the back end will only be static pages.

tia,
Davo

[=?ISO-8859-1?Q?G=E9rard_Talbot?=]

Davo a écrit :

Hi again gents,

Please disregard my last, after some more experiments, I think I'll stick
with tables as Jim advises, it's just too hard otherwise, I'd like it to be
otherwise but it aint so.

thanks,
Davo

"Davo" <wa******@hotmail.comwrote in message
news:45**********************@per-qv1-newsreader-01.iinet.net.au...

>Thanks to all for the replies, I think I understand the problem a little
better.

The concern I have with using CSS in place of tables is that older

browsers

>won't display properly,

The error is to try to force all browsers to render a CSS template
exactly like modern, compliant browsers can.
I know this is less of a problem with each passing

>day, but still may be a point of contention with my management.

One way of doing this I've seen mentioned is using Java script

redirection

>and using two different versions of the page. However there are a few
problems with this

- latency? not sure if this is an issue
- cost of course
- and the biggie, what if they have javascript turned off?

Using conditional comment (IE) and @import (NS4) is much more reliable,
robust and future-proof than relying on javascript.

>Do any of you knowledgable people know of a best way to do this? The
solution has to be client side, as the back end will only be static pages.

tia,
Davo

There are *_lots_* of websites displaying, demonstrating CSS templates
for webpages. I am sure there is one meeting your particular webpage needs.

As for older browsers (like NS 4.x, IE 5.x) they represent very few
users. What matters for non-CSS browsers, old browsers and buggy
browsers is that content remains accessible and navigation remains
functional regardless of CSS issues.

Gérard
--
Using Web Standards in your Web Pages (Updated Dec. 2006)
http://developer.mozilla.org/en/docs...your_Web_Pages

[David E. Ross]

Davo wrote:

Thanks to all for the replies, I think I understand the problem a little
better.

The concern I have with using CSS in place of tables is that older browsers
won't display properly, I know this is less of a problem with each passing
day, but still may be a point of contention with my management.

One way of doing this I've seen mentioned is using Java script redirection
and using two different versions of the page. However there are a few
problems with this

- latency? not sure if this is an issue
- cost of course
- and the biggie, what if they have javascript turned off?

Do any of you knowledgable people know of a best way to do this? The
solution has to be client side, as the back end will only be static pages.

tia,
Davo

While I advocate "Viewable with Any Browser" (see
<http://www.anybrowser.org/campaign/index.html>), I don't strictly hold
to that. If my Web pages at least comply with HTML 4.01 Transitional, I
feel I have done enough. Further, I ensure that my content can be
understood even without any CSS.

Beyond that, the visitor to my pages must also have some responsibility
by using a browser that is not filled with bugs and is compatible with
HTML 4.01. Thus, my pages might not be viewable with ANY browser. But
I don't care if my pages cannot be viewed with a browser that is
disfunctional or stuck in the era of HTML 3.

--
David E. Ross
<http://www.rossde.com/>

Natural foods can be harmful: Look at all the
people who die of natural causes.

[doug]

Gérard Talbot wrote:

Davo wrote :

>Hi Folks,

There seems to be something about not using tables for layout, but use
divs instead. I'm not sure if I've got this right. If the output looks
like what you want

Looks? HTML 4 was never designed to be medium-dependent or
device-dependent or browser-dependent. HTML was designed to be
independent of devices used and independent of medium used. The
proper/best suited markup is ultimately what matters.

Use <tablefor presenting tabular data; don't use table for creating
page sections, page divisions, menus, page header, page footer, etc...

, then it shouldn't matter what tags you use I would have thought,

>or am I missing something?

tia,
Davo

If the same output can be achieved with a better semantic markup code
and with a smaller filesize which can also better interoperate without
detrimental accessibility problems, then why would you want to use a
worst semantic markup code that uses bloated code which can not
interoperate well and which creates accessibility problems?

Table-based webpage design versus CSS-based webpage design: resources,
explanations and tutorials
http://www.gtalbot.org/NvuSection/Nv...CSSDesign.html

Throwing Tables Out the Window.
http://www.stopdesign.com/articles/throwing_tables/
A very bold and amazing article. The author takes the microsoft.com
webpage, then removes all of the tables and implements CSS design and
reduces the original file size of 62%!
"If multiplied out by an average of 38.7 million page views per day,
that 25 KB savings per page could add up to about 924 GB in bandwidth
savings per day, or 329 terabytes per year."

If bandwidth costs for Giga-bytes and tera-bytes represent thousands and
thousands of dollars, why would you want to waste such money?

Tableless layout with Dreamweaver.
http://www.adobe.com/devnet/dreamwea...ss_layout.html
DreamWeaver has a 6 parts tutorial on how to use CSS template instead of
table design:
"tables do a pretty lousy job of page construction. Among their
shortcomings is the implied bias of the code towards presentation rather
than structure, the necessity to nest tables in order to achieve the
most basic of layouts, and enough redundant bandwidth-hogging tags to
feed a large family of tag eating monsters for literally a month."

Why should I use CSS layout instead of tables? (alt.html FAQ).
http://www.html-faq.com/csspositioning/?csslayout
Resource from the newsgroup discussion alt.html FAQ

Why tables for layout is stupid. Problems defined, solutions offered.
http://www.hotdesign.com/seybold/
Most possibly the best resource on this issue covering all aspects: it
was a seminar presentation, part of a conference in 2003. Translated in
12 other languages.

Gérard

I can go along with what you say. I learned to use tables to begin with.
They often don't behave the way you want them to when used for layout.

Still, I can picture a page better if it is nicely divided up by a table.
And some examples have a complete stylesheet repeated in the <HEADsection
of every page, which complicates the structural view and creates bloat.
Certainly CSS can reduce file size dramatically if done properly. My own
pages are at http://www.douglaidlaw.net/boykett/ and are probably crying
out for a CSS layout. I left them as tables for the above reasons, after
trying CSS and getting lost. I still use CSS for setting fonts etc. And I
am a user of NVU.

Doug.
--