Tutorial on how to replace tables with CSS?

[Kris]

As you say,
that does emulate tables, and proper column height is achieved in those
browsers.

It emulates the visual behaviour of tables. That doesn't mean the
content *is* a table.

 

[Barry Pearson]

Neal wrote:
[snip]

A most important reason to use CSS over <font> is to allows changes in
presentation without having to go through all your HTML pages. This is
even more relevant for the <table> markup.

[snip]

The first point, of course, is that this is telling an author & publisher what
advantages there are in using such CSS. Good! Tell them how they can benefit,
then let them decide for themselves. And, of course, any author & publisher
who decides not to take advantage of the benefits, or decides that they don't
apply to them, is free to act accordingly. There is no justification for
criticising them. They are the ones affected. (If someone else believes they
are affected, they can go to court).

But a second point, of course, is that massive changes can be achieved to
table-layout pages without having to go through all the pages! Tables aren't
separate from CSS. They can work very effectively together. Here are some
examples:

Here is a page that uses a simple layout table to put the site navigation on
the right. (It is the 2nd cell of a 1-row 2-column table). Following that is
basically the same page, (the body is exactly the same), using the same
external CSS (which has perhaps 100 rules), but with 2 extra CSS rules
embedded in the head of the document. It has the site navigation on the left.
http://www.childsupportanalysis.co.uk/normal.htm
http://www.childsupportanalysis.co.uk/reversed.htm

Here are several pages that all use exactly the same simple layout table - a
5-box 3-column layout. They are then rendered in very different layouts, using
CSS. One page swaps over the left & right columns. Another sticks the cells to
the corners & sides of the viewport. Another arranges the table on a diagonal.
And there are more.
http://www.barry.pearson.name/tableaux/

Bad table layouts, like bad CSS layouts, are bad. But don't condemn all CSS
layouts because some of them are bad. Ditto tables. And don't believe the
anti-table-layout propaganda! It mostly doesn't stand up to scrutiny.

 

[Toby A Inkster]

I wonder why it is still in CSS2.1, given its lack of support in IE? It says
"But most of all CSS 2.1 represents a "snapshot" of CSS usage: it consists of
all CSS features that are implemented interoperably at the date of publication
of the Recommendation".

The W3C view of interoperability is that there are at least 2
implementations. Seems sensible enough to me.

 

[Toby A Inkster]

You snipped my question "Perhaps "display: table" techniques?"!

Perhaps because I didn't know what you meant by it. It was in diametric
contradiction with your earlier statement:

| I know of no CSS feature, or proposed feature, that is intended to
| support columns in the same way, or even close to the same way, as
| table-columns.

So I assumed that you meant you were unsure of what "display:table" did
and so I went on to explain that it does indeed support columns similarly
to tables.

 

[Davmagic .Com]

From: (e-mail address removed) (Chris)
Anybody know of a good, online tutorial
explaining how to use CSS instead of
tables?

If after you read thru all the mish-mass about using CSS for layout in
this thread, you still want to use tables for layout (like 99% of the
rest of the WWW sites do) then look here for some help:
http://davmagic.com/PAGES47.html

Until browsers get rid of bugs and get organized about what the W3C
"Recommends" ... tables should be the best and safest way to layout a
page...

Web Design, Magic, Painting, Junking, More
http://www.davmagic.com
Paint A House
http://www.paintahouse.com
NOTE: This emailbox is CLOSED do NOT reply!!!

 

[Karl Groves]

Until browsers get rid of bugs and get organized about what the W3C
"Recommends" ... tables should be the best and safest way to layout a
page...

Source?

-Karl

 

[Toby A Inkster]

Tony

Harry, it's Toby.

provided an example of the use of div-elements & display:table (etc) to
achieve the equivalent of <table> using CSS. [...] And many times,
people, who might claim to be separating presentation/layout from
content/mark-up, have carefully provided sufficient extra mark-up, in
the right order, to enable that CSS to work.

I only used tonnes of <div> elements because I couldn't be bother to think
up a real-world example. But, if you'd prefer:

<ul id="eventdata">
<li><h4>Date</h4><p>Wednesday, 23rd June 2004.</p></li>
<li><h4>Venue</h4><p>The Commonwealth Centre, Kensington, London.</p></li>
<li><h4>Booking Info</h4><p>[email protected]</p></li>
</ul>

