OT: Nested Table Rant

[Adrienne Boswell]

<movie="The Two Towers" character="Gollum">I hates Nested Tables! I
hates them! I hates them!</movie>

I've inherited a site that uses nested tables (4 deep) for
presentation. Urgh! I hate debugging these things. I'm getting rid
of them slowly but surely.

Just had to get that off my chest.

 

[Leif K-Brooks]

<movie="The Two Towers" character="Gollum">I hates Nested Tables! I
hates them! I hates them!</movie>

You forgot to put the element name.

 

[DU]

<movie="The Two Towers" character="Gollum">I hates Nested Tables! I
hates them! I hates them!</movie>

I've inherited a site that uses nested tables (4 deep) for
presentation. Urgh! I hate debugging these things. I'm getting rid
of them slowly but surely.

Just had to get that off my chest.

You're not off topic. You're definitively on the topic of webpage
creation by amateurs. A lot, maybe as much as 50% of all websites out
there (3 billions 200 millions webpages were indexed by google.com) are
based on table designs.

I also had to debug a site which had over 50 tables all used for
positioning. Also 4 levels deep of nesting. It took me days, not hours,
to fix.

Each time I mentioned in this newsgroup that table design is bad (and
nested tables is worse, is madness), I made sure and underlined the
maintainance aspect of such page. Trying to debug and figure out a site
based on tables is really long, hard, time-demanding.

Why Tables For Layout is Stupid
http://www.hotdesign.com/seybold/
October 2003

Table design (furthermore nested tables based design):
"
# This makes the file sizes of your pages unnecessarily large, as users
must download this presentational data for each page they visit.
# Bandwidth ain't free.

# This makes redesigns of existing sites and content extremely labor
intensive (and expensive).
# It also makes it extremely hard (and expensive) to maintain visual
consistency throughout a site.
# Table-based pages are also much less accessible to users with
disabilities and viewers using cell phones and PDAs to access the Web."

http://www.hotdesign.com/seybold/06problems.html

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/
- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html

 

[Richard]

<movie="The Two Towers" character="Gollum">I hates Nested Tables! I
hates them! I hates them!</movie>

I've inherited a site that uses nested tables (4 deep) for
presentation. Urgh! I hate debugging these things. I'm getting rid
of them slowly but surely.

Just had to get that off my chest.

<applause>clap!</applause>

 

[gmcclary]

You're not off topic. You're definitively on the topic of webpage
creation by amateurs. A lot, maybe as much as 50% of all websites out
there (3 billions 200 millions webpages were indexed by google.com) are
based on table designs.

I also had to debug a site which had over 50 tables all used for
positioning. Also 4 levels deep of nesting. It took me days, not hours,
to fix.

Each time I mentioned in this newsgroup that table design is bad (and
nested tables is worse, is madness), I made sure and underlined the
maintainance aspect of such page. Trying to debug and figure out a site
based on tables is really long, hard, time-demanding.

Why Tables For Layout is Stupid
http://www.hotdesign.com/seybold/
October 2003

Table design (furthermore nested tables based design):
"
# This makes the file sizes of your pages unnecessarily large, as users
must download this presentational data for each page they visit.
# Bandwidth ain't free.

# This makes redesigns of existing sites and content extremely labor
intensive (and expensive).
# It also makes it extremely hard (and expensive) to maintain visual
consistency throughout a site.
# Table-based pages are also much less accessible to users with
disabilities and viewers using cell phones and PDAs to access the Web."

http://www.hotdesign.com/seybold/06problems.html

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/
- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html

Tables for layout works!

The future of the Web is in nested tables! (or nested <div>'s)
What, only four deep? You got no depth!

Tell me this, not using tables... (got it, no tables...)
Show me!
You positon text left... (empty background right)
You position text right... (empty area left)
and you position text center... (empty area left and right)

Now: then, (as part of the previous <div>) use a few thumbs (gif, png, who
cares) two columns; and CENTER the caption UNDER them... (Centered! png's or
gif thumnbs centered on canvas and text centered under each, agreed?)
THEN, centered under it all, center text, with background left and right...
show me...

(BUT! You may not use more div's than tables--(got it, you cannot use more
than 4 divs) )

