How to do a <table> with <div> tag

[Toby Austin]

I'm trying to replace <table>s with <div>s as much as possible.
However, I can't figure out how to do the following…

<table>
<tr>
<td valign="top" width="100%">some data that will 'stretch'</td>
<td valign="top" width="300">some data that won't 'stetch'</td>
</tr>
</table>

Anyone?

TIA,
Toby Austin

[Barry Pearson]

Ashmodai wrote:

Barry Pearson scribbled something along the lines of:

[snip]

If you use HTML 3.2, feel free to use layout tables, otherwise use
them for what the standard explicitly permits. [snip]

Authors are completely free to use them to lay out complex data, with or
without semantic relationships, in rows & columns. And they can do so in HTML
4.01 Strict. Who, on this planet, can stop them? What technique can detect
whether there are semantic relationships, and do anything to stop people
browsing if their isn't? Who would want to?

What matters are the consequences of doing so. Until you realise that this is
what it comes down to, you are not saying anything that is useful to
publishers & authors.

[snip] I suggest you read the page below. You will find that things were
not as you believe they were:
"A brief history of tables"
http://www.barry.pearson.name/articl...es/history.htm

I read it and I read some other parts of your site too. I also read
the claim the image layout you use would only be possible with three
divs and I don't agree.
http://www.barry.pearson.name/photog...99_09_08_3.htm

This is your code:
<div class="outer">
<div class="middle">
<div class="inner">
<h1><img src="ch99_09_08_3.jpg" height="617" alt="Buildings in Pudong
New Area, Shanghai, China" width="700"></h1>
</div>
</div>
</div>
Which is insane, because you use three divs and a block element for
the simply border effect.

No. I used three divs and a block element to separate content from
presentation. I experimented with borders before settling on the current ones,
and I am currently considering changing the borders again via the CSS. I can
now make complex borders just by changing the CSS. I judged that 3 divs would
give me sufficient flexibility for whatever I may want in future. (There are
probably still things I can't do, but I judged that it was unlikely that I
would ever want to do them. And if I do, I will just have to do some "find &
replaces").
Try using this:
<div class="border">
<h1><img src="ch99_09_08_3.jpg" height="617" alt="Buildings in Pudong
New Area, Shanghai, China" width="700"></h1>
</div class="border"> As you can see I've dropped the pointless two divs.
The point is that you only need to apply an outset border style to the
.border div and an inset border style to the h1 element.
Simply set a margin for the h1 or a padding for the div. If you want
another space between the h1 and the image, apply a margin or padding
on either of them.
And how would you apply really complex borders just with CSS? Have a look at
the following:
http://www.csszengarden.com/
You will see that, in order to provide potential flexibility, there are extra
divs & spans at the end of the document ready in case they are needed. That is
how experts sometimes provide themselves with sufficient flexibility, without
locking their first layout concept into the mark-up.

[snip] Please use a definition list for the image info. It is quite obvious a
definition list fits the purpose better than a table here.
No it isn't. Last October I tried it with a definition list, and posted the
result to uk.net.web.authoring to ask for comments. I came to the conclusion
that a table was better:
Definition list version:
http://www.barry.pearson.name/articl..._tableless.htm
Table version of the above:
http://www.barry.pearson.name/articl...94_14_25_3.htm

Definition list is logically poor mark-up for this purpose. Remember that the
2nd thing on each line is not a definition of the first thing, it is an answer
to the first thing. There is (inconclusive) discussion of this type of thing
on the web. What *actually* decided it was that someone who wasn't using CSS
thought the default rendering of the table version was better.
If you read into the CSS spec a little you might also find a sane way
to do the page info table on the bottom without a table element.
See the "definition list" above. I also did that last October, and decided
against it. It was touch & go. In a template I am developing for publishing
academic papers, I actually *do* float the bits into place. See the following.
(Work in progress. I'm currently debating whether some of my <p>s (in the
header & footer blocks) should be something else).
http://www.barry.pearson.name/papers/value_chain/
http://www.barry.pearson.name/assets/style_paper.css