#eventdata {
display: table;
border: 1px outset silver;
border-spacing: 0.25em;
margin: 1em 0;
}
#eventdata li {
display: table-row;
}
#eventdata li * {
display: table-cell;
border: 1px inset silver;
padding: 0.25em;
}

 

[Barry Pearson]

Harry, it's Toby.

[snip]

Whoops! Sorry.

 

[Barry Pearson]

Perhaps because I didn't know what you meant by it. It was in
diametric contradiction with your earlier statement:

[snip]

No. But it may have been in contradiction with what you *thought* were my
earlier statements. I am not afraid to admit to uncertainty, including
admitting to not knowing something.

 

[Barry Pearson]

The W3C view of interoperability is that there are at least 2
implementations. Seems sensible enough to me.

Then why have they removed "font-size-adjust"?

Having 2 minority implementations isn't a good criterion. And it isn't
consistently applied.

I would love the know the real justifications!

 

[Toby A Inkster]

Then why have they removed "font-size-adjust"?

I didn't know there was even one implementation of it? Which browsers
support it? Perhaps the two implementations don't play nicely with each
other?

 

[Whitecrest]

Source?

DavMagic.com of course. No different than others quoting sources. And
just as valid.

 

[Barry Pearson]

I didn't know there was even one implementation of it? Which browsers
support it? Perhaps the two implementations don't play nicely with
each other?

It works with Firefox 0.8 and Netscape 7.1. I guess it works with recent
Mozilla browsers in general? They appear to support the (better) CSS3 version
of it, which applies it to whatever font is chosen, and doesn't expect it to
be the aspect value of the first family in the list. (It isn't in Opera 7.23,
nor any IE).

Perhaps "all recent Mozilla" counts as one implementation? Hm!

 

[Toby A Inkster]

Perhaps "all recent Mozilla" counts as one implementation? Hm!

Yes, I would think so.

 

[DU]

I'm talking about tables, the subject of this thread.

I've listed tutorials on how to replace tables with CSS, the subject
word for word of this thread. Read me well. Read me carefully. You have
not mentioned a single tutorial on how to replace tables with CSS. If
someone is off-topic, you have been more than I have.

They can be used in

valid Strict code.

The fact that one can use tables and css in valid strict mode does not
per se mean that such usage is a correct and justified webpage design
decision. You clearly said that since a vast majority of web pages in
the world use both, then that would be a sufficient reason to do the
same. This is where you're wrong, imprecise to say the least, and def.
not nuanced. You never addressed the how they do this or why from a
design perspective, from an interoperability perspective, from an
usability perspective. What you do is called a petition of principle and
it's never acceptable in science, in a court of law or in a rational
discussion/confrontation of arguments.

You weaken your argument by bringing in unconnected issues.

I replied to what you said, period. I didn't make that sentence the main
issue in my post. Everytime someone goes saying "Well, a wide majority
of people do x, so you can do x/it's ok to do x because others do x",
then such person is relying on a petition of principle which is
unacceptable in science, in a court of law and in rational discussion of
arguments.

I agree that good tutorials about general use of CSS are desirable.

But you did not focus on that in your post. You only mentioned the
importance of knowing browser bugs and how to work around these. It's
definitively not my approach and, IMO, it's definitively not a
recommendable approach generally speaking. File bugs when it's relevant,
justified to do so at bugzilla.org, opera.beta or to the MSIE dev. team at
http://blogs.msdn.com/dmassy/archive/2004/06/16/157263.aspx
"At this stage there isn't much more to add other than to reiterate the
point that the Internet Explorer team does exist and does care. In my
new job role I'm very interested in hearing about what you the customers
would like to see."
That's one thousand percent (1000%) more constructive, relevant and
future-positive than developing an expertise on working around bugs.
Short-term pragmatism never helps to solve problems at the source.

But the

subject of this thread was using CSS instead of tables, and that is a specific
use of CSS. For that, even if you know the rest of CSS, you need that extra
knowledge I mentioned.

But it goes further than that. Where are the tutorials that say how to get
from a visual design concept to the combination of mark-up & CSS needed to
achieve it without using layout tables? Where is the method or process that,
given some arbitrary (but plausible) visual design, enables an author to
choose the wrapping & nesting & sequencing of the top-level elements that will
give the CSS the structure needed? A method that will steer the author to
appropriate combinations of floats, positioning, and normal flow? Perhaps this
is covered in some of the good books on the topic?

