grid structures: TABLE/TR/TD vs. DIV

#61

Deciding to do something for the good of humanity,
<phil-news-nospam (AT) ipal (DOT) net> declared in
comp.infosystems.www.authoring.stylesheets:

Quote:

If you look more closely at the source you'll see that the list of links
is NOT structured in a table.

He never said it was. He was simply using it as another example of you
using non-semantic markup, similar to your use of tables.

Quote:

An early version DID use UL/LI, but that never came out right. That MAY
be tweakable today, but some things like the bullet size don't seem to
be adjustable.

Not AFAIK (they tend to adjust with the font size but can't be resized
independently), but you can certainly remove the bullets altogether and
e.g. use an image instead.

Quote:

So for now, they are just a list formed in lines with BR.

Which isn't really a list at all.

--
Mark Parnell
My Usenet is improved; yours could be too:
http://blinkynet.net/comp/uip5.html

#62

phil-news-nospam (AT) ipal (DOT) net wrote:

Quote:

On Wed, 03 May 2006 23:50:16 +0200 Johannes Koch <koch (AT) w3development (DOT) de> wrote:
| If you have tabular data, use table, caption, col, colgroup, thead,
| tfoot, tbody, tr, th, td. If you don't have tabular data, use
| appropriate markup. Additionally, if you want the non-tabular data to be
| styled like a grid (equal height etc.), then use the CSS table model.

In another followup you weren't saying this. Now you are. I don't get
what this flip flop is.

Where can you quote me?

Quote:

What do you think the "appropriate markup" is for non-tabular data that
needs to have the same rigid structure as a table?

I'm not talking about "rigid structure as a table". I try to explain to
you what the CSS table presentation model is about in contrast to the
HTML table model. CSS is not about structure. It's about presentation.

Quote:

