grid structures: TABLE/TR/TD vs. DIV

[phil-news-nospam]

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

I'm finding that by using DIV, it still involves the same number of
elements in the HTML to get everything just right. When you consider
the class attribute on the DIV elements, there's not much size savings
anymore for using DIV.

There are other disadvantages to not using TABLE/TR/TD, such as the
lack of ability to merge cells, and keeping rows and columns aligned
with each other under varying content.

Content should be in HTML and style in CSS. So how is that affected
by whether the HTML markup has TABLE/TR/TD or just DIV.

Note that I am not talking about the use of additional tables and cells
to create stylistic effects in the grid, such as spacing between cells.
This can be done in CSS regardless of whether the elemnts involved are
TABLE/TR/TD or just DIV.

I bet someone has already written "Tables considered harmful". But is
it really justified?

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

[Chris Morris]

ph************* *@ipal.net writes:

On 01 May 2006 12:41:20 +0100 Chris Morris <c.********@dur ham.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.

(and of course there is a solution in another post even given the
restriction of not individually classing table cells)
| Well, when I sketch chessboards out on paper, they end up as a grid
| rather than linearised, which suggests a table. The 2-D relationship
| of the squares and pieces is crucial to understanding the position.

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"
| Whereas if I was writing a news item with a pencil (or for an email) I
| probably wouldn't be so concerned with the layout as long as it was in
| the right 1-D order.
|
| That's not to say a set of news items can't be expressed sensibly in a
| table - it depends how the data for each news item is divided.

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 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)

--
Chris

[Wÿrm]

<ph************ **@ipal.net> kirjoitti
viestissä:e3*** ******@news2.ne wsguy.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.

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.

<snip>

[phil-news-nospam]

On Mon, 01 May 2006 19:29:26 +0100 Steve Pugh <st***@pugh.net > wrote:
| ph************* *@ipal.net wrote:
|>On 01 May 2006 12:41:20 +0100 Chris Morris <c.********@dur ham.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!
| 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.

I think it comes down to whether identifying that specific positions
have specific colors is a matter of content or style or ... layout.
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.

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

[Steve Pugh]

ph************* *@ipal.net wrote:

On Mon, 01 May 2006 19:29:26 +0100 Steve Pugh <st***@pugh.net > wrote:
| ph************* *@ipal.net wrote:
|>On 01 May 2006 12:41:20 +0100 Chris Morris <c.********@dur ham.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 <st***@pugh.net > <http://steve.pugh.net/>

[phil-news-nospam]

On 01 May 2006 22:02:40 +0100 Chris Morris <c.********@dur ham.ac.uk> wrote:
| ph************* *@ipal.net writes:
|> On 01 May 2006 12:41:20 +0100 Chris Morris <c.********@dur ham.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/ |
-----------------------------------------------------------------------------

[phil-news-nospam]

On Tue, 2 May 2006 00:49:04 +0300 "W?rm" <no************ *@north.invalid > wrote:
|
| <ph************ **@ipal.net> kirjoitti
| viestiss?:e3*** ******@news2.ne wsguy.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/ |
-----------------------------------------------------------------------------

[Johannes Koch]

ph************* *@ipal.net wrote:

On Tue, 2 May 2006 00:49:04 +0300 "W?rm" <no************ *@north.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.)

[Wÿrm]

<ph************ **@ipal.net> kirjoitti
viestissä:e3*** ******@news3.ne wsguy.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>

[Chris Sharman]

Steve Pugh wrote:

ph************* *@ipal.net wrote:

On 01 May 2006 12:41:20 +0100 Chris Morris <c.********@dur ham.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

[Alan J. Flavell]

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