I have no idea what concretely you are referring to here. No url. No
example. Demo page. No typical exemplary webpage. You're talking in
abstract terms, general terms. For a wide majority of normal,
not-to-complex webpages, there is no need for table designs, nested
tables and conversion to CSS can be easily done.

I suspect most of the table-layout pages being uploaded every day are being
developed by professionals, not amateurs. The sites that matter most surely
are?

I suspect amateurs upload more webpages every day than so-called
professionals. I suspect a lot of so-called professionals upload
table-based designed webpages for no justifiable reasons.

Those amateurs are likely to have limited audiences. Family & friends, people
pursuing the same hobby, etc. Are they communicating with their audience? If
so, fast & easy is the right approach for them.

That's a poor argument in favor of webpage table-design: if visible,
measurable results is achieved from the web author's perspectives, then
everything else does not matter. What about the users' perspective here?
What about the media used, interoperability perspective? What about the
long-term perspective, the management perspective?

[snip]

A wide majority of sites relying on table designs also resort
shamelessly and enormously on nested tables: does that makes sense?
I'm talking about as much as 50% of all webpages on the web here.
Can you just give me a good example of usage of nested tables?

That isn't an argument against tables. In fact, unless you show problems with
nested tables, it isn't even an argument against nested tables!

I mentioned the arguments against nested tables before and several
times. I get tired out of it.

If you want to make a point about the risks of bad layout tables, for example
that they blow apart at large text sizes, and/or they don't linearise well and
can become inaccessible, then I agree. But those cases are not a reason to
criticise use of simple layout tables that don't have those particular
problems. It is not either/or, and that is the point I was making earlier. CSS
& tables are not on conflict.

In the absolute, CSS & tables are not in conflict. In the concrete, they
often, very very often are. Table-design for non-tabular data is more
frequent than any other type of webpage design.

They are different topics. They are often *not* closely related.

Strictly speaking, yes, they are different topics. But these often are
present in the same webpages. The common bond is absence of HTML
knowledge, absence of any sensible webpage design instruction and
frantic WYSIWYG motivations + visual-results-is-what-matters-period
goals. That's typical of amateur websites overall.

Those of us

whose target is validated Strict code know how to separate out these very
different arguments.

You did not make such nuance in your previous post.

See what I said above about weakening your argument.

Here's 2 arguments for you.

1- Repeating the same argument or giving reading instructions is not an
argument per se. It never adds anything to an already forwarded and
submited argument. Repeating the same argument suggests pressure imposed
or recourse to pure force than it suggests addressing to the
intelligence of people and will to cooperate.

2- Underestimating the receptivity and the intelligence of readers in
any forums just weakens one's own position. No one in a newsgroup needs
reading lessons.

You won't convince

someone to stop using layout tables by adding in the subject of <font>, etc.

That was not my point. I say these people loving table-designs and
nested tables usually are in the same bag of people relying on <font>,
<center>, align and valign used everywhere, &nbsp; users, etc...
Table-design users and nested-tabled-design users are people who after
years and years of coding never upgraded their skills, never opened a
book, never went to read a tutorial on sound webpage design, etc..

DU

 

[DU]

Your logic is wrong.

Most developers use a combination of Tables and CSS
Most developers use invalid code or improper nesting

Therefore Using tables and CSS is invalid code.

Sorry that is not good logic, nor is it a true statement.




Not the absence of tutorials, but rather the absence of motivation to
learn from the developers. Many just don't want to learn it because the
old way seems to work anyway. In the long run, these people will end up
losing.





Why bother asking,

Because I wanted to understand his own personal logic regarding/behind
nested tables. Nested tables, even for positional purposes, makes no
more sense than putting your micro-wave oven in another micro-wave oven
hoping that your sandwich or coffee will get ready faster that way.


would you ever look at any code he offers and say;

"damn, he was right, That is a awesome use of nested tables...."

Yes, I know a very precise case where nested tables of tabular data is
appropriate.

These issues revolve around bad usage of table layout. But you don't
necessarily have to lose the tables to fix it.

These types of webpages are usually webpages based on table-design.

DU

The use of a little CSS

 

[Barry Pearson]

[snip]
I'm talking about tables, the subject of this thread.

I've listed tutorials on how to replace tables with CSS, the subject
word for word of this thread. Read me well. Read me carefully. You
have not mentioned a single tutorial on how to replace tables with
CSS. If someone is off-topic, you have been more than I have.