You cannot do it with css...no tables. (HTML 4.1 or XHTML1 and CSS2---to
display in MSIE6, Opera 7.21, NS6)(all...)

Hell, you can't even make one text block center (with background left and
right) using only CSS without using <center> (of one definition or another,
html 3.2, 4.0, 4.1, xhtml, (loose or otherwise) (and display in msie6, ns7
and opera7) AND validate it w/ w3c)).

come back?

You show me, and I'll kiss your ugly dog on 1st and Main St at high noon,
and give you an hour to draw a crowd.

Glenn

 

[Adrienne]

Gazing into my crystal ball I observed Leif K-Brooks

You forgot to put the element name.

Whoops!

<voice movie="The Two Towers" character="Gollum">I hates Nested Tables! I
hates them! I hates them!</voice>

<voice movie="The Two Towers" character="Sméagol">CSS is our friend. We
likes CSS. Go away Nested Tables - and never come back!</voice>

 

[Toby A Inkster]

Now: then, (as part of the previous <div>) use a few thumbs (gif, png, who
cares) two columns; and CENTER the caption UNDER them... (Centered! png's or
gif thumnbs centered on canvas and text centered under each, agreed?)

Using CSS 2.1, but only works in Opera 7:
http://www.goddamn.co.uk/tobyink/scratch/css-centre-aligned-thumbs.html

Using CSS 2, works in IE5+, Mozilla, Netcape and Opera (and doesn't fail
too miserably in IE4):
http://www.goddamn.co.uk/tobyink/scratch/css-centre-aligned-thumbs-6.html

Screenshots to prove it works:
http://www.goddamn.co.uk/tobyink/scratch/css-centre-aligned-thumbs-6-ie5-800x600.png
http://www.goddamn.co.uk/tobyink/scratch/css-centre-aligned-thumbs-6-ie6-1024x768.png
http://www.goddamn.co.uk/tobyink/scratch/css-centre-aligned-thumbs-6-moz14-1024x768.png
http://www.goddamn.co.uk/tobyink/scratch/css-centre-aligned-thumbs-6-o7-640x480.png

 

[rf]

Tables for layout works!

but is a bastard to maintain

The future of the Web is in nested tables! (or nested <div>'s)
What, only four deep? You got no depth!

This particular future ended last century.

Tell me this, not using tables... (got it, no tables...)
Show me!

Hmmm. OK.

You positon text left... (empty background right)
Yep.
http://users.bigpond.net.au/rf/test/pos/left.html

You position text right... (empty area left)

Yep. I assume this is a cumulative challenge.
http://users.bigpond.net.au/rf/test/pos/right.html

and you position text center... (empty area left and right)

Getting trickier...
http://users.bigpond.net.au/rf/test/pos/centre.html

Now: then, (as part of the previous <div>) use a few thumbs (gif, png, who
cares) two columns; and CENTER the caption UNDER them... (Centered! png's or
gif thumnbs centered on canvas and text centered under each, agreed?)
THEN, centered under it all, center text, with background left and right...
show me...

Ah, finally something worthy of consideration. Took me a good 5 minutes to
solve this one

http://users.bigpond.net.au/rf/test/pos/thumbs.html

Works with IE6 and Mozilla 1.4. Have not checked any others.

(BUT! You may not use more div's than tables--(got it, you cannot use more
than 4 divs) )

<runs and counts &lt;div&gt;'s>

You cannot do it with css...no tables. (HTML 4.1 or XHTML1 and CSS2---to
display in MSIE6, Opera 7.21, NS6)(all...)