I do a lot of experiments with various approaches, then choose from a variety.
For example, see the following. There are about 15 versions of the 5-box
3-column layout, using tables of various types, floating, absolute
positioning, iframes, objects, frames, and various combinations of these. I
did these last year to draw conclusions about when these different approaches
might be valuable. I never got round to making them pixel-perfect, because I
didn't need to for the purpose.
http://www.barry.pearson.name/articl..._5_3/index.htm

Since you appear to think I don't know much about CSS, you may care to look at
the templates, and their CSS, that I developed after doing the above
experiments:
http://www.barry.pearson.name/articles/templates/
http://www.barry.pearson.name/articl...ra_effects.htm
http://www.barry.pearson.name/assets/style_article.css

[snip] Also note browsers will support tag soup for a long time, that means
they support even worse things than non-semantic markup.
So what? My target is valid HTML 4.01 Strict. I don't care about 3.2 or
Transitional recommendations, although I haven't yet converted all my
Transitional pages across. (I've done about half, but the rest will be much
easier).

[snip]

And does it define "tabular information" in a way that would enable
any web technology to behave differently for tabular information
versus any other sort? No! Anyone could mark-up whatever they like
as a table, look you right in the eye and say "this is tabular
information", and you would be totally impotent to do anything about
it. This suggests that the concept of a layout table exists in your
mind, and the minds of a few other people, but may not exist in the
*real* world!

Common sense dictates what can and cannot be tabular information.
There's nothing which stricly is tabular information, it's just a
question of whether it can be expressed within the sementics provided
by a table.

In other words, it is a matter of opinion. I once tried to work out what HTML
for supporting strict semantic dimensions would look like. You should be able
to find my suggestions via the Google Groups archive. I'm pretty sure they
wouldn't look like table mark-up, and neither would they be called "table". I
suspect they would have called "array".