Then what are these? I wrote this as an early response to the OP.
http://groups.google.com/[email protected]

The fact that one can use tables and css in valid strict mode does not
per se mean that such usage is a correct and justified webpage design
decision.

But it can be. This is for the author & publisher to judge, based on their
objectives.

You clearly said that since a vast majority of web pages in
the world use both, then that would be a sufficient reason to do the
same. This is where you're wrong, imprecise to say the least, and def.
not nuanced. You never addressed the how they do this or why from a
design perspective, from an interoperability perspective, from an
usability perspective. What you do is called a petition of principle
and it's never acceptable in science, in a court of law or in a
rational discussion/confrontation of arguments.

There is a very important reason for mentioning this. With the about 99% of
the one of the world's greatest information repositories based on such pages,
we can be certain that support for such pages will be a high priority in
future. They are, at the moment, the equivalent of a de facto standard.
Whether that will be the case in 10 years time is an interesting, but
different, topic.

[snip]

But you did not focus on that in your post. You only mentioned the
importance of knowing browser bugs and how to work around these.

I have said other things in other posts in this thread, including the one
where I referred to tutorials & reading matter on the topic of
CSS-positioning. Here, I was adding to those points.

It's
definitively not my approach and, IMO, it's definitively not a
recommendable approach generally speaking. File bugs when it's
relevant, justified to do so at bugzilla.org, opera.beta or to the
MSIE dev. team at
http://blogs.msdn.com/dmassy/archive/2004/06/16/157263.aspx "At this
stage there isn't much more to add other than to reiterate the point
that the Internet Explorer team does exist and does care. In my
new job role I'm very interested in hearing about what you the
customers would like to see."
That's one thousand percent (1000%) more constructive, relevant and
future-positive than developing an expertise on working around bugs.
Short-term pragmatism never helps to solve problems at the source.

Given that fixing those bugs doesn't rapidly remove them from the field, you
still need the hacks & workarounds. After all, MS have brought out IE 6, but
there are still lots of instances of IE 5 that need to be taken into account.
I'm told that Safari is much better that Mac/IE, but people still send me
screen-shots of how a page has problems on Mac/IE.

MS know about the IE 5 box-model problems. And the lack of support for {
margin: 0 auto } which requires the text-align workaround. But many of my
users are still using IE 5, sometimes not on their own computers. So I have
learned how to cater for them.

[snip]

I suspect amateurs upload more webpages every day than so-called
professionals. I suspect a lot of so-called professionals upload
table-based designed webpages for no justifiable reasons.

Doesn't that last sentence contradict what you said above: "I'd say amateur
web designers are the ones not putting honest efforts into coding their
pages".

That's a poor argument in favor of webpage table-design: if visible,
measurable results is achieved from the web author's perspectives,
then everything else does not matter. What about the users'
perspective here? What about the media used, interoperability
perspective? What about the long-term perspective, the management
perspective?

Now you are using right judgement technique. You appear to have some sort of
method or set of checklists, and make decisions accordingly. That is good.
That is what authors & publishers should be doing.

The method I use has both technical & project criteria. When judging the use
of simple layout tables, they are often seen to be an effective way of
handling a particular project. (I use checklists based on OPENframework, so
the technical qualities are: availability, usability, performance, security,
and potential for change. The project criteria are cost, risk, and time).

[snip]

I mentioned the arguments against nested tables before and several
times. I get tired out of it.

They can be effective. The main problem I have found with them is that in some
cases they don't linearise well for a speaking browser. Special care is needed
there.

[snip]

Strictly speaking, yes, they are different topics. But these often are
present in the same webpages. The common bond is absence of HTML
knowledge, absence of any sensible webpage design instruction and
frantic WYSIWYG motivations + visual-results-is-what-matters-period
goals. That's typical of amateur websites overall.

But that doesn't mean they are all bad! After all, images and text are *also*
often present in the same webpages, and that doesn't make those bad!

If you are making an argument about the advantages that all authors might get
from knowing more about HTML, fine. But they are not an argument for not using
any particular one of them, whether tables or images. Those cases have to be
made individually. And I would certainly advise *against* "mindless usage of
tables". I think all of these techniques should be used with some thought. It
wouldn't be hard to find bad pages that appear to make "mindless use of CSS"!

[snip]

You won't convince

