Re: grid structures: TABLE/TR/TD vs. DIV

phil-news-nospam@xxxxxxxx wrote:

On Fri, 05 May 2006 08:10:01 +0100 Steve Pugh <steve@xxxxxxxx> wrote:

| Consider your blocks of text that you want to arrange in a grid. Now
| take the block of text that's at the intersection of the third row and
| the second column. What does that fact that it's at that intersection
| _mean_?

That can depend. It might be more important that it is in the second
column.

So you can swap the items in the third row, second column and fifth
rowm second column, without changing the meaning of the page?

That's almost certaibly not a data table and hence should not be
marked up with HTML table elements.

| In a table it means something. e.g. it means that it's the printer
| sales figure for France (row) in May 2005 (column); or that the black
| queen is on square C6 (which is why I think the chessboard is a valid
| table).
|
| But it just means that this block of text is in the third row and the
| second column, then there are no table semantics. And hence HTML
| tables should not be used, but CSS display: table-* can be used to
| give the appearance a table like grid effect.

I saw a demonstration of display: table-* that did not do the job.
Maybe that demonstration was defective and you can provide a better
one?

I'd need to know in which way it "did not do the job".

| It's all about the semantics. A table has semantics whereby any piece
| of content belongs to a row and column and that belonging has a set
| meaning. A 'grid' just has the same appearance but none of the
| semantics.

I've found more than one kind of semantics for a grid.

A grid has no semantics.

One demo page
I was showed an invisible grid with thumbnail pictures. When the size
of the displayable area was shrunk, the object on the right moved to
the next lower row and on the left. For some kinds of semantics this
would be fine (and I've done stuff like that, too). But for others it
is not.

If it's just an image gallery then in terms of semantics that's not a
problem. In terms of layout it might not match the designer's vision
and then it becomes an issue of usability v. design fidelity in the
edge case or users with narrow browser windows.

| One way to decide whether your data belongs in a table or not is to
| consider whether every row and column could be given a heading, i.e.
| could you include a <th> for each row and column?

In some cases they could be. Or it could be implied and not actually
shown (which I think you intended to include by your choice of the word
"could").

Or by the bit a little later where I say "It's not always necessary to
then go and put these headings in the page (though it's usually a very
good idea to do so)"

The important thing is that if it's a table then at least one, and
often both, of rows or columns must have some sort of easily labelled
relationship.

| One that will be meaningful, so that if an aural browser read out
| [heading for row 3, heading for column 2, content of cell at
| intersection of row 3 and column 2] it would make sense.
|
| It's not always necessary to then go and put these headings in the
| page (though it's usually a very good idea to do so) but if you don't
| have any headings for your rows or columns then there's a good chance
| that semantically you don't have a data table and hence you should be
| looking at CSS tables not HTML tables.

However, what I ahve in mind right now needs to have the layout semantics
of TABLE/TR/TD.

"Layout semantics". That doesn't really make sense. Some semantics
demand a particular layout (though for most data tables you can rotate
by 90 degrees - i.e. swap rows and columns - and maintain the
semantics) and in general the layout may give visual hints towards the
underlying semantics (unless the author has done something stupid like
make all of H1 - H6 appear the same) but the semantics and the
presentation are different things.

I've seen some examples that correct the flow problem
(e.g. they made the right column stay at the right)

For a table, where the data in a row must stay in a row otherwise the
meaning is distorted, that is essential. For a layout where the
meaning is the same but the presntation is different that is totally
optional.

but they had other
issues which I don't know can be corrected (in part because I have seen
that problem in a _lot_ of web pages, so I worry that it could be an issue
of CSS).

What is this other problem?

| Of course this is somewhat academic as IE6 doesn't support CSS tables,
| so if your design really demands a grid then you must either abuse
| HTML tables or change the design.

For a long time I avoided CSS altogether because of the browser upgrade
barrier. Firefox has managed to break that barrier because:
1. It seems to be a very compliant implementation
2. It's portable (Linux, BSD, Unix, Mac, and Windows)
3. It didn't bloat too much in relation to machine capability of the day
Basically, it means I feel good about recommending to everyone that they
use Firefox. Had IE also met all these requirements for just Windows, and
Firefox not been ported to Windows, I could have accepted recommending IE
for Windows users and Firefox for everyone else. But at least there is a
browser I can recommend (and it happens to be the same one for all).

I would largely agree (I use Opera myself and the same points can be
said about that browser). However, IE is still at least 80% of the
population, so it can not be ignored. Otherwise CSS tables would be a
semantics neutral layout grid solution.

Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@xxxxxxxx> <http://steve.pugh.net/>
.

Relevant Pages

  • Re: grid structures: TABLE/TR/TD vs. DIV
    ... |>| Consider your blocks of text that you want to arrange in a grid. ... But until I see a way to make it work correctly in CSS, ... then there are no table semantics. ... And hence HTML ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: grid structures: TABLE/TR/TD vs. DIV
    ... Because the WWW is media independent and if a certain exact ... What does your grid look like in an aural browser? ... | semantics, and semantics are never about presentation so the first ... | appropriate HTML to convey those semantics, and then we can apply CSS ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: grid structures: TABLE/TR/TD vs. DIV
    ... What does your grid look like in an aural browser? ... And this rule applies whether it's a TABLE element in HTML or CSS tables? ... |>| semantics, and semantics are never about presentation so the first ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: grid structures: TABLE/TR/TD vs. DIV
    ... If you have tabular data, use table, caption, col, colgroup, thead, ... styled like a grid, then use the CSS table model. ... then there are no table semantics. ... consider whether every row and column could be given a heading, ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: works with IE but not Firefox
    ... You're trying to control something in 2 dimensions simultaneously. ... cope easily with resizing windows. ... If you want 2d control of positioning, then this is a "grid" layout ... Grid layouts are fashionable with graphic designers, ...
    (comp.infosystems.www.authoring.stylesheets)