Er, I just did, except for Opera, which I don't have to hand at the moment
and NS, which I assume will work as Mozilla does. If it breaks in Opera
either Opera is broken or we have an excercise for the student

Hell, you can't even make one text block center (with background left and
right) using only CSS without using <center> (of one definition or another,
html 3.2, 4.0, 4.1, xhtml, (loose or otherwise) (and display in msie6, ns7
and opera7) AND validate it w/ w3c)).

What is wrong with, for example:

..someclass {width: 12em; margin: auto;} ?

<p class="someclass">some centred text</p>

I really think you should go over to http://www.w3.org/TR/REC-CSS2/ , read
it all and then play with it in each of the browsers you are interested in.

come back?

Here I am. I never went away.

You show me, and I'll kiss your ugly dog on 1st and Main St at high noon,
and give you an hour to draw a crowd.

Looks like I'll have to buy a dog. Er, where exactly are 1st and Main
streets? There not on my map of Sydney

Cheers
Richard.

 

[Eric Bohlman]

Now: then, (as part of the previous <div>) use a few thumbs (gif,
png, who cares) two columns; and CENTER the caption UNDER them...
(Centered! png's or
gif thumnbs centered on canvas and text centered under each, agreed?)
THEN, centered under it all, center text, with background left and right...
show me...

Ah, finally something worthy of consideration. Took me a good 5
minutes to solve this one

http://users.bigpond.net.au/rf/test/pos/thumbs.html
[snip]

Er, I just did, except for Opera, which I don't have to hand at the
moment and NS, which I assume will work as Mozilla does. If it breaks
in Opera either Opera is broken or we have an excercise for the
student

Desired effect achieved in Opera 7.20.

 

[Hywel Jenkins]

<movie="The Two Towers" character="Gollum">I hates Nested Tables! I
hates them! I hates them!</movie>

I've inherited a site that uses nested tables (4 deep) for
presentation. Urgh! I hate debugging these things. I'm getting rid
of them slowly but surely.

Just had to get that off my chest.

Be thankful you don't have to de-frame this:
http://tinyurl.com/syyb

 

[rf]

Gazing into my crystal ball I observed Leif K-Brooks


Whoops!

<voice movie="The Two Towers" character="Gollum">I hates Nested Tables! I
hates them! I hates them!</voice>

The media people usually use the <voiceover> element.

Cheers
Richard.

 

[Toby A Inkster]

Using CSS 2, works in IE5+, Mozilla, Netcape and Opera (and doesn't fail
too miserably in IE4):
http://www.goddamn.co.uk/tobyink/scratch/css-centre-aligned-thumbs-6.html

And my version kicks rf's ass. It only uses two nested <div>s (and there's
no <span style="display:block;"> cheating either)

 

[rf]

Be thankful you don't have to de-frame this:
http://tinyurl.com/syyb

Sometimes it's wiser to recommend that the client use that other company
over there ---->

Cheers
Richard.

 

[rf]

http://www.goddamn.co.uk/tobyink/scratch/css-centre-aligned-thumbs-6.html

And my version

<quote>
<div style="width:100%;text-align:center;"> <!-- special wrapper for IE -->
<div class="setofthumbs">
<div class="thumb"><a href="image.jpeg"><img ...
</quote>

kicks rf's ass.

<quote>
<div class="centre">
<div class="thumbrow">
<div class="leftcol"><img src="roo_small.jpg" ...</quote>

<counts divs> Three divs, nesting level 3, two nested divs.

I consider my arse unkicked

Different approach though. Does seem to be a bit more robust especially with
a narrow canvas.

Cheers
Richard.

 

[informant]

<applause>clap!</applause>

Oh, that's clever, Bullis.

--
Comments about Bullis:
As unwelcome as you have always been in here....You keep going
'.....offering idiotic comment after idiotic comment.

I'm gonna echo these sentiments. We know Bullis is a sick ****.

This appears to be a field in which you are not qualified to render an
opinion.