That was not my point. I say these people loving table-designs and
nested tables usually are in the same bag of people relying on <font>,
<center>, align and valign used everywhere, &nbsp; users, etc...
Table-design users and nested-tabled-design users are people who after
years and years of coding never upgraded their skills, never opened a
book, never went to read a tutorial on sound webpage design, etc..

An over-generalisation, of course! Some of the people using table-layout are
up-to-date professionals who make a judgement for a particular project or page
that a table is appropriate, and know how to use one effectively. Some of them
have written tutorials, whether on that or other topics. And material on sound
visual design tends not to concentrate on the techniques for achieving such
design.

All of these can be evaluated separately. And should be.

 

[Barry Pearson]

(e-mail address removed) says... [snip]

A wide majority of sites relying on table designs also resort
shamelessly and enormously on nested tables: does that makes sense?
I'm talking about as much as 50% of all webpages on the web here.
Can you just give me a good example of usage of nested tables?

Why bother asking,

Because I wanted to understand his own personal logic regarding/behind
nested tables. Nested tables, even for positional purposes, makes no
more sense than putting your micro-wave oven in another micro-wave
oven hoping that your sandwich or coffee will get ready faster that
way.

Bad analogy. Nested tables can be useful for ensuring that
content-size-changes at different scales (for example, at page-level or at
detailed component level) remain independent of one-another. In fact, I think
the worst layout tables I see don't used nested tables. Instead, they often
use lots of rowspans & colspans, and this can make them fragile.

I normally favour a hierarchic approach to thinking about page design. This
applies both to the design of the rendering, such as the visual design, and
the design of the implementation technique. What are the outer-most 5 or so
(say) blocks or components, and how should these be handled? (Tables, floats,
absolute positioning, normal flow, frames, iframes, combinations of these?)
Then, within these, how should further material be incorporated? (Most of the
same options, although absolute positioning within tables has known problems).

[snip]

These types of webpages are usually webpages based on table-design.

[snip]

So what? You haven't shown cause-and-effect. Your argument appears to be based
on "guilt by association".

 

[DU]

DU wrote:

[snip]

The fact that one can use tables and css in valid strict mode does not
per se mean that such usage is a correct and justified webpage design
decision.

But it can be. This is for the author & publisher to judge, based on their
objectives.

In a very wide majority of cases, tables and css in valid strict mode is
rare, very rare on the web. In a very wide majority of cases on the web,
nested tables, no doctype decl., <center>, <font>, &nbsp;, <img
src="spacer.gif"> anywhere/everywhere etc... are the frequent choices of
amateurs and so-called professionals.

You clearly said that since a vast majority of web pages in
the world use both, then that would be a sufficient reason to do the
same. This is where you're wrong, imprecise to say the least, and def.
not nuanced. You never addressed the how they do this or why from a
design perspective, from an interoperability perspective, from an
usability perspective. What you do is called a petition of principle
and it's never acceptable in science, in a court of law or in a
rational discussion/confrontation of arguments.

There is a very important reason for mentioning this. With the about 99% of
the one of the world's greatest information repositories based on such pages,
we can be certain that support for such pages will be a high priority in
future. They are, at the moment, the equivalent of a de facto standard.
Whether that will be the case in 10 years time is an interesting, but
different, topic.

[snip]

It's
definitively not my approach and, IMO, it's definitively not a
recommendable approach generally speaking. File bugs when it's
relevant, justified to do so at bugzilla.org, opera.beta or to the
MSIE dev. team at
http://blogs.msdn.com/dmassy/archive/2004/06/16/157263.aspx "At this
stage there isn't much more to add other than to reiterate the point
that the Internet Explorer team does exist and does care. In my
new job role I'm very interested in hearing about what you the
customers would like to see."
That's one thousand percent (1000%) more constructive, relevant and
future-positive than developing an expertise on working around bugs.
Short-term pragmatism never helps to solve problems at the source.

Given that fixing those bugs doesn't rapidly remove them from the field, you
still need the hacks & workarounds. After all, MS have brought out IE 6, but
there are still lots of instances of IE 5 that need to be taken into account.

People are upgrading their browsers and browsers are being developed,
with new versions. The particular case of MSIE 5 and then MSIE 6 is sad.
After 3 1/2 years of non-development, the MSIE dev. team is being
rebuilt these days with defining goals, agenda, schedules, etc..
OTOH, in the last 3 years, Opera, Mozilla, Netscape, Konqueror browser
developments have been steady and regular with releases and new versions.