[snip] Well, you wouldn't mark up an image or a table as a paragraph. Why
would you mark up a paragraph as a two-cell table then (other than
just for presentational purposes)?
Of course I might mark-up an image as a paragraph, or perhaps a header! In
fact, I often do. (Have a look at my photograph pages, above, or my "A brief
history of tables" page. Look at the <h1> in each case).

[snip] You are free to write all you want to write, but you should not use
languages in a way different to how they are meant to be used.
If you want layout tables, please go ahead and write your pages
according to the HTML 3.2 standard or the HTML+ discussion document
even. If you don't like either, make your own language and call it
"HTML
4.01 + Layout Tables" or whatever you want to call it.
No. I choose to call it "HTML 4.01 Strict", with the standard DTD, and
validate it. Which, of course, I can do. (My CSS validates at W3C too).

[snip] Layout tables CAN be tables. They mustn't. They are if they carry the
semantic relations of a table. If they don't, then not.
In your opinion, which you are entitled to. And anyone else is entitled to use
layout tables, as long as they accept the consequences. (Such as never winning
the "purist mark-up of the year" award).

[snip] I have a peaceful suggestion tho.

We apparently agree that layout tables are tables in the
presentational sense. That is, they look table-ish. We also might
agree that a table is a table if its elements have a semantic
relationship which is like the one of table elements.

Could we therefore conclude that layout tables -- although their
validity can legally be questioned because the W3C's working groups
contradict each other there a little -- are tables in the HTML 4.01
(or XHTML for that matter) sense (or 'have the table nature'
::snikers::) only if they are used according to their semantics,
whether they (also) lay out a website or not?
No we can't agree that, because it isn't true.
I'm not saying you are essentially wrong. I'm saying neither of us
essentially right, but I still insist that layout tables should
(looking at the direction the recs are going and the semantic web
activity) be avoided where possible (i.e. where not essential for
backwards compatibility or other reasons like avoiding excessive
DIVitis) and slowly abandoned once CSS reaches a (widely supported)
state in which the same layout can easily be archieved without them.
Do we agree enough to stop this nonsense there?

[snip]

We can probably agree one thing. That when we have CSS3 Columns Module, &
perhaps xFrames, and full browser support for these, people will find it far
better to use these than layout tables. They will do so, not because they will
be prevented from using layout tables, but because they have something they
prefer to use.

Until then, they are a useful technique to have in the toolkit, to be used
where they are the most cost-effective approach.

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/

[Neal]

On Sun, 18 Apr 2004 10:13:36 +0100, Barry Pearson
<ne**@childsupportanalysis.co.uk> wrote:

Neal wrote:

On Sun, 18 Apr 2004 00:49:24 +0100, Barry Pearson
<ne**@childsupportanalysis.co.uk> wrote: [snip]

You haven't made a single point that refutes my statement "Right from
their start in about 1993, tables were intended, inter alia, for laying
out complex material in rows & columns".

Because that statement is so vague and basically true no one can
truthfully refute it.

You are on the way!

I sure am.
It isn't vague - it is specific enough that it could in
principle be falsified on various grounds.
.... though we haven't been able to, have we Barry?
(It isn't an
accident that the evidence supports it! I constructed that statement
after
searching for early, and later, statements about what tables were
intended
for).
Hmm. I posted quite a bit in my last post about what tables are for - but
you didn't seem interested in refuting that, as it kind of blows up your
whol;e little theory.

That's why I append the statement to say "Table markup was intended for
laying out complex TABULAR material in rows and columns." You were
shockingly mum about that.
In a complex topic, and especially one where there are huge differences
of
opinion, a well-recognised approach is to establish a "baseline" of
things
that can simply be accepted by all.
Sure. Like what sensibly belongs in markup which reads <p> (clearly, a
paragraph), or <img> (clearly, an image) or <table> (clearly, a table).
Does us no good to re-define the paragraph or image. A text file as the
src of a img tag would be ignorant of the "baseline", hmm?

How about complex, but non-tabular, data in a table? Doesn't that go
beyond what can be accepted under a banner like "table"?
Then the discussion can focus on the areas
of difference. My statement above was intended to be part of such a
baseline -
something where everyone could say "we all know that, now let's talk
about
what we don't agree on".
That's why I am extending your statement.
My whole page "A brief history of tables"
.... is low in poly-unsaturated fat, free for kids, yada yada yada.

There do not appear to be any such problems. They are not deprecated.
(You can
use a layout table in valid XHTML 1.1).
You can use a valid table markup, yes. The hardware cannot determine
whether it is layout or tabular. But the user can.
(Interestingly, using blockquote to indent text *is* explicitly
deprecated in
one part of the HTML 4.01 recommendation! Now, what does that *formally*
mean?
What will happen in future?)

You're referring to
http://www.w3.org/TR/html401/struct/...def-BLOCKQUOTE - the last
sentence in the section. It formally means that since there is a preferred
method of duplicating this indented effect, that markup is not to be used
for this purpose. If you do use <blockquote> to indent text, it will still
validate under HTML Strict, but it will be technically incorrect markup.

Similarly, tables have been used for layout, but at present there is no
preferred way to lay out pages which can exactly duplicate table layout.
Therefore, there can be no statement of deprecation of layout tables.
There is "should use style sheets" instead.

However, their not having deprecated table markup for layout purposes is
not, then, an advocacy of their suitability. W3C never intended
<blockquote> to be used to indent text in general. It was, and still is,
meant as markup for a specific type of content - a block-level quote.
Similarly, W3C never intended <table> to be used for layout tables. It
was, and still is, meant as markup for a specific type of content -
tabular data of whatever complexity.

Barry, you've offered nothing to disprove my statement that "Table markup
was intended for laying out complex TABULAR material in rows and columns."

[Neal]

Barry Pearson wrote:

Ashmodai wrote:

Layout tables CAN be tables. They mustn't. They are if they carry the
semantic relations of a table. If they don't, then not.

In your opinion, which you are entitled to.

How is the DEFINITION of a word an opinion, Mr. Pearson? Have you
re-defined "table" for the English-speaking world???

In every textbook, on every magazine, "table" MEANS that data has common
traits with its column-mates and row-mates. Are you throwing the whole
print history of tables out into the alley here?

If I apply <h1> to a paragraph of text, have I made that text a
first-level heading? Can now whole pages be <h1>? Heading pages!

In fact, Barry, this is better than <p> markup with style. <h1> is
accessible, Google will pay attention to <h1> elements. My heading pages
will revolutionalize authoring, championing accessibility and ease of use.

Plus - nowhere in the specs does it say "Authors should not use <h1> to
mark up the whole content, they should instead use style sheets." So it's
OK! I could even point out that, since its inception, <h1> has always been
intended for marking up text as large bold letters.

I'm, of course, being intentionally ludicrous. No one would argue that a
heading markup element should be used for anything other than a heading -
and not my "heading page" either, but the generally accepted meaning oif
the English word "heading".

[Barry Pearson]

Neal wrote:

Barry Pearson wrote:

Ashmodai wrote:

Layout tables CAN be tables. They mustn't. They are if they carry
the semantic relations of a table. If they don't, then not.

In your opinion, which you are entitled to.

How is the DEFINITION of a word an opinion, Mr. Pearson? Have you
re-defined "table" for the English-speaking world???

[snip]

What matters here is what the specification defines.

Just imagine if people referred to a dictionary to find what "packet" meant
when they were working on a packet-switched protocol, instead of simply seeing
what the specification allowed/disallowed!

However, if you want to see a variety of definitions of table, see:
http://tinyurl.com/27qz4

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/

[Barry Pearson]

Neal wrote:

On Sun, 18 Apr 2004 10:13:36 +0100, Barry Pearson
<ne**@childsupportanalysis.co.uk> wrote:

[snip] You can use a valid table markup, yes. The hardware cannot determine
whether it is layout or tabular. But the user can.
That's OK, then. This is a matter between publishers, authors, and users. If
users object, they can go elsewhere, or take the publisher to court. Let it
compete in the marketplace, or the courts. In recent UK research, use of
tables was not in the list of problems caused for disabled people by web
sites, so I doubt whether this is about to go to court in the UK. As for the
marketplace - Amazon & eBay & Google must be quaking in their shoes.

[snip] Barry, you've offered nothing to disprove my statement that "Table
markup was intended for laying out complex TABULAR material in rows
and columns."

As far as I can tell, "tabular" is typically defined in terms of "table".
*Whatever* information you arrange in a table is tabular information *by
definition*.
http://www.hyperdictionary.com/dictionary/tabular
http://www.yourdictionary.net/tabular_array.html
http://www.yourdictionary.net/tabular.html

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/

[Brian]

Barry Pearson wrote:

That's OK, then. This is a matter between publishers, authors, and
users.
But, as this is an authoring group, we're concerned principally with
good authoring practice.
As far as I can tell, "tabular" is typically defined in terms of
"table". *Whatever* information you arrange in a table is tabular
information *by definition*.

Uh huh. And now, here's some Latin for you:

petitio principii

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/

[Barry Pearson]

Brian wrote:

Barry Pearson wrote:

That's OK, then. This is a matter between publishers, authors, and
users.

But, as this is an authoring group, we're concerned principally with
good authoring practice.

And how is "good authoring practice" judged?

Simple.

The objective of a website is to communicate with the audience. Everything
else is a means to that end. Something that helps this communication is likely
to be "good authoring practice". Something that doesn't help this possibly
isn't. So evaluate the contribution towards "communication with the audience".

As far as I can tell, "tabular" is typically defined in terms of
"table". *Whatever* information you arrange in a table is tabular
information *by definition*.

Uh huh. And now, here's some Latin for you:

petitio principii

Precisely! That is exactly where anti-table-layout people often fail! They
assume they are right, for example they assume that table-layout is wrong, and
then they judge arguments on that basis. Just look how silly some of those
arguments are. They say that tables should only be used for "tabular data".
But they forget that they haven't got a good definition of "tabular data", and
perhaps the best definition of it is "data in a table"!

To counter this fallacy, it is vitally important to suspend judgement, and let
the evidence decide. In other words:

- Decide what the judgement criteria are. I have said above that these should
be based on the objectives of websites. (Communication with the audience).
Others may have different views. At least we can discuss the judgement
criteria. Obviously, without useful judgement criteria, dialogue & debate will
be fruitless.

- Start without a view about whether or not table-layout is right or wrong. It
would obviously be invalid (and falling foul of this logical fallacy) to
assume that (for example) table layout shouldn't be used unless there wasn't
an altenative. Or that it *should* be used! Both are wrong starting points.

- Then evaluate various techniques against their ability to meet those
objectives. I personally use a very systematic method & architecture based
approach to evaluation. Others may use different approaches. A quick example
of the sort of checklists I use can be seen at the following. It isn't
specifically about websites, but shows how I favour a rigorous analytical
approach.
http://www.barry.pearson.name/papers...checklists.htm

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/

[Ashmodai]

Binary four to you, Barry.

I'm sick and tired of talking to a brick wall.
If you feel you are the only sane person on Earth, just start a goddamn
cult.

If anybody wants to get a sane answer to this question, please go ahead
and ask this at ww******@w3.org .

I do not intend to discuss this topic any further on this NG as long as
all I get is ridculous counter-arguments along the lines of "Data is
spelled with an A followed by a T, the same letters can be found in the
word Layout, therefore Layout is Data" or whatever.

Stop preaching your interpretation of the book and ask the guys who
wrote it.

Art and poetic literature would be a lot saner if the "specialists"
followed that advice as well instead of going ahead and try to find a
relation between the color red and some kind of suppressed homosexuality
of the artist.
--
Alan Plum, WAD/WD, Mushroom Cloud Productions
http://www.mushroom-cloud.com/

[Brian]

Barry Pearson wrote:

Brian wrote:

Barry Pearson wrote:

As far as I can tell, "tabular" is typically defined in terms of
"table". *Whatever* information you arrange in a table is tabular
information *by definition*.

petitio principii

Precisely! That is exactly where anti-table-layout people often fail!

Well, we have to admit, he's an awfully *good* troll.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/

[Neal]

(My ISP really sucks...)

"Barry Pearson" <ne**@childsupportanalysis.co.uk> wrote in message news:<o1xgc.1213$rI4.794@newsfe1-win>...

Neal wrote:

Barry, you've offered nothing to disprove my statement that "Table
markup was intended for laying out complex TABULAR material in rows
and columns."

As far as I can tell, "tabular" is typically defined in terms of "table".
*Whatever* information you arrange in a table is tabular information *by
definition*.
http://www.hyperdictionary.com/dictionary/tabular
http://www.yourdictionary.net/tabular_array.html
http://www.yourdictionary.net/tabular.html

Would you argue that whatever appears in <p> markup must by definition
be an appropriate paragraph?

Would you argue that whatever appears in <h1> markup must by
definition be an appropriate first-level heading?

Would you argue that whatever appears in <blockquote> markup must by
definition be an appropriate blockquote?

Then how the hell can you argue that whatever appears in <table>
markup must by definition be an appropriate table?

Either you are smoking some weird shit or something, but you
apparently have no clue what you are saying.

It is an accepted standard that a table is for comparing various
entities on a number of common traits. For example, the candidates for
an office can get a row each, and the columns might be headed (or not)
Name, Party, Experience, Criminal Record, Shoe size, etc. Even the
periodic table is set up in columns to associate the data by the
element's characteristics, and in rows to associate the number of
shells.

Tables are for comparing data. Pure and simple.

When you enter page sections into a table, they bear no row or column
relationships other than that they all belong to the olio that the
page happens to be. There is no comparison of data, there is simply
the misuse of a specifically designed and specifically NAMED type of
markup to make your little webpage prettier.

Row- and column-relationship to compare and contrast data - that is
the bar that must be cleared for ME to consider something to be
tabular data.

Your error, Barry, is that you never seen to realize that they called
it <table> for a reason. They could have easily called it <grid> or
<layout>. They did not. By calling it <table> it is distinct from just
any grid-like formation. By calling it <table> the markup is therefore
meant for the comparison of data - however complex that data might be
- by virtue of the individual table cells' row and column
relationships.

[Barry Pearson]

Ashmodai wrote:

Binary four to you, Barry.

I'm sick and tired of talking to a brick wall.
If you feel you are the only sane person on Earth, just start a
goddamn cult.

[snip]

Ponder the fact that layout tables are the dominant layout technique on this
planet, and have been for most of the last decade. And that they are
demonstrably very succesful at making pages that comunicate with the audience.
I have guestimated that perhaps 99% or pages on the web, and perhaps 99% of
new pages published each day, use table layout. Nearly all the web sites that
are recognised as successful (Amazon, eBay, BBC, etc) use layout tables.

I am not trying to convert you & Brian & Neal, etc, to use table-layout! I
would then have to use them all the time myself, wouldn't I? And I don't.

My position is that simple layout tables are a reasonable technique for web
authors to have in their toolkits, to evaluate and use where appropriate. An
unremarkable position - indeed, obvious to many, perhaps most, professional
web authors. So I respond mainly where I think relatively inexperienced people
may be mislead by extreme propositions - either way.

Your position appears to be that they are *not* reasonable. That position
obviously can't be sustained on the grounds that they don't work! So it is
being sustained on much narrower grounds, of little or no relevance to
publishers, users, and most authors.

Of course you *feel* you are talking to a brick wall - but what you are
actually talking to is someone who has examined the available material, where
I can identify it, in detail, and published conclusions drawn from it. I would
guess my pages link to about 100 external pages related to this general topic.
If you publish you own interpretation of the facts, I would be happy to link
to it. I have made similar offers to various people a number of times.

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/

[Barry Pearson]

Neal wrote:

"Barry Pearson" <ne**@childsupportanalysis.co.uk> wrote in message
news:<o1xgc.1213$rI4.794@newsfe1-win>...

Neal wrote:

> Barry, you've offered nothing to disprove my statement that "Table
> markup was intended for laying out complex TABULAR material in rows
> and columns."
As far as I can tell, "tabular" is typically defined in terms of
"table". *Whatever* information you arrange in a table is tabular
information *by definition*.
http://www.hyperdictionary.com/dictionary/tabular
http://www.yourdictionary.net/tabular_array.html
http://www.yourdictionary.net/tabular.html

[snip] Then how the hell can you argue that whatever appears in <table>
markup must by definition be an appropriate table?
See above. What I said was that the definition of "tabular" appears to be
based on whatever is arranged in tables. They weren't my definitions of
"tabular"! I just did a quick search and found these.

*You* are surely the one who said that only tabular information should go into
tables? But I suspect you didn't have in mind the definitions of "tabular"
that I found with that quick search.

[snip] Your error, Barry, is that you never seen to realize that they called
it <table> for a reason. They could have easily called it <grid> or
<layout>. They did not. By calling it <table> it is distinct from just
any grid-like formation. By calling it <table> the markup is therefore
meant for the comparison of data - however complex that data might be
- by virtue of the individual table cells' row and column
relationships.

Chuckle! If it had been to do with semantically-related dimensions, I would
have thought they would have followed the coding-practice of decades and
called it "array". Instead, they used "table", and the only real consistency
in that word across dictionaries is arrangement in rows & columns. And rows &
columns are pretty consistently to do with horizontal & vertical orientation.

Tables in a relational database are an exception to the latter sentence, but
they are probably better qualified when used, because they have special
properties. Those properties make them very different from the needs of HTML.
For example:
http://www.utexas.edu/its/windows/da...ng/rm/rm3.html
Values Are Atomic
Column Values Are of the Same Kind
Each Row is Unique
The Sequence of Columns is Insignificant
The Sequence of Rows is Insignificant
Each Column Has a Unique Name

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/