grid structures: TABLE/TR/TD vs. DIV

On 01 May 2006 22:02:40 +0100 Chris Morris <c.i.morris (AT) durham (DOT) ac.uk> wrote:

phil-news-nospam (AT) ipal (DOT) net writes:
On 01 May 2006 12:41:20 +0100 Chris Morris <c.i.morris (AT) durham (DOT) ac.uk> wrote:
| Maybe you should use CSS and let people select their own preferred
| chess-board colours with alternative stylesheets.

Fine. Show how.

link rel="stylesheet" href="cbcolours.css?c1=ff0000;c2=000000"
type="text/css"
(where cbcolours.css is a script that parses the colours and returns a
stylesheet, and the above <link> is also generated via scripting)

Use of rel="alternate stylesheet" could let you do it without any
scripting if you used only a few possible colour schemes.

| Well, again, CSS is not going to be more or less 'reliable' than HTML
| at positioning and providing the image (though CSS has more options).

But how well can CSS choose which squares to color? If the browser
supports :first-child then you can color the top and left ones different.

Well, if you were doing it with HTML you'd have to colour each cell
individually anyway, so you don't lose anything by using CSS and you
gain only having to change two values instead of 64 if you decide to
use different colours.

You can be sure that changing the colors in HTML is easy and simple.
It's called substitution in an editor. And if that's not enough, one
can use a variable in PHP.

But that's all beyond the point.

CSS has to know more about the layout than simply a classified set of
elements. It has to know the nesting relationship in so many cases.
That's layout. Why should it be cross mixed in both style and content?

In all likelihood I would color a chessboard with CSS, but not because
it is theoretically the right way, but because it's a practical way.

However, the "CSS people" still often whine about the use of tables
for stuff that needs to be 2-D.

People have different views on what is best expressed 2-D and what is
best expressed 1-D. There's a grey area in which it would work either
way, definitely.

It doesn't help that the occasional person (as seen in the group
archives) interprets "don't use tables for layout" as "don't use
tables" or "don't use tables to lay out data with a relationship
between the rows and columns"

How about something as simple as having a web page divided up into
3 major columns, and NOT wanting the rightmost column to fall down
underneath if the browser width is squeezed?

Tables do work when what is desired is some degree of rigidity.
Floats work great for other things in ways tables could never do.

Within an item, sure, it would basically be 1-D. But when categorizing
items, and ordering them by some priority or date, then you may want a
grid structure. And tables seems nature for it.

I assume you mean something like
table
thead><tr><th>Date</th><th>Title</th><th>Article<th></tr></thead
tbody>...<!-- 1 news article per row -->...</tbody
/table
(exact column headings and even if the <thead> block needs to be
explicitly displayed varying depending on exactly what you're doing,
of course)

I was thinking more along the lines of:

<table>
<thead><tr>
<th>Category 1</th>
<th>Category 2</th>
<th>Category 3</th>
<th>Category 4</th>
</tr></thead>
<tbody><tr>
<td>
Article 1 in Category 1<hr>
Article 2 in Category 1<hr>
Article 3 in Category 1
</td>
<td>
Article 1 in Category 2<hr>
Article 2 in Category 2<hr>
Article 3 in Category 2
</td>
<td>
Article 1 in Category 3<hr>
Article 2 in Category 3<hr>
Article 3 in Category 3<hr>
Article 4 in Category 3
</td>
<td>
Article 1 in Category 4<hr>
Article 2 in Category 4<hr>
Article 3 in Category 4
</td>
</tr></tbody>
</table>

The <hr> between articles in an arbitrary example. In this case I want
the columns all lined up prefectly. But the Nth article in one column
does not need to be exactly beside the Nth article in another column.

I don't think there's anything wrong with that (although if the full
text of the news articles was being included in the table, I'd
probably do it differently unless the full text was very short)

The text can vary since the flow is the full length of the columns.

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

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