I'm told that Safari is much better that Mac/IE, but people still send me
screen-shots of how a page has problems on Mac/IE.

People are upgrading their browsers; maybe not as fast as you and I
would like to, but they are upgrading. That's true for all os-es.

MS know about the IE 5 box-model problems. And the lack of support for {
margin: 0 auto } which requires the text-align workaround. But many of my
users are still using IE 5, sometimes not on their own computers. So I have
learned how to cater for them.

You're talking about box model now. Not tables.
Yes, that is a browser bug affecting a good chunk of people who are
still using that 5+ year old browser. This single bug deserves to be
addressed. And, at the same time, this single bug should not be an
excuse for not triggering MSIE 6 into standards compliant rendering mode
where that bug is fixed.

[snip]

I suspect amateurs upload more webpages every day than so-called
professionals. I suspect a lot of so-called professionals upload
table-based designed webpages for no justifiable reasons.

Doesn't that last sentence contradict what you said above: "I'd say amateur
web designers are the ones not putting honest efforts into coding their
pages".

Of course, so-called professionals are not doing their job either. I've
seen webpages at international Banking websites which are horrenduous
from about any/every web-programming+web-authoring angle possible,
including this never-ending recourse to nested tables.

Now you are using right judgement technique. You appear to have some sort of
method or set of checklists, and make decisions accordingly. That is good.
That is what authors & publishers should be doing.

Poor techniques, bad techniques, wrong techniques like nested tables
bring flaws, limitations, problems, headaches in several areas and that
is regardless of who is the web author, his webpage purposes, goals,
regardless of how frequent such technique is used elsewhere.

The method I use has both technical & project criteria. When judging the use
of simple layout tables, they are often seen to be an effective way of
handling a particular project. (I use checklists based on OPENframework, so
the technical qualities are: availability, usability, performance, security,
and potential for change. The project criteria are cost, risk, and time).

[snip]

I mentioned the arguments against nested tables before and several
times. I get tired out of it.

They can be effective. The main problem I have found with them is that in some
cases they don't linearise well for a speaking browser. Special care is needed
there.

[snip]

Strictly speaking, yes, they are different topics. But these often are
present in the same webpages. The common bond is absence of HTML
knowledge, absence of any sensible webpage design instruction and
frantic WYSIWYG motivations + visual-results-is-what-matters-period
goals. That's typical of amateur websites overall.

But that doesn't mean they are all bad! After all, images and text are *also*
often present in the same webpages, and that doesn't make those bad!

<center>: deprecated
<font>: deprecated and known to cause problems
(v)align in table row, cells (except col and colgroup): deprecated
<spacer>: invalid, wrong, error
&nbps;: use padding instead of 20 &nbsp;
<img src="spacer.gif">: even MacroMedia has a tutorial against mindless
use of that.
{
addendum: Btw, I just recall that MacroMedia had a tutorial on table
design and how it negatively affect webpages! I once mentioned it in a
newsgroup... dunno if it was in alt.html.
}

If you are making an argument about the advantages that all authors might get
from knowing more about HTML, fine. But they are not an argument for not using
any particular one of them, whether tables or images. Those cases have to be
made individually. And I would certainly advise *against* "mindless usage of
tables". I think all of these techniques should be used with some thought.

Well then we agree on this.

It

wouldn't be hard to find bad pages that appear to make "mindless use of CSS"!

That too is a problem, a phenomenon which has appeared. One can now see
a css file with 40 class names, unneeded declarations, over-coding
manners, no use of inheritance, no combination, etc.. There is such a
thing as tag soup and now css declarations soup. It's basically the
results of an absence of knowledge/understanding on how to code CSS.

[snip]

You won't convince


That was not my point. I say these people loving table-designs and
nested tables usually are in the same bag of people relying on <font>,
<center>, align and valign used everywhere, &nbsp; users, etc...
Table-design users and nested-tabled-design users are people who after
years and years of coding never upgraded their skills, never opened a
book, never went to read a tutorial on sound webpage design, etc..

An over-generalisation, of course!

Maybe I have generalized here. I say I've seen (and still see) a lot of
webpages with nested tables very often using the rest of bad markup code
or weak/bad design coding techniques I mentioned.

DU

 

[Barry Pearson]

DU wrote: [snip]