....every time I resolve to be more civil on usenet, I see another post from
"richard" giving someone completely off-the-wall advice with dangerous
consequences. So instead of saying something uncivil like "richard, you
clueless, pathetic moron, SHUT THE **** UP!!!" I;ll just bite my tongue and
say nothing.

Please stop posting legal advice, as you are clearly not qualified and most
of your advice is worse than useless.

Once again, following Richard's advice will end up with you being arrested.

of a child, but you're no mindreader and as long as the thoughts remain a
fantasy, there is no possible way to convict".


Path:
sn-us!sn-xit-01!sn-xit-09!supernews.com!news.maxwell.syr.edu!news.he.net!cyc
lone-sf.pbi.net!129.250.175.17!pln-w!spln!dex!extra.newsguy.com!newsp.newsgu
y.com!enews1
From: "Richard" <anom@anom>
Newsgroups: alt.html
Subject: Re: OT: Nested Table Rant
Date: Wed, 29 Oct 2003 23:47:11 -0600
Organization: http://extra.newsguy.com
Lines: 14
Message-ID: <[email protected]>
References: <[email protected]>
NNTP-Posting-Host: p-206.newsdawg.com
X-Priority: 3
X-MSMail-Priority: Normal
X-Newsreader: Microsoft Outlook Express 6.00.2800.1106
X-MimeOLE: Produced By Microsoft MimeOLE V6.00.2800.1106
X-No-Archive: yes
FL-Build: Fidolook 2002 (SL) 6.0.2600.78 - 24/10/2002 21:18:29
Xref: sn-us alt.html:436162

 

[Kris]

Now: then, (as part of the previous <div>) use a few thumbs (gif, png, who
cares) two columns; and CENTER the caption UNDER them... (Centered! png's or
gif thumnbs centered on canvas and text centered under each, agreed?)
THEN, centered under it all, center text, with background left and right...
show me...

(BUT! You may not use more div's than tables--(got it, you cannot use more
than 4 divs) )

You cannot do it with css...no tables. (HTML 4.1 or XHTML1 and CSS2---to
display in MSIE6, Opera 7.21, NS6)(all...)

If you care to express yourself more clearly, then i will show you how
and why it is possible.

 

[Toby A Inkster]

<quote>
<div style="width:100%;text-align:center;"> <!-- special wrapper for IE -->
<div class="setofthumbs">
<div class="thumb"><a href="image.jpeg"><img ...
</quote>

<counts divs> Three divs, nesting level 3, two nested divs.

Damn you! Forgot about that IE wrapper <div>.

/me goes off to sulk...

 

[DU]

[snipped]

Hell, you can't even make one text block center (with background left and
right) using only CSS without using <center> (of one definition or
another,

html 3.2, 4.0, 4.1, xhtml, (loose or otherwise) (and display in msie6, ns7
and opera7) AND validate it w/ w3c)).

What is wrong with, for example:

.someclass {width: 12em; margin: auto;} ?

<p class="someclass">some centred text</p>

I really think you should go over to http://www.w3.org/TR/REC-CSS2/ , read
it all and then play with it in each of the browsers you are interested in.

Hmm.. I catch you here. This was even mentionned in CSS1.

W3C CSS1
4 Formatting model
4.1.2 Horizontal formatting
"(...) if both 'margin-left' and 'margin-right' are 'auto', they will be
set to equal values. This will center the element inside its parent."
http://www.w3.org/TR/REC-CSS1#horizontal-formatting

W3C CSS2
10 Visual formatting model details
10.3.3 Block-level, non-replaced elements in normal flow
"If both 'margin-left' and 'margin-right' are 'auto', their computed
values are equal."
http://www.w3.org/TR/REC-CSS2/visudet.html#q6

But what needs to be said here is that margin:auto will NOT be honored
in MSIE 5.x for windows and will NOT be honored in MSIE 6 in backward
compatible mode. You need MSIE 6 to be in standards compatible rendering
mode. So, here you've got an extra reason why people should validate
their pages and include a doctype declaration (preferably a strict DTD).