On Tue, 2 May 2006 00:49:04 +0300 "W?rm" <nomailstodragon (AT) north (DOT) invalid> wrote:

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

snip

It probably comes down to the fact that my intentions in a grid structure
do match the semantics of a table and tabular data.

If it's tabular data, use table. It's that simple.

I cannot say that it _is_ tabular data. I can say that it needs the
same _behaviour_ as tabular data.

If table is just there to do layout certain way when data is _NOT tabular_,
don't, there are almost certainly better ways to do that layout.

But until I find what better way there is, I'll leave it in a table.
Anyone wanting to urge me to not use a table must not only suggest what
alternative to use, but needs to also verify that the alternative fits
all the needs I have that make the table element a practical choice.

I do know that what a lot of people _think_ a lot of other people intend
with tables can be done with float. For many things it can (examples I
see on pages urging not to use tables show cases where float works fine).
But for many things (they didn't show these ... wonder why) it cannot.

One example is a smaller browser window or large font that pushes cells
off to the next row, thus mangling the grid structure. The examples in
http://www.realworldstyle.com/thumb_float.html
show cells that fall down to the next row. That's not a grid structure.

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

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

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

On Mon, 01 May 2006 19:29:26 +0100 Steve Pugh <steve (AT) pugh (DOT) net> wrote:
| phil-news-nospam (AT) ipal (DOT) net wrote:
|>On 01 May 2006 12:41:20 +0100 Chris Morris <c.i.morris (AT) durham (DOT) ac.uk> wrote:
|
|>| I'm having trouble thinking of a situation where you'd want a
|>| background image of a chessboard (or a background grid in checkerboard
|>| colours with the exact colour crucial) with text and images
|>| superimposed. Could you give a bit more detailed example (with a URL
|>| if you can) of the sort of thing you mean?
|
|>You want to color in CSS. Be my guest. Show how. But show CSS that
|>can be used with any chess board in tables where only the table element
|>has a class on it.
|
| A somewhat artificial restriction but here you go:
|
| http://steve.pugh.net/test/chessboard.html

That's gross!

I aim to please.

The HTML is as elegant a representation of a chessboard as you'll get.
The CSS is overly verbose because of your desire to avoid classes on
everything except the table element.

However, that one "gross" piece of CSS can provide the colouring for
all the chess boards on your site. If you have a chess site that will
be a large number and the saving in filesize over putting the colours
inline in every cell (as HTML or inline CSS) will be noticeable. Ditto
the ease of changing the colours ('cos everyone loves green and white
chessboards on St Patrrick's Day...) or allowing users to choose their
own colour scheme from alternate stylesheets.

With CSS 3 :nth-child selectors the CSS would be much tidier.
http://www.w3.org/TR/css3-selectors/#nth-child-pseudo

Browser support doesn't exist at the moment but you can see how much
more compact the code would be:
http://steve.pugh.net/test/chessboard2.html

| Works in Opera and FireFox and IE7, I presume it will work in Safari.
|
| As in many situations, IE6 and lower are the problem, not the CSS
| spec.
|
| The amount of code can be reduce consideranly if you would allow
| classes to be set on the <tr> elements.

Well, I wanted it to be able to handle whatever size chess board that
happens to be in the HTML. I should have said it in such a way.

Oh well, just move the sizing out of the
table.board th, table.border td {width: 5em; height: 5em; text-align:
center; vertical-align: middle;}
style and into one that uses a different class name. Then you table
can have two class names
e.g. <table class="board thumbnail"> or <table class="board detailed">
with the sizes specified in these second classes.

I think it comes down to whether identifying that specific positions
have specific colors is a matter of content or style or ... layout.

The exact colour values are style - as demonstrated elsewhere in this
thread boards come in different colour combinations and hence there's
the colours used are not intrinsic to the fact that it is a chees
board. So they belong in the CSS.

I've also seen chess boards that do not use two colours - just a grid
pattern. The colours are merely a convenient visual aid and a game of
chess can be played without reference to the colours at all.

But if you are willing to put classes on each table cell then you can
assign colours (and easily reassign them) via a stylesheet without
needing to work with those gross (and IE6 unsupported) adjacent
selectors.

I just don't accept that the dividing line between CSS and HTML is
really at where the theoretical dividing line between style and content
would be.

The fact that a chessboard is an 8x8 grid is structure.

The fact that alternating squares are in some way different could be
considered borderline between structure and style.

The fact that these alternating squares happen to be white and black,
or red and black, or whatever is style.

So use HTML tables; class names; CSS. for those three levels.

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 (AT) pugh (DOT) net> <http://steve.pugh.net/>

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

On Tue, 2 May 2006 00:49:04 +0300 "W?rm" <nomailstodragon (AT) north (DOT) invalid> wrote:
| If it's tabular data, use table. It's that simple.

I cannot say that it _is_ tabular data. I can say that it needs the
same _behaviour_ as tabular data.

Then the HTML table elements would not be appropriate. But you could use
the CSS table stuff. Don't blame CSS for not offering presentation
characteristics you need, when in fact it's some user agent(s) that
lack(s) implementation.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

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

<snip>

I cannot say that it _is_ tabular data. I can say that it needs the
same _behaviour_ as tabular data.

If it's that your linux site (or do I think other person?, it might be very
possible, been up too long and too many beers)...

LIST of links... In one way tabular data, but more closer to list of
links...

So DIV with heading and list of links, three columns split in 3 divs
floated, and in each column those div boxes with heading + list of links...

If I assumed / thought site wrong, well, not up and running at the moment,
more like near requiring resurrection...


<snip>

Steve Pugh wrote:

phil-news-nospam (AT) ipal (DOT) net wrote:
On 01 May 2006 12:41:20 +0100 Chris Morris <c.i.morris (AT) durham (DOT) ac.uk> wrote:

| I'm having trouble thinking of a situation where you'd want a
| background image of a chessboard (or a background grid in checkerboard
| colours with the exact colour crucial) with text and images
| superimposed. Could you give a bit more detailed example (with a URL
| if you can) of the sort of thing you mean?

You want to color in CSS. Be my guest. Show how. But show CSS that
can be used with any chess board in tables where only the table element
has a class on it.

A somewhat artificial restriction but here you go:

http://steve.pugh.net/test/chessboard.html

Works in Opera and FireFox and IE7, I presume it will work in Safari.

As in many situations, IE6 and lower are the problem, not the CSS
spec.

I agree, it's gross.
And anything that doesn't work in ie5/6 is sadly not a viable solution
for www. Commercial reality dictates that pages must work on ie6, and
preferably ie5 too.
What's wrong with classes light & dark (or similar) on the td tags ?

This is a fairly pathological example in any case. It's more common in
my experience to want to colour rows or columns, enabling the classes to
be moved out to tr or col, for more concise html.

Chris

On Tue, 2 May 2006, Chris Sharman wrote:

I agree, it's gross.

Yes, but I found it quite entertaining. I suspect that it's possible
to halve the quantity of CSS without having to work too hard, but
it's still gross..

And anything that doesn't work in ie5/6 is sadly not a viable
solution for www.

In the sense that CSS is optional by design, it "works" to
specification in IE. It's just that IE chooses not to take the
option. No more would the presentation effect be distinguishable on a
speaking browser, after all, nor on any browser with stylesheets
disabled.

However, it's arguable (and has indeed been argued both ways already
on this thread, and I'm not going to say that either standpoint was
wrong) that in this case the cell colour is part of the content,
rather than being merely presentational.