| E.g. DocBook defines an element called 'simplelist'
| (<http://www.docbook.org/tdg/en/html/simplelist.html>), which may be
| presented as a grid:
|
| apple banana bread cherry
| hazelnut mango orange pear
| potato tomato
|
| This is not really tabular. What is it that mango has in common with
| banana and tomato that differs from hazelnut, orange and pear? What OTOH
| does mango have in common with hazelnut, orange and pear that differs
| from banana and tomato? There are no row and column relations. It's just
| a 2-dimensional presentation of a 1-dimensional list.

That data could just as easily come out as:

apple banana bread cherry hazelnut
mango orange pear potato tomato

or as:

apple banana bread
cherry hazelnut mango
orange pear potato
tomato

Of course, it can.

Quote:

This example is not what I have been talking about.

I chose this example to explain to you the difference between tabular
data and non-tabular data that someone wants to present in a grid way.

Quote:

But I'll talking about it briefly, anyway. I'd like to have a COLUMN
orientation version of that, which would come out like this:
[...]
apple hazelnut potato
banana mango tomato
bread orange
cherry pear

There are some things where this would work better, such as a list of
files in a folder/directory. But it would be style ... something to
decide how to present. Does CSS have a way to say to list stuff this
way? In case someone doesn't see what I'm showing, just look at the
alphabetical sequence of these "food items".

I don't think, CSS currently has a way to do this. Neither has HTML. The
HTML table model is row-oriented. So the table's serialization would not
represent the alphabetical order.

--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

#63

On Thu, 4 May 2006 15:24:10 +1000 Mark Parnell <webmaster (AT) clarkecomputers (DOT) com.au> wrote:

Quote:

Deciding to do something for the good of humanity,
phil-news-nospam (AT) ipal (DOT) net> declared in
comp.infosystems.www.authoring.stylesheets:

But I'll talking about it briefly, anyway. I'd like to have a COLUMN
orientation version of that, which would come out like this:
snip
There are some things where this would work better, such as a list of
files in a folder/directory. But it would be style ... something to
decide how to present. Does CSS have a way to say to list stuff this
way?

CSS3 does/will.
http://www.w3.org/TR/2005/WD-css3-multicol-20051215/

Sounds good. I look forward to it. Any chance Firefox has advance
support to try it out?

--
-----------------------------------------------------------------------------

Quote:

Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
(first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------

#64

On Thu, 4 May 2006 15:53:29 +1000 Mark Parnell <webmaster (AT) clarkecomputers (DOT) com.au> wrote:

Quote:

Deciding to do something for the good of humanity,
phil-news-nospam (AT) ipal (DOT) net> declared in
comp.infosystems.www.authoring.stylesheets:

If you look more closely at the source you'll see that the list of links
is NOT structured in a table.

He never said it was. He was simply using it as another example of you
using non-semantic markup, similar to your use of tables.

So he's shifting off topic and trying to address the person instead of
the issue. That's not the first time he's done so. Well, at least he
isn't doing so in an insulting/attack manner (as some people I've seen
are want to do). But I think he needs to stay _on_ topic for 2 reasons.
One is that it can get confusing when the deviation is made. And two,
he hasn't really addressed the TABLE/TR/TD issue adequately. Merely
saying that I'm not using the semantics means he expects me to use some
other means, but only makes vague references to what those are, without
being specific. I think he needs to be specific because that's the only
way I can pin point _his_ misunderstanding of what _I_ am trying to do.

Quote:

An early version DID use UL/LI, but that never came out right. That MAY
be tweakable today, but some things like the bullet size don't seem to
be adjustable.

Not AFAIK (they tend to adjust with the font size but can't be resized
independently), but you can certainly remove the bullets altogether and
e.g. use an image instead.

I don't want to use an image there. I want something very tiny. The dash
did the job just fine.

Quote:

So for now, they are just a list formed in lines with BR.

Which isn't really a list at all.

My "semantics of a list" does not require a bullet. I would call such a
thing a "bulleted list". That's not so much of a departure from an ordered
list that gets numbered. I see the choice of bullet, or numbers, or nothing
at all, a presentation issue, anyway. But I can't see where CSS gives me
those choices just yet. Maybe in CSS3?

OK, for semantics purposes, I'll call the list of links "not a list".
Then I won't use UL/LI. Or would it be better to just accept that the
semantics really is a list, but that available stylings are inadequate
for now?

--
-----------------------------------------------------------------------------

Quote:

Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
(first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------

#65

On Thu, 04 May 2006 10:08:09 +0200 Johannes Koch <koch (AT) w3development (DOT) de> wrote:

Quote:

phil-news-nospam (AT) ipal (DOT) net wrote:

On Wed, 03 May 2006 23:50:16 +0200 Johannes Koch <koch (AT) w3development (DOT) de> wrote:
| If you have tabular data, use table, caption, col, colgroup, thead,
| tfoot, tbody, tr, th, td. If you don't have tabular data, use
| appropriate markup. Additionally, if you want the non-tabular data to be
| styled like a grid (equal height etc.), then use the CSS table model.

In another followup you weren't saying this. Now you are. I don't get
what this flip flop is.

Where can you quote me?

In Message-ID: <4459273d$0$11086$892e7fe2 (AT) authen (DOT) yellow.readfreenews.net>
All those short answers.

Quote:

What do you think the "appropriate markup" is for non-tabular data that
needs to have the same rigid structure as a table?

I'm not talking about "rigid structure as a table". I try to explain to
you what the CSS table presentation model is about in contrast to the
HTML table model. CSS is not about structure. It's about presentation.

But I want the rigid structure. If CSS is not about structure, then that
goal should not attempt to use CSS.

Quote:

| E.g. DocBook defines an element called 'simplelist'
| (<http://www.docbook.org/tdg/en/html/simplelist.html>), which may be
| presented as a grid:
|
| apple banana bread cherry
| hazelnut mango orange pear
| potato tomato
|
| This is not really tabular. What is it that mango has in common with
| banana and tomato that differs from hazelnut, orange and pear? What OTOH
| does mango have in common with hazelnut, orange and pear that differs
| from banana and tomato? There are no row and column relations. It's just
| a 2-dimensional presentation of a 1-dimensional list.

That data could just as easily come out as:

apple banana bread cherry hazelnut
mango orange pear potato tomato

or as:

apple banana bread
cherry hazelnut mango
orange pear potato
tomato

Of course, it can.

Though that is not what I want in my 2-D structures.

Quote:

This example is not what I have been talking about.

I chose this example to explain to you the difference between tabular
data and non-tabular data that someone wants to present in a grid way.

But I'll talking about it briefly, anyway. I'd like to have a COLUMN
orientation version of that, which would come out like this:
[...]
apple hazelnut potato
banana mango tomato
bread orange
cherry pear

There are some things where this would work better, such as a list of
files in a folder/directory. But it would be style ... something to
decide how to present. Does CSS have a way to say to list stuff this
way? In case someone doesn't see what I'm showing, just look at the
alphabetical sequence of these "food items".

I don't think, CSS currently has a way to do this. Neither has HTML. The
HTML table model is row-oriented. So the table's serialization would not
represent the alphabetical order.

So for 1-D lists I want presented in that form, I'll have to wait for CSS3.
In the mean time, there is no way to really get it.

But for 2-D structures, I can put it together with TABLE/TR/TD since the
position of everything would be known by the content producer/generator.

--
-----------------------------------------------------------------------------

Quote:

Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
(first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------

#66

phil-news-nospam (AT) ipal (DOT) net wrote:

Quote:

On Thu, 04 May 2006 10:08:09 +0200 Johannes Koch <koch (AT) w3development (DOT) de> wrote:
| phil-news-nospam (AT) ipal (DOT) net wrote:
|
|> On Wed, 03 May 2006 23:50:16 +0200 Johannes Koch <koch (AT) w3development (DOT) de> wrote:
|> | If you have tabular data, use table, caption, col, colgroup, thead,
|> | tfoot, tbody, tr, th, td. If you don't have tabular data, use
|> | appropriate markup. Additionally, if you want the non-tabular data to be
|> | styled like a grid (equal height etc.), then use the CSS table model.
|
|> In another followup you weren't saying this. Now you are. I don't get
|> what this flip flop is.
|
| Where can you quote me?

In Message-ID: <4459273d$0$11086$892e7fe2 (AT) authen (DOT) yellow.readfreenews.net
All those short answers.

You said:
And a table is a structure. Of course its presentation can be styled,
too.

I responded:
Yes.

You said:
So for the structure, I should use HTML. Then for the appearance use
CSS. That's what I thought all along.

I responded:
Yes

You said:
And I can change how table/tr/td presented, too.
But I still use table/tr/td to define the structure.

I responded:
Yes

Now, why is that flip flop?
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

#67

<phil-news-nospam (AT) ipal (DOT) net> kirjoitti
viestissä:e3cgq812j6f (AT) news3 (DOT) newsguy.com...

<snip>

Quote:

So he's shifting off topic and trying to address the person instead of
the issue. That's not the first time he's done so.

Not true. My point is that most of the time in _your examples_ you are NOT
using semantically meaningful elements for the things you do. That's all. I
don't see point of you trying to stick using table to define LAYOUT. Because
that's what you keep doing. It might be hard to unlearn thinking in table
way, but it's worth it.

Even in latest drop shadow thing you keep using table to create layout
structure.

<snip>

Quote:

But I think he needs to stay _on_ topic for 2 reasons.
One is that it can get confusing when the deviation is made. And two,
he hasn't really addressed the TABLE/TR/TD issue adequately.

I am saying you use table to position things, like your columns.

http://www.kolumbus.fi/ace/ng/boxes.html is quick mock up without tables. I
have no idea where it works because I didn't really test it that much
though...

Quote:

Merely
saying that I'm not using the semantics means he expects me to use some
other means, but only makes vague references to what those are, without
being specific. I think he needs to be specific because that's the only
way I can pin point _his_ misunderstanding of what _I_ am trying to do.

How does your ROWS and colums relate in tables, what relation that data in
there has?

For example first thing in your page, you are using TABLE to position
elements. Meaning you use TABLE to position a heading of your page and
google ads (that I have turned off, only saw those when looked in IE).

On main part of page you use again TABLE to create three columns. Again to
make a LAYOUT. And when you look inside those three tables cells, well,
what you know. More tables.. etc. You are not using elements that have
semantical purpose for things. Like lists (of those links) are inside tables
and just text you use <BR> to split in lines. Etc.

And yes, I know you have said this page is not new, so, as I look things,
now is yout chance to "fix" things like not anymore using tables for
position things or create layout structures.

Quote:

|> An early version DID use UL/LI, but that never came out right. That
MAY
|> be tweakable today, but some things like the bullet size don't seem to
|> be adjustable.
|
| Not AFAIK (they tend to adjust with the font size but can't be resized
| independently), but you can certainly remove the bullets altogether and
| e.g. use an image instead.

I don't want to use an image there. I want something very tiny. The dash
did the job just fine.

then use that in either text or

li:before
{
content: "-";
}

That don't work IE6 or earlier though. Though if you'd use TINY image on LI
background positioned left, it would suit too.

Quote:

|> So for now, they are just a list formed in lines with BR.
|
| Which isn't really a list at all.

My "semantics of a list" does not require a bullet.

then use list-style-type: none;

Quote:

I would call such a
thing a "bulleted list". That's not so much of a departure from an
ordered
list that gets numbered. I see the choice of bullet, or numbers, or
nothing
at all, a presentation issue, anyway. But I can't see where CSS gives me
those choices just yet. Maybe in CSS3?

li
{
list-style-type: none;
}

etc?

<snip>

#68

On Thu, 04 May 2006 12:19:00 +0200 Johannes Koch <koch (AT) w3development (DOT) de> wrote:

Quote:

phil-news-nospam (AT) ipal (DOT) net wrote:

On Thu, 04 May 2006 10:08:09 +0200 Johannes Koch <koch (AT) w3development (DOT) de> wrote:
| phil-news-nospam (AT) ipal (DOT) net wrote:
|
|> On Wed, 03 May 2006 23:50:16 +0200 Johannes Koch <koch (AT) w3development (DOT) de> wrote:
|> | If you have tabular data, use table, caption, col, colgroup, thead,
|> | tfoot, tbody, tr, th, td. If you don't have tabular data, use
|> | appropriate markup. Additionally, if you want the non-tabular data to be
|> | styled like a grid (equal height etc.), then use the CSS table model.
|
|> In another followup you weren't saying this. Now you are. I don't get
|> what this flip flop is.
|
| Where can you quote me?

In Message-ID: <4459273d$0$11086$892e7fe2 (AT) authen (DOT) yellow.readfreenews.net
All those short answers.

You said:
And a table is a structure. Of course its presentation can be styled,
too.

I responded:
Yes.

You said:
So for the structure, I should use HTML. Then for the appearance use
CSS. That's what I thought all along.

I responded:
Yes

You said:
And I can change how table/tr/td presented, too.
But I still use table/tr/td to define the structure.

I responded:
Yes

Now, why is that flip flop?

You said in a previous post:

If you have tabular data, use table, caption, col, colgroup, thead,
tfoot, tbody, tr, th, td. If you don't have tabular data, use
appropriate markup. Additionally, if you want the non-tabular data to be
styled like a grid (equal height etc.), then use the CSS table model.

I don't know about equal height bit, though that would be expected in a
grid structure. The "data" I have is blocks of text. It's not what people
refer to as "tabular data" (like you might find in a spreadsheat as one
person described it). Instead, it is a grid organization of sections of
data, pretty forcing a specific set of columns. But all the semantics are
still the same as what TABLE/TR/TD and friends provide, and not what any
other method provides (certainly not float:left). So unless your definition
of "tabular data" doesn't follow the norm, this does come across as a
flip-flop. But looking over all your postings, it certain does seem you
may have a different definition of things like "tabular data".

--
-----------------------------------------------------------------------------

Quote:

Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
(first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------

#69

On Thu, 4 May 2006 22:30:09 +0300 "W?rm" <nomailstodragon (AT) north (DOT) invalid> wrote:

Quote:

phil-news-nospam (AT) ipal (DOT) net> kirjoitti
viestiss?:e3cgq812j6f (AT) news3 (DOT) newsguy.com...

snip

So he's shifting off topic and trying to address the person instead of
the issue. That's not the first time he's done so.

Not true. My point is that most of the time in _your examples_ you are NOT
using semantically meaningful elements for the things you do. That's all. I
don't see point of you trying to stick using table to define LAYOUT. Because
that's what you keep doing. It might be hard to unlearn thinking in table
way, but it's worth it.

I don't see _anyone_ doing any layout that gets what I want to have
who uses anything but tables. People have suggested things before and
it did not work (not same semantics ... stuff like rightmost column
falls down to left side, which is unacceptable).

Quote:

Even in latest drop shadow thing you keep using table to create layout
structure.

And so far, it takes that to ensure it works.

Quote:

But I think he needs to stay _on_ topic for 2 reasons.
One is that it can get confusing when the deviation is made. And two,
he hasn't really addressed the TABLE/TR/TD issue adequately.

I am saying you use table to position things, like your columns.

http://www.kolumbus.fi/ace/ng/boxes.html is quick mock up without tables. I
have no idea where it works because I didn't really test it that much
though...

Some issues exist:

1. Text falls outside of these boxes, but does not with tables.
Maybe that's another property that table/tr/td defaults to
that you could add.

2. The content producer (that does not produce the CSS) decides how
many columns of data there are (it's the content the user selects).

3. There's no savings here. That's been touted as _one_ reason to
use CSS. But I don't see it. You have as many elements as I would
just named different, and with classes.

I've been doing styles now with selectors like:

..foo
..foo>*
..foo>*>*
..foo>*>*>*

to handle each level of element to select. I suppose that could work
whether the elements involved are TABLE/TR/TD or DIV/DIV/DIV and only
need a class on the outmost one. Seems to work.

Quote:

Merely
saying that I'm not using the semantics means he expects me to use some
other means, but only makes vague references to what those are, without
being specific. I think he needs to be specific because that's the only
way I can pin point _his_ misunderstanding of what _I_ am trying to do.

How does your ROWS and colums relate in tables, what relation that data in
there has?

That depends one which things I'm doing. Where there are multiple rows,
each item (cell) needs to be under the others of the same column. Where
there are not, it's basically just one row of N columns to stop flow of
blocks onto the row below.

Quote:

For example first thing in your page, you are using TABLE to position
elements. Meaning you use TABLE to position a heading of your page and
google ads (that I have turned off, only saw those when looked in IE).

On main part of page you use again TABLE to create three columns. Again to
make a LAYOUT. And when you look inside those three tables cells, well,
what you know. More tables.. etc. You are not using elements that have
semantical purpose for things. Like lists (of those links) are inside tables
and just text you use <BR> to split in lines. Etc.

Don't count the tables used to structure the drop shadow. That I know is
not what tables is for. Semantically, the drop shadows are not content,
just style, so ideally I should be able to do that in CSS. Unfortunately,
even this can't be done just in CSS. CSS needs more element laters to be
in the content to accomplish it.

Quote:

And yes, I know you have said this page is not new, so, as I look things,
now is yout chance to "fix" things like not anymore using tables for
position things or create layout structures.

Which is what I am working on. The drop shadows I'm going to do in CSS as
much as I can (but I still have to put 2 extra layers of DIVs in to do
stationary drop shadows, and 4 extra layers to do saluting drop shadoows
where the page rises up ... one of those layers to prevent a situation
where the salute can oscillate when the point is positioned where the
movement pulls the object out from under the pointer, then it no longer
is hovering and it comes back, then it is hovering again, over and over.

But As I said earlier, I don't see the gain in using 3 different elements
for 3 elements I already use. But the real point here is, if you can do
exactly what TABLE/TR/TD does with DIV/DIV/DIV then you've also shown that
having TABLE/TR/TD in HTML is unnecessary (and I would expect to see you
urge that they be depricated from the standard).

Quote:

|> An early version DID use UL/LI, but that never came out right. That
MAY
|> be tweakable today, but some things like the bullet size don't seem to
|> be adjustable.
|
| Not AFAIK (they tend to adjust with the font size but can't be resized
| independently), but you can certainly remove the bullets altogether and
| e.g. use an image instead.

I don't want to use an image there. I want something very tiny. The dash
did the job just fine.

then use that in either text or

li:before
{
content: "-";
}

That don't work IE6 or earlier though. Though if you'd use TINY image on LI
background positioned left, it would suit too.

|> So for now, they are just a list formed in lines with BR.
|
| Which isn't really a list at all.

My "semantics of a list" does not require a bullet.

then use list-style-type: none;

OK.

Quote:

I would call such a
thing a "bulleted list". That's not so much of a departure from an
ordered
list that gets numbered. I see the choice of bullet, or numbers, or
nothing
at all, a presentation issue, anyway. But I can't see where CSS gives me
those choices just yet. Maybe in CSS3?

li
{
list-style-type: none;
}

I missed that one. But I'm still focusing my work on other aspect of the
design right now. This is generated HTML, so I've got to get all aspects
of the coding just right on the context of the coming variations in content.

--
-----------------------------------------------------------------------------

Quote:

Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
(first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------

#70

Deciding to do something for the good of humanity,
<phil-news-nospam (AT) ipal (DOT) net> declared in
comp.infosystems.www.authoring.stylesheets:

Quote:

I don't want to use an image there. I want something very tiny.

So use a tiny image. ;-)

Quote:

The dash
did the job just fine.

As Wyrm said, just put the dash in the text as you are now, or add it
with CSS (with the caveat that IE doesn't support it).

Quote:

My "semantics of a list" does not require a bullet.

Well, really you want a bullet that looks like a dash instead of a disc.

Quote:

That's not so much of a departure from an ordered
list that gets numbered. I see the choice of bullet, or numbers, or nothing
at all, a presentation issue, anyway.

The actual style of the bullet or number is certainly a presentation
issue, yes.

However there is a semantic difference between bullets and numbers, i.e.
an unordered list and an ordered list - in the former, the order of the
list items is irrelevant, in the latter, the order does matter. A recipe
is a prime example - the list of ingredients can be in any order, but
the steps in the method need to be in the correct order.

Though you could style an unordered list with numbers (or an ordered
list with glyphs) if you really wanted to.

Quote:

But I can't see where CSS gives me
those choices just yet.

The bullet style can be set with list-style-type, though a dash is not
one of the options.

Quote:

Maybe in CSS3?

Looks like it - according to the current draft, list-style-type will
include "hyphen".
http://www.w3.org/TR/2002/WD-css3-li...021107/#glyphs

--
Mark Parnell
My Usenet is improved; yours could be too:
http://blinkynet.net/comp/uip5.html