But I entirely agree with your whole post. Table-based designs are
obsolete and can only hurt in many ways the web designers themselves.

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/
- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html

 

[Kevin Scholl]

Tables for layout works!

Yes, it does. And table-base layouts are likely not going away anytime
soon. That said...

The future of the Web is in nested tables! (or nested <div>'s)
What, only four deep? You got no depth!
Nonsense.

Tell me this, not using tables... (got it, no tables...)
Show me!
You positon text left... (empty background right)
You position text right... (empty area left)
and you position text center... (empty area left and right)

Now: then, (as part of the previous <div>) use a few thumbs (gif, png, who
cares) two columns; and CENTER the caption UNDER them... (Centered! png's or
gif thumnbs centered on canvas and text centered under each, agreed?)
THEN, centered under it all, center text, with background left and right...
show me...

(BUT! You may not use more div's than tables--(got it, you cannot use more
than 4 divs) )

You cannot do it with css...no tables. (HTML 4.1 or XHTML1 and CSS2---to
display in MSIE6, Opera 7.21, NS6)(all...)

Been shown otherwise.

Hell, you can't even make one text block center (with background left and
right) using only CSS without using <center> (of one definition or another,
html 3.2, 4.0, 4.1, xhtml, (loose or otherwise) (and display in msie6, ns7
and opera7) AND validate it w/ w3c)).

come back?

You show me, and I'll kiss your ugly dog on 1st and Main St at high noon,
and give you an hour to draw a crowd.

Oh, how I wish I could show you some of the layouts I've been developing
at work. You'd be puckering up to that ugly dog many times over. And to
drive home the point, I did the layouts first with table structures,
then with CSS-P -- the latter came in an average of 40% lighter in terms
of necessary code.

--

*** Remove the DELETE from my address to reply ***

======================================================
Kevin Scholl
(e-mail address removed)

 

[Eric B. Bednarz]

[...] You need MSIE 6 to be in standards compatible
rendering mode. So, here you've got an extra reason why people should
validate their pages and include a doctype declaration

As you wish.

<!DOCTYPE html SYSTEM>
<title/foo/<h1/bar/

validates just fine over here; if it doesn't at your end, fix your
catalog. Doctype Sw^H^HBitching, on the other hand, is a good reason
*not* to include a declaration in productive document instances. Double
your efforts for no benefit at all. Barf, barf.

(preferably a
strict DTD).

Not again; please read not the FAQ.

| Q. What's a DTD?
|
| A. DTD is an acronym for Document Type Definition, which consists
^^^^^^^\
(Editor's Note: ARRGH!)
| of a formal part (specified in SGML) and an informal part (specified
| in natural language).
|
| Many people forget about the informal part and use "DTD" to refer
| only to the formal part (i.e., the stuff that usually goes in a
| file named "something.dtd"). This is incorrect: the proper term
| for this object is "the entity containing the external subset of
| the formal part of the document type definition".
|
| (SGML has a tradition of using the longest possible phrases
| to describe the most frequently talked-about concepts; see also
| "declared-content-or-content-model".)
|
| The term "DTD" is also often confused with the document
| type declaration, mostly because they have the same initials.
|
<http://www.flightlab.com/~joe/sgml/faq-not.txt>

For the sake of additional confusion, 'dtd' is the *public text class*
for a *document type declaration _subset_*, as in

<!DOCTYPE eric PUBLIC "-//EBB//DTD Eric Conspiracy//EN">
^^^
which would be exactly equivalent to

<!DOCTYPE eric SYSTEM "http://sandbox.bednarz.nl/sgml/dtd/eric-conspiracy.dtd">

if it were mapped to that entity. No semantics or rocket science
involved (neither are any clues involved in self-replicating glossy
twaddles about so-called web standards in your weblog next door).