This is a fairly pathological example in any case. It's more common
in my experience to want to colour rows or columns, enabling the
classes to be moved out to tr or col, for more concise html.

Well, it is - but have you found a way *according to specification*
to get your class to propagate from a <col> element to its column
cells?

Cells are not descendants of a col/colgroup element. You can't
usefully write selectors of the form

*WRONG* col.odd row.odd, col.even row.even { something }
*WRONG* col.even row.odd, col.odd row.even { somethingelse }

(Aside - Some browsers propagate more properties from a col/colgroup
element than the specification says they should, but it would be wrong
to rely on that behaviour.)

http://www.w3.org/TR/CSS21/tables.html#q4

Your column colour can only be effective if the rows *and* the cells
specify (or imply) transparent backgrounds. That's fine if all the
rows in a given column are to be the same colour; but it's a bit of a
non-event if you want to make checkerboard patterns.

cheers

"Alan J. Flavell" <flavell (AT) physics (DOT) gla.ac.uk> wrote:

On Tue, 2 May 2006, Chris Sharman wrote:

I agree, it's gross.

Yes, but I found it quite entertaining. I suspect that it's possible
to halve the quantity of CSS without having to work too hard, but
it's still gross..

Hmm, how insulted should I be by everyone calling it gross? :-o

It was a quickly thrown together demo to show that even with the
highly artificial constraint of only setting a class on the table
element CSS could do what was being asked. In reality I would use more
classes and dream about the days when CSS3 :nth-child selectors are
supported.