The fact that one can use tables and css in valid strict mode does
not per se mean that such usage is a correct and justified webpage
design decision.

But it can be. This is for the author & publisher to judge, based on
their objectives.

In a very wide majority of cases, tables and css in valid strict mode
is rare, very rare on the web. In a very wide majority of cases on
the web, nested tables, no doctype decl., <center>, <font>, &nbsp;,
<img src="spacer.gif"> anywhere/everywhere etc... are the frequent
choices of amateurs and so-called professionals.

True. But what is your message here?

If you want authors to put more thought into what they deliver, and avoid
those worst excesses, then we agree. My own target is valid 4.01 Strict, and I
have perhaps 1200-1300 separately-authored pages on the web now published to
that standard. (I doubt if they all validate! But I don't know of failures.
Most of them are in the sites identified by my sig, and I would welcome
feedback on what doesn't validate, so that I can remove the root-causes).

But don't condemn layout tables by association. A simple layout table of
perhaps 1-row & 3-columns with the main properties controlled by CSS is benign
compared with most of what is published on the web. If it is HTML 3.2 that you
really object to, make that clear.

[snip]

You're talking about box model now. Not tables.
Yes, that is a browser bug affecting a good chunk of people who are
still using that 5+ year old browser. This single bug deserves to be
addressed. And, at the same time, this single bug should not be an
excuse for not triggering MSIE 6 into standards compliant rendering
mode where that bug is fixed.

We agree. I use 4.01 Strict long-doctype throughout, and so have to deal with
IE 5 by hacks & kludges & work-arounds. But I think that is harder, not
easier! I develop CSS to 2 standards in parallel, standards-mode &
quirks-model.

Sometimes I have had to accept defeat & resort to a simple table. The problem
has then gone away. Tables are much easier for achieving cross-browser
effectiveness.

[snip]

Of course, so-called professionals are not doing their job either.
I've seen webpages at international Banking websites which are
horrenduous from about any/every web-programming+web-authoring angle
possible, including this never-ending recourse to nested tables.

I still haven't seen a good argument against nested tables. I think they can
be very effective.

[snip]

<center>: deprecated

Yup! But - I actually think this is (or "align="center"") is the main problem
with 4.01 Strict, because of IE 5's failure to handle to { margin: auto }. It
has caused me more trouble converting from Transitional to Strict than any
other issue.

<font>: deprecated and known to cause problems
Yup!

(v)align in table row, cells (except col and colgroup): deprecated

Not true. "valign" exists in Strict. ("align" doesn't, of course).
http://www.w3.org/TR/html401/index/attributes.html

<spacer>: invalid, wrong, error
&nbps;: use padding instead of 20 &nbsp;

Chuckle! I failed to solve an IE 5 box-problem using any CSS property that I
knew of, and ended up with 4 &nbsp;s. See:
http://www.barry.pearson.name/articles/templates/

<img src="spacer.gif">: even MacroMedia has a tutorial against
mindless use of that.

But what about *mindful* use of it? It can be effective. After all, you only
need 1 image, of less than 60 bytes, which will be cached, and you can use it
to stop table cells reducing below your design concepts.

[snip]

It

That too is a problem, a phenomenon which has appeared. One can now
see a css file with 40 class names, unneeded declarations, over-coding
manners, no use of inheritance, no combination, etc.. There is such a
thing as tag soup and now css declarations soup. It's basically the
results of an absence of knowledge/understanding on how to code CSS.

Indeed. What we are really talking about is lack of experience / knowledge /
skill. (Although what is the problem with 40 class names? For a complex site
with a few 100 pages of all sorts of content, that is probably a good number).

[snip]

Maybe I have generalized here. I say I've seen (and still see) a lot
of webpages with nested tables very often using the rest of bad
markup code or weak/bad design coding techniques I mentioned.

True. So have I. But I have also seen lots of bad uses of CSS. I think it is
easier to mis-use CSS than to mis-use HTML. If someone is publishing bad HTML,
are they likely to switch to publishing both good HTML & good CSS in short
time?

The planet's experts switched fully to exploiting advanced CSS for everything.
But that doesn't mean it is appropriate for all the 99% of other authors.
There are lots of things that the best 1% do that the rest of us would perhaps
be better off avoiding.

I think it is sad that the discussion has become so polarised, instead of
experts helping the non-experts improve what they do without criticising them
for "sin" such as non-approved use of tables.