As for halving the amount of CSS. What did you have in mind? I
considered setting a default cell colour and the over riding that for
particular cells. But as td+td matches the second and subsequent cells
that seemed to be a dead end.

The two sets of colour styles can be combined into one, but that
hardly saves anything as it's the selectors that make the bulk, not
the properties. This would be the way to go if you wanted to make it
so that each of the colours could be changed in just one place.

http://www.w3.org/TR/CSS21/tables.html#q4

Your column colour can only be effective if the rows *and* the cells
specify (or imply) transparent backgrounds. That's fine if all the
rows in a given column are to be the same colour; but it's a bit of a
non-event if you want to make checkerboard patterns.

There's also the fact that background is supported but color is not
which means that any colouring done via columns will break the best
practice rule of setting colour and background together.

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 (AT) pugh (DOT) net> <http://steve.pugh.net/>

On Tue, 2 May 2006, Steve Pugh wrote:

As for halving the amount of CSS. What did you have in mind? I
considered setting a default cell colour and the over riding that for
particular cells.

Something along those lines, indeed.

But as td+td matches the second and subsequent cells
that seemed to be a dead end.

The trick, as far as the rows is concerned, is to note that they all
start with a th.

So th+td matches precisely the first data cell,
th+td+td matches the second, and so on.

You get similar effects with the rows, however, so you need
some way to anchor the sectors which currently say tr+tr and so on.

http://www.w3.org/TR/CSS21/tables.html#q4

Your column colour can only be effective if the rows *and* the
cells specify (or imply) transparent backgrounds. That's fine if
all the rows in a given column are to be the same colour; but it's
a bit of a non-event if you want to make checkerboard patterns.

There's also the fact that background is supported but color is not
which means that any colouring done via columns will break the best
practice rule of setting colour and background together.

True.

Now, here's something odd that I pondered on:

Unicode has two sets of chess pieces, called "white" and "black".
See the set at e.g
http://ppewww.ph.gla.ac.uk/~flavell/...a26.html#x2654
(assuming you have a capable font).

If you exhibit them on a black background, they disappear (not
surprisingly).

If you style a "black" one white, on a black background, then it
looks like a white piece.

Which leaves only the "white" one, styled white, to represent the
black piece on a black background.

http://ppewww.ph.gla.ac.uk/~flavell/tests/chessfun.html

This would surely be confusing content with presentation ;-)

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

Is there really any advantage to using DIV elements with float style
properies, vs. the old method of TABLE and TR and TD?

No, of course not. You might not even need float, as CSS has
table-specific formatting properties too.


The real question is "Is an inflexible rectilinear grid mechanism the
right way to do layout, and particularly fluid layout?". If you
rigidly replicate <table> behaviour with <div>+CSS, then you're still
no better than HTML 2.0 pure-tables.