By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,665 Members | 1,912 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,665 IT Pros & Developers. It's quick & easy.

grid structures: TABLE/TR/TD vs. DIV

P: n/a
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/ |
-----------------------------------------------------------------------------
Apr 30 '06 #1
Share this Question
Share on Google+
117 Replies


P: n/a
On Sun, 30 Apr 2006 08:41:16 +0200, <ph**************@ipal.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?
[ snip ]
I bet someone has already written "Tables considered harmful". But is
it really justified?


This discussion has been done over and over again, in this group and other
www.authoring groups. Go through the archives first and then make up your
mind.
<URL:http://www.google.com/search?q=tableless+design>
<ULR:http://groups.google.com/groups/search?q=no+tables++css+group:comp.infosystems.www .authoring.*+group:alt.html.*>

In short:
- Try to understand what markup is for: it 'tells' browsers and bots and
the like what your content is. So a div is only needed if no other
appropriate element is available (likewise with <span>).
- Tables are for tabular data. Using them for layout purposes is just the
same thing as using blockquote for the left margin, <br> for whitespace
between paragraphs, &nbsp; for padding on inline elements, <h4> for
creating a block of text with a slightly larger, bold font. Just a few
examples. It shows the author doesn't understand markup. It is all about
abusing elements because of there appearance in graphical browsers.

If done properly, in a html page the content is structured and marked up
using meaningful elements. This should give the author already a lot of
'handles' to create the appearance of the page, for every element s/he
uses in the body of the page, including the body element itself, can be
used as a selector in a style sheet.
If some content needs to be treated differently than the standard looks
the author created for the element, it gets a class or maybe an id. If
some content is to be 'physically separated' from the rest of the page,
the author can put it in a containing div and asign a class or id to that
div.

Once an author understands the concept of markup, why it came about in the
first place, how to use it properly, s/he will no longer feel the need for
tables for layout any longer.
--
______PretLetters:
| weblog | http://www.pretletters.net/weblog/weblog.html |
| webontwerp | http://www.pretletters.net/html/webontwerp.html |
|zweefvliegen | http://www.pretletters.net/html/vliegen.html |
Apr 30 '06 #2

P: n/a
On Sun, 30 Apr 2006 09:35:03 +0200 Barbara de Zoete <tr******@pretletters.net> wrote:
| On Sun, 30 Apr 2006 08:41:16 +0200, <ph**************@ipal.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?
|
| [ snip ]
|
|> I bet someone has already written "Tables considered harmful". But is
|> it really justified?
|
| This discussion has been done over and over again, in this group and other
| www.authoring groups. Go through the archives first and then make up your
| mind.
| <URL:http://www.google.com/search?q=tableless+design>
| <ULR:http://groups.google.com/groups/search?q=no+tables++css+group:comp.infosystems.www .authoring.*+group:alt.html.*>
|
| In short:
| - Try to understand what markup is for: it 'tells' browsers and bots and
| the like what your content is. So a div is only needed if no other
| appropriate element is available (likewise with <span>).

Stop with the "try to understand" religion. I'm getting tired of it.
| - Tables are for tabular data. Using them for layout purposes is just the
| same thing as using blockquote for the left margin, <br> for whitespace
| between paragraphs, &nbsp; for padding on inline elements, <h4> for
| creating a block of text with a slightly larger, bold font. Just a few
| examples. It shows the author doesn't understand markup. It is all about
| abusing elements because of there appearance in graphical browsers.

That's all fine, but ...
| If done properly, in a html page the content is structured and marked up
| using meaningful elements. This should give the author already a lot of
| 'handles' to create the appearance of the page, for every element s/he
| uses in the body of the page, including the body element itself, can be
| used as a selector in a style sheet.

While CSS can do quite a lot, and can even do a lot of things that cannot
be done in just HTML, there remains a few things CSS cannot do. So it is
NOT yet time to say that HTML must be pure content.

Just accept the fact that, as good as it is, CSS still needs work!
| If some content needs to be treated differently than the standard looks
| the author created for the element, it gets a class or maybe an id. If
| some content is to be 'physically separated' from the rest of the page,
| the author can put it in a containing div and asign a class or id to that
| div.

I understand the principle. I've understood this for years, even before
CSS was practical enough to even try to use. The issue is NOT about the
understanding of the principle; the issue is that CSS has been growing
up from a state of being totally unusable (e.g. Netscape 3) to being a
royal PiTA (e.g. Netscape 4) to being now quite viable for _most_ things
(Firefox 1.5). But even still, it's not at 100%.

In many cases CSS forces the HTML (which should just be content and nothing
more) to have extra markup just to support style. For example, styling a
page to have some appearance of a grid structure through the use of float
requires _additional_ DIV elements to be added to the content. That
violates the principle of separation of content and style right there. If
CSS "had it right" then I could put some content in _just_ _one_ DIV element
and then you can put ANY style on it that you want, including hover raised
drop shadow effect that so far requires at least 3 layers of DIV elements in
the content to achieve. And that can confuse someone trying to restyle it
to something else.
| Once an author understands the concept of markup, why it came about in the
| first place, how to use it properly, s/he will no longer feel the need for
| tables for layout any longer.

Once you guys understand that CSS does NOT yet do all the things that people
_want_ to do, and _can_ be done with HTML hacks, then we won't see threads
like this and won't have repeated conversations like this.

The drop shadow effect is _better_ done in CSS than with HTML because it
requires lots of "wedges" in the form of extra table cells and transparent
GIF images to accomplish with just HTML. BUT ... it is still NOT RIGHT in
CSS because it _should_ be doable with exactly _one_ DIV element (which can
then be styled as anyone would want).

So ... I'm moving to use CSS for drop shadow effects.

The table grid is NOT _better_ in CSS, yet. There are _two_ reasons for
this. Reason 1 is that the way being promoted now (e.g. float:left) does
not work the same way. That is, not all the same effects are accomplished
with float:left as would be using TABLE/TR/TD. These effects include
syncronized alignment and rigid arrangement. Reason 2 is that, like the
case above for shadows though for different reasons, it still requires the
insertion of extra DIV elements in the content markup (beyond the two layers
that would obviously be needed in any method to distinguish what is to be in
a row and what is to be in a column). And I forgot to count some of the
column and row span features, which float:left can do only in limited ways.

So ... I'm going to stick with certain uses of tables for grid structure.

Please stop with the f*****g annoying "markup and style" religious promotion
and either work towards making CSS better (like maybe a CSS3 that fixes the
issues mentioned), or showing new creative ways to accomplish things that
people have been using HTML hacks for years to do, or just be quiet and take
a seat and watch the events unfold without your influence.

But just STOP ... NOW ... with all the "once authors understand ..." BS.
Get your OWN understanding that CSS just isn't at the 100% level, yet.

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
Apr 30 '06 #3

P: n/a
On Sun, 30 Apr 2006 18:01:46 +0200, <ph**************@ipal.net> wrote:
But just STOP ... NOW ... with all the "once authors understand ..." BS.
Get your OWN understanding that CSS just isn't at the 100% level, yet.


If you know all the answers to your own questions, why the heck do you ask.
--
______PretLetters:
| weblog | http://www.pretletters.net/weblog/weblog.html |
| webontwerp | http://www.pretletters.net/html/webontwerp.html |
|zweefvliegen | http://www.pretletters.net/html/vliegen.html |
Apr 30 '06 #4

P: n/a
On Sun, 30 Apr 2006 18:28:57 +0200 Barbara de Zoete <tr******@pretletters.net> wrote:

| On Sun, 30 Apr 2006 18:01:46 +0200, <ph**************@ipal.net> wrote:
|
|> But just STOP ... NOW ... with all the "once authors understand ..." BS.
|> Get your OWN understanding that CSS just isn't at the 100% level, yet.
|
| If you know all the answers to your own questions, why the heck do you ask.

The issue of TABLE/TR/TD vs. DIV is not a question of "how do I". Instead,
it is a question of "what should we do". And yes, I do know what I believe
is the correct answer: "fix CSS". Of course that takes a long time. One of
the steps necessary to get the end result is to break through all the denial
the community has.

Understanding the _principles_ of content, markup, style, etc., does _not_
automatically make one know all the methods and means to properly use it,
either. So questions I or anyone else asks of the "how do I" variety do
need to be considered without jumping to the religious answer of "if you
just understand ...". Both CSS and HTML, as well as programming languages,
are made up of a number of discrete pieces of syntax and semantics. They
alone give you nothing. Combining things together gives you something that
if well chosen and well combined can be something great.

Maybe the way _I_ understand things is different than the way _you_ understand
them. But that's common; people are different ... people think in different
ways. You and I both have to live with it. For example, I see certain things
as "definitely" content which you might see as style. I presume we would
agree that background colors are style. But for me that isn't a hard and fast
rule. In some cases background colors are _content_. One example is the red
and black colors of a Chess board. Sure, someone could decide to make a Chess
board of another color and such things exist. But these are the traditional
colors people recognize as such. So if I am going to lay out a grid structure
as a Chess board, you can bet I'm going to set the colors in the HTML tags.

And I'm not going to use "float:left" to layout a Chess board, either.

There are other cases where TABLE/TR/TD still beats DIV (and float) to make
a grid structure as desired. I'd rather do it with DIV, but it just isn't
capable, yet, for all that needs to be done. TABLE/TR/TD still works better
for certain things. It seems most everyone agrees tabular data is to be
done that way. But a lot of other things that wouldn't really be called
tabular data still need the same grid structure semantics/effects, which is
not possible with DIV and float (again I say "yet" because I see the potential
to fix this).

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
Apr 30 '06 #5

P: n/a
ph**************@ipal.net wrote:
While CSS can do quite a lot, and can even do a lot of things that cannot
be done in just HTML, there remains a few things CSS cannot do. So it is
NOT yet time to say that HTML must be pure content.

Just accept the fact that, as good as it is, CSS still needs work!


Are you sure, you mean "CSS still needs work"? Not "CSS implementations
need work"? WRT presentation of HTML tables (what I suspect you call
grid), there is really a little stuff (rowspan/colspan) which cannot be
done with CSS.
--
Johannes Koch
Spem in alium nunquam habui praeter in te, Deus Israel.
(Thomas Tallis, 40-part motet)
Apr 30 '06 #6

P: n/a
ph**************@ipal.net writes:
rule. In some cases background colors are _content_. One example
is the red and black colors of a Chess board. Sure, someone could
decide to make a Chess board of another color and such things exist.
But these are the traditional colors people recognize as such. So
Odd, most of the (real) chessboards I've seen are yellow and
black. Maybe it varies from place to place.
if I am going to lay out a grid structure as a Chess board, you can
bet I'm going to set the colors in the HTML tags.
I can't imagine a situation where HTML-based colour setting would be
more reliable than CSS-based colour setting in such a situation, with
modern browsers at least - every graphical browser I know with an
"ignore CSS" option also has some form of "ignore colours" option. If
the colour is truly part of the content then perhaps an image (with
suitable text alternative) is the better way to provide the
information?
And I'm not going to use "float:left" to layout a Chess board, either.
I'd have thought a chess board was certainly tabular data.
There are other cases where TABLE/TR/TD still beats DIV (and float)
to make a grid structure as desired. I'd rather do it with DIV, but
it just isn't capable, yet, for all that needs to be done.
TABLE/TR/TD still works better for certain things. It seems most
everyone agrees tabular data is to be done that way. But a lot of
other things that wouldn't really be called tabular data still need
the same grid structure semantics/effects, which is not possible
with DIV and float (again I say "yet" because I see the potential to
fix this).


Does IE7 support 'position: table-*'? That gives much the same layout
options but doesn't interfere with table-reading mode so much. (Of
course, even if it does, it'll be a couple of years before it's
generally usable)

--
Chris
Apr 30 '06 #7

P: n/a
On 30 Apr 2006 19:26:38 +0100 Chris Morris <c.********@durham.ac.uk> wrote:
| ph**************@ipal.net writes:
|> rule. In some cases background colors are _content_. One example
|> is the red and black colors of a Chess board. Sure, someone could
|> decide to make a Chess board of another color and such things exist.
|> But these are the traditional colors people recognize as such. So
|
| Odd, most of the (real) chessboards I've seen are yellow and
| black. Maybe it varies from place to place.

I've seen a couple like that. But virtually all are red and black.
|> if I am going to lay out a grid structure as a Chess board, you can
|> bet I'm going to set the colors in the HTML tags.
|
| I can't imagine a situation where HTML-based colour setting would be
| more reliable than CSS-based colour setting in such a situation, with
| modern browsers at least - every graphical browser I know with an
| "ignore CSS" option also has some form of "ignore colours" option. If
| the colour is truly part of the content then perhaps an image (with
| suitable text alternative) is the better way to provide the
| information?

So how should the image be done? Don't forget it will be background.
There may be an image and/or text placed over it.
|> And I'm not going to use "float:left" to layout a Chess board, either.
|
| I'd have thought a chess board was certainly tabular data.

It probably comes down to what people see as tabular and not tabular.
When I want to align a set of boxes to hold blocks of text, such as
news items, I tend to want the behaviour TABLE/TR/TD bring, rather
than the behaviour I get with DIV+float.
|> There are other cases where TABLE/TR/TD still beats DIV (and float)
|> to make a grid structure as desired. I'd rather do it with DIV, but
|> it just isn't capable, yet, for all that needs to be done.
|> TABLE/TR/TD still works better for certain things. It seems most
|> everyone agrees tabular data is to be done that way. But a lot of
|> other things that wouldn't really be called tabular data still need
|> the same grid structure semantics/effects, which is not possible
|> with DIV and float (again I say "yet" because I see the potential to
|> fix this).
|
| Does IE7 support 'position: table-*'? That gives much the same layout
| options but doesn't interfere with table-reading mode so much. (Of
| course, even if it does, it'll be a couple of years before it's
| generally usable)

I have no idea. No IE running here of any version right now.

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
May 1 '06 #8

P: n/a
On Sun, 30 Apr 2006 20:12:33 +0200 Johannes Koch <ko**@w3development.de> wrote:
| ph**************@ipal.net wrote:
|> While CSS can do quite a lot, and can even do a lot of things that cannot
|> be done in just HTML, there remains a few things CSS cannot do. So it is
|> NOT yet time to say that HTML must be pure content.
|>
|> Just accept the fact that, as good as it is, CSS still needs work!
|
| Are you sure, you mean "CSS still needs work"? Not "CSS implementations
| need work"? WRT presentation of HTML tables (what I suspect you call
| grid), there is really a little stuff (rowspan/colspan) which cannot be
| done with CSS.

Show me CSS2 coding that will produce tables with the same semantics that
TABLE/TR/TD has, and maybe I could believe it's an implementatuon issue.

For another issue with CSS, take a block of text in a _single_ DIV element
and using CSS only, style that block so it appears with a drop shadow effect
without changing the HTML at all. I had to add extra DIV elements to get it
to work, and found that a couple other people doing the same thing did it
the same way (though I went a step further and added yet another DIV to make
an effect that raised and lowered the shadow effect based on hover). Better
CSS would allow doing anything like that wihtout changing HTML at all. If
the style needs more container context, then CSS should be able to logically
include that.

Here's one of the pages I was experimenting with:
http://phil.ipal.org/usenet/ciwas/20...in-tables.html
Be careful with the top right and bottom left corners as they can result in
the raising/lowering effect oscillating if you position the pointer on the
pixels that move away.

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
May 1 '06 #9

P: n/a

<ph**************@ipal.net> kirjoitti
viestissä:e3*********@news1.newsguy.com...

<snip>
For another issue with CSS, take a block of text in a _single_ DIV element
and using CSS only, style that block so it appears with a drop shadow
effect
without changing the HTML at all.


http://www.kolumbus.fi/ace/ng/box.html

Div with heading and paragraph of text inside. If you add more paragraphs it
needs tweaking though.
May 1 '06 #10

P: n/a
On Mon, 1 May 2006 05:59:50 +0300 "W?rm" <no*************@north.invalid> wrote:
|
| <ph**************@ipal.net> kirjoitti
| viestiss?:e3*********@news1.newsguy.com...
|
| <snip>
|
|> For another issue with CSS, take a block of text in a _single_ DIV element
|> and using CSS only, style that block so it appears with a drop shadow
|> effect
|> without changing the HTML at all.
|
| http://www.kolumbus.fi/ace/ng/box.html
|
| Div with heading and paragraph of text inside. If you add more paragraphs it
| needs tweaking though.

OK, different elements. Usable in the case of just needing those two.
Or maybe just any two. But my point is it's still two elements being
selected for in CSS. One should be able to do it all for one single
element since many other styles can be done that way.

Here's how I think it could be done in CSS. Some purists might whine
that it is, in effect, adding markup in CSS. First, you'd have a property
that specifies a number of virtual containers:

/* WARNING to stray readers - the following is NOT valid CSS */

..mybox {
virtual-containers: 2;
}

/* Then you'd configure them separately as needed: */

..mybox [0] {
background-color: #cccccc;
color: #000000;
margin-bottom: 10px;
}

..mybox [1] {
background-color: #ffffff;
color: inherit;
border: 0;
position: relative;
top: -4px;
left: -4px;
margin: 0;
padding: 0;
}

Then what's inside could be configured any way desired without even any
concern for the fact that it's in something that is being styled with a
drop shadow. The border could be added by the interior elements, if one
is desired, or this can be changed to add one here.

The idea is the markup does not need to be changed just to make a more
complex style. An implemention _may_ actually accomplish it my adding
extra markup in its DOM structure (whatever they prefer as programmers).

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
May 1 '06 #11

P: n/a
ph**************@ipal.net wrote:
Show me CSS2 coding that will produce tables with the same semantics that
TABLE/TR/TD has, and maybe I could believe it's an implementatuon issue.


_Semantics_ are defined by HTML, not CSS: If you have tabular data and
so table semantics are appropriate, use the table element and its
companions. CSS however defines table-like _presentation_
characteristics. See the chapter about tables in the CSS 2(.1) spec.
--
Johannes Koch
Spem in alium nunquam habui praeter in te, Deus Israel.
(Thomas Tallis, 40-part motet)
May 1 '06 #12

P: n/a
On Mon, 1 May 2006, ph**************@ipal.net wrote:
Show me CSS2 coding that will produce tables with the same semantics
that TABLE/TR/TD has, and maybe I could believe it's an
implementatuon issue.


You're not making any kind of sense. The defined semantics of HTML
are what the HTML specification (for all its faults and weaknesses)
defines them to be. They don't change merely by fiddling around with
implementations of CSS.

May 1 '06 #13

P: n/a
ph**************@ipal.net writes:
On 30 Apr 2006 19:26:38 +0100 Chris Morris <c.********@durham.ac.uk> wrote:
| Odd, most of the (real) chessboards I've seen are yellow and
| black. Maybe it varies from place to place.

I've seen a couple like that. But virtually all are red and black.
I'm not sure I've seen any red and black ones.

Maybe you should use CSS and let people select their own preferred
chess-board colours with alternative stylesheets. ;)
|> if I am going to lay out a grid structure as a Chess board, you can
|> bet I'm going to set the colors in the HTML tags.
|
| I can't imagine a situation where HTML-based colour setting would be
| more reliable than CSS-based colour setting in such a situation, with
| modern browsers at least - every graphical browser I know with an
| "ignore CSS" option also has some form of "ignore colours" option. If
| the colour is truly part of the content then perhaps an image (with
| suitable text alternative) is the better way to provide the
| information?

So how should the image be done? Don't forget it will be background.
There may be an image and/or text placed over it.
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).

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?
|> And I'm not going to use "float:left" to layout a Chess board, either.
|
| I'd have thought a chess board was certainly tabular data.

It probably comes down to what people see as tabular and not tabular.
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.
When I want to align a set of boxes to hold blocks of text, such as
news items, I tend to want the behaviour TABLE/TR/TD bring, rather
than the behaviour I get with DIV+float.
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.
| Does IE7 support 'position: table-*'? That gives much the same layout
| options but doesn't interfere with table-reading mode so much. (Of
| course, even if it does, it'll be a couple of years before it's
| generally usable)

I have no idea. No IE running here of any version right now.


Well, if IE is out of the equation, and you only want the grid for
visual presentation, you might as well use position: table-*

--
Chris
May 1 '06 #14

P: n/a
>|> rule. In some cases background colors are _content_. One example
|> is the red and black colors of a Chess board. Sure, someone could | Odd, most of the (real) chessboards I've seen are yellow and
| black. Maybe it varies from place to place. I've seen a couple like that. But virtually all are red and black.


Standard colors are off-white and green and off-white and brown.
Having "black" as the dark color is allowed, but many players feel
that gives too little contrast between the dark pieces and the dark
squares.

From <http://www.fide.com/> in the Info section you can find the FIDE
recommendations for boards:

3. Chess boards

Wood, plastic, cardboard or cloth are recommended as material for
chessboards. The board may also be of stone or marble with
appropriate light and dark colours, provided the Chief Arbiter
finds it acceptable. Natural wood with sufficient contrast, such
as birch, maple or European ash against walnut, teak, beech,
etc., may also be used for boards, which must have a dull or
neutral finish, never shiny.

Combination of colours such as brown, green, or very light tan
and white, cream, off-white ivory, buff, etc., may be used for
the chess squares in addition to natural colours.

Now back to our actual newsgroup topic.
--
NewsGuy.Com 30Gb $9.95 Carry Forward and On Demand Bandwidth
May 1 '06 #15

P: n/a
On Mon, 01 May 2006 10:50:36 +0200 Johannes Koch <ko**@w3development.de> wrote:
| ph**************@ipal.net wrote:
|> Show me CSS2 coding that will produce tables with the same semantics that
|> TABLE/TR/TD has, and maybe I could believe it's an implementatuon issue.
|
| _Semantics_ are defined by HTML, not CSS: If you have tabular data and
| so table semantics are appropriate, use the table element and its
| companions. CSS however defines table-like _presentation_
| characteristics. See the chapter about tables in the CSS 2(.1) spec.

It probably comes down to the fact that my intentions in a grid structure
do match the semantics of a table and tabular data, despite that it may
not appear that way to people that tell me to not use the table element.

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
May 1 '06 #16

P: n/a
On 01 May 2006 12:41:20 +0100 Chris Morris <c.********@durham.ac.uk> wrote:

| ph**************@ipal.net writes:
|> On 30 Apr 2006 19:26:38 +0100 Chris Morris <c.********@durham.ac.uk> wrote:
|> | Odd, most of the (real) chessboards I've seen are yellow and
|> | black. Maybe it varies from place to place.
|>
|> I've seen a couple like that. But virtually all are red and black.
|
| I'm not sure I've seen any red and black ones.
|
| Maybe you should use CSS and let people select their own preferred
| chess-board colours with alternative stylesheets. ;)

Fine. Show how.
|> |> if I am going to lay out a grid structure as a Chess board, you can
|> |> bet I'm going to set the colors in the HTML tags.
|> |
|> | I can't imagine a situation where HTML-based colour setting would be
|> | more reliable than CSS-based colour setting in such a situation, with
|> | modern browsers at least - every graphical browser I know with an
|> | "ignore CSS" option also has some form of "ignore colours" option. If
|> | the colour is truly part of the content then perhaps an image (with
|> | suitable text alternative) is the better way to provide the
|> | information?
|>
|> So how should the image be done? Don't forget it will be background.
|> There may be an image and/or text placed over it.
|
| 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.
| 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.
|> |> And I'm not going to use "float:left" to layout a Chess board, either.
|> |
|> | I'd have thought a chess board was certainly tabular data.
|>
|> It probably comes down to what people see as tabular and not tabular.
|
| 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.
|> When I want to align a set of boxes to hold blocks of text, such as
|> news items, I tend to want the behaviour TABLE/TR/TD bring, rather
|> than the behaviour I get with DIV+float.
|
| 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.
|> | Does IE7 support 'position: table-*'? That gives much the same layout
|> | options but doesn't interfere with table-reading mode so much. (Of
|> | course, even if it does, it'll be a couple of years before it's
|> | generally usable)
|>
|> I have no idea. No IE running here of any version right now.
|
| Well, if IE is out of the equation, and you only want the grid for
| visual presentation, you might as well use position: table-*

The table/tr/td elements are still needed to markup what content goes in
which cell. At that point, it works fine so I don't see the need for a
position property.

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
May 1 '06 #17

P: n/a
On Mon, 1 May 2006 10:14:35 +0100 Alan J. Flavell <fl*****@physics.gla.ac.uk> wrote:
| On Mon, 1 May 2006, ph**************@ipal.net wrote:
|
|> Show me CSS2 coding that will produce tables with the same semantics
|> that TABLE/TR/TD has, and maybe I could believe it's an
|> implementatuon issue.
|
| You're not making any kind of sense. The defined semantics of HTML
| are what the HTML specification (for all its faults and weaknesses)
| defines them to be. They don't change merely by fiddling around with
| implementations of CSS.

Of course it doesn't make sense. It was to get people to think about
the fact that it actually cannot be done (the same way) in CSS2.

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
May 1 '06 #18

P: n/a
ph**************@ipal.net wrote:
On 01 May 2006 12:41:20 +0100 Chris Morris <c.********@durham.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.

The amount of code can be reduce consideranly if you would allow
classes to be set on the <tr> elements.

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/>
May 1 '06 #19

P: n/a
To further the education of mankind, Steve Pugh <st***@pugh.net>
vouchsafed:
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.


Very clever! Simple but sound. I like it.

--
Neredbojias
Infinity has its limits.
May 1 '06 #20

P: n/a
ph**************@ipal.net writes:
On 01 May 2006 12:41:20 +0100 Chris Morris <c.********@durham.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
May 1 '06 #21

P: n/a

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

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>
May 1 '06 #22

P: n/a
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.********@durham.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/ |
-----------------------------------------------------------------------------
May 2 '06 #23

P: n/a
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.********@durham.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/>
May 2 '06 #24

P: n/a
On 01 May 2006 22:02:40 +0100 Chris Morris <c.********@durham.ac.uk> wrote:
| ph**************@ipal.net writes:
|> On 01 May 2006 12:41:20 +0100 Chris Morris <c.********@durham.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/ |
-----------------------------------------------------------------------------
May 2 '06 #25

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

P: n/a
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.)
May 2 '06 #27

P: n/a

<ph**************@ipal.net> kirjoitti
viestissä:e3*********@news3.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>
May 2 '06 #28

P: n/a
Steve Pugh wrote:
ph**************@ipal.net wrote:
On 01 May 2006 12:41:20 +0100 Chris Morris <c.********@durham.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
May 2 '06 #29

P: n/a
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
May 2 '06 #30

P: n/a
"Alan J. Flavell" <fl*****@physics.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 <st***@pugh.net> <http://steve.pugh.net/>
May 2 '06 #31

P: n/a
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 ;-)
May 2 '06 #32

P: n/a

ph**************@ipal.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.

May 2 '06 #33

P: n/a
"Alan J. Flavell" <fl*****@physics.gla.ac.uk> wrote:
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.


Cunning.
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.


tr:first-child+tr perhaps?

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/>
May 2 '06 #34

P: n/a
Steve Pugh <st***@pugh.net> wrote:
"Alan J. Flavell" <fl*****@physics.gla.ac.uk> wrote:
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.


Cunning.
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.


tr:first-child+tr perhaps?


Yep. http://steve.pugh.net/test/chessboard3.html

Still 'gross' though.

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/>
May 2 '06 #35

P: n/a
"W˙rm" <no*************@north.invalid> wrote in message
news:e3**********@phys-news4.kolumbus.fi...

<ph**************@ipal.net> kirjoitti
viestissä:e3*********@news1.newsguy.com...

<snip>
For another issue with CSS, take a block of text in a _single_ DIV
element
and using CSS only, style that block so it appears with a drop shadow
effect
without changing the HTML at all.


http://www.kolumbus.fi/ace/ng/box.html

Div with heading and paragraph of text inside. If you add more paragraphs
it needs tweaking though.


There are two ways of doing this.

The first is the ideal way - but doesn't work in anything due to the use of
:first-child

..mybox
{
width: 200px;
background-color: #c0c0c0;
color: #000000;
margin-bottom: 10px;
}

..mybox > *
{
background-color: #ffffff;
color: inherit;
border: 1px solid #000000;
border-top: none;
position: relative;
top: -4px;
left: -4px;
margin: 0;
padding: 0;
}

..mybox:first-child
{
background-color: #e0e0ff;
border-top: 1px solid #000000;
color: inherit;
}

The second version will work in firefox fine (certainly 1.5, not sure about
1.0), but still not in IE6 (not sure about IE7)

..mybox
{
width: 200px;
background-color: #c0c0c0;
color: #000000;
margin-bottom: 10px;
}

..mybox > *
{
background-color: #e0e0ff;
color: inherit;
border: 1px solid #000000;
position: relative;
top: -4px;
left: -4px;
margin: 0;
padding: 0;
}

..mybox > * + *
{
border-top: none;
background-color: #ffffff;
color: inherit;
}

Still, I think the original link is the best cross browser method available
at the moment, but I just wanted to show how things might be in the brighter
future. :-)

ME
May 2 '06 #36

P: n/a
"Alan J. Flavell" <fl*****@physics.gla.ac.uk> wrote in message
news:Pi*******************************@ppepc87.ph. gla.ac.uk...
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 ;-)


I can't see those characters in my browser (firefox 1.5 on windows server
2003). I just get question marks instead. Is there a way to fix that - eg.
changing fonts?

Anyway, one way round this problem I would think would be to use spans or
divs to contain the chess pieces, and use css content. I would expect it to
work in firefox. I you were able to turn than into an example page showing
all the chess pieces on the chess board in starting places I'd be pretty
impressed.

eg.

_html_

<td><div class="black king"></div></td>

_style (I am only using round brackets () to denote shorthand)_

black king {content: '♚'}

(css for a black square) > black king {content: '♔'; colour: white}
May 2 '06 #37

P: n/a
On Tue, 2 May 2006, Martin Eyles wrote:

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

This would surely be confusing content with presentation ;-)
I can't see those characters in my browser (firefox 1.5 on windows
server 2003). I just get question marks instead. Is there a way to
fix that - eg. changing fonts?


If you have MS Office, or other eligible application, then it's worth
installing Arial Unicode MS from it. SIL Viewglyph, at any rate,
tells me that the glyphs are present there. AFAIK this font still does
not come free with any bare OS, but many MS products have it included.

The glyphs are also present in the shareware unicode font "Code2000"
which a web search should easily find.

Unfortunately I don't really know how to ask the Windows font system
the question "which of my installed fonts contain this specific
Unicode character?". I only know how to browse a given font (e.g with
SIL Viewglyph) and see whether it does or not. At any rate, "Lucida
Sans Unicode", which has a fair character repertoire, and comes as
standard with current Windows OSes, does not contain the chess pieces
(though it does contain the four card suits, in black - U+2660, 3, 5
and 6).

I found, incidentally, that installing Japanese language support (even
though I can't read it) had the side effect of considerably improving
my coverage of mathematical operators and various other symbols.
See e.g http://www.alanwood.net/unicode/fontsbyrange.html#u2600
which may explain it - Windows is presumably installing extra fonts
which just /happen/ also to have improved symbol repertoires.
Anyway, one way round this problem I would think would be to use
spans or divs to contain the chess pieces, and use css content. I
would expect it to work in firefox. I you were able to turn than
into an example page showing all the chess pieces on the chess board
in starting places I'd be pretty impressed.


So would I - but it would be an even *worse* example of confuddling
content with presentation!

cheers

--

The only problem I had with MSN messenger was finding out how to turn it
off. Once that was accomplished, I was a lot happier. - Chris Tolley
May 2 '06 #38

P: n/a
On Tue, 02 May 2006 11:46:58 +0100 Chris Sharman <ch***********@sorry.nospam> wrote:

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

The more common problem I see is in so many examples available online,
the CSS must be coded for a specific number of rows or columns. What
I want is CSS that works just fine regardless of how many rows and/or
columns there are.

And I want CSS that lets me do hover bouncing drop shadows without having
to change the markup to accomodate it. The problem is, all examples I
have seen show extra DIV or other elements added to prove a mechanism to
implement the visual effect style. IMHO, whatever style I want to do
should be appliable to exactly a single element in the markup (for each
such element to which it applies, of course).

I was just looking at online examples of rounded corners. Ewww, more
horrors with large images and size limitations. But I need to spend some
time on trying to better innovate that myself, first, before I say it is
a CSS problem.

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
May 2 '06 #39

P: n/a
On Tue, 02 May 2006 13:31:07 +0100 Steve Pugh <st***@pugh.net> wrote:
| "Alan J. Flavell" <fl*****@physics.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's not an insult. Lots of my (developed long ago) HTML is certainly
quite gross, and recognized as such even back then. I'm looking for
CSS methods to do what I've done in the past in purely HTML, with the
requirement that the end results be at least just as good. I'm not
willing to take even one tiny step backwards to achieve results since
I know I can step back to the (ugly and gross) HTML and still have it.

If your example is gross, but turns out to be the only way to make it
work, then it's a go, anyway. But if there's a better way, we ought
try to find it.
| 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.

Turns out the chess board example was a bad example to begin with.
I should try to think up something else.

But today, I'm playing with rounded corners and seeing what I can do to
get them working in CSS as well as I had them working in just HTML.
Google found me plenty of online examples, but so far all of them seem
to be using elongated images ... e.g. images that include a stretch of
the sides as well, for at least some of them. Some strategies differ,
but it all seems to be yet another case of the stylesheets having to
specify some of the mechanics of layout to achieve a style result.
In other words, I still have to add extra elements to the markup as
the hooks CSS needs.

I think maybe tables will work (in a simpler way, of course) to do this
with CSS as well.

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
May 2 '06 #40

P: n/a
On Tue, 02 May 2006 09:54:54 +0200 Johannes Koch <ko**@w3development.de> wrote:
| 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.

Why would there be 2 different non-depricated mechanisms in the standards
that accomplish exactly the same thing?

"A table of numbers from a spread sheet"
"A table of images" (note, NOT use of tables to mosaic the images together)
"A table of whatever stuff you want to have a table of"

I don't see why different mechanisms have to be used when the concept of
how it is organized is the same regardless of the contents.

I'll use what works. When I want to get a web site done, I'm not going
to be a standards purist when the implementations aren't keeping up.
The "web standards" community for years did little or nothing to help
get browsers usable so the new standards could even be widely used.
Netscape went all to hell in version 4 and until Firefox 1.5, there was
plenty of reason to stay behind in browsers (and for plenty of reasons
beyond the scope of compliance with standards). I asked certain people
who were prominant in the "web standards" community to help by pushing
hard (in a public way) to get browsers fixed. But instead, all they
would do is stress how important web standards were. And that turned
a lot of people off.

Blaming CSS would not be right if the standards provide for a way to do
regardless of what implementations may or may not. Of course it would
be nice to have a list of what features don't work (or work wrong) in
which browsers.

Firefox is available for the major platforms. IE is not. If I have to
tell someone to use another browser, it's going to be Firefox. At least
I now have that option. So the big question is, how well does Firefox
implement CSS? It seems to be working fairly well. Who has IE7 to show
and tell?

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
May 2 '06 #41

P: n/a
On Tue, 2 May 2006 13:27:39 +0300 "W?rm" <no*************@north.invalid> wrote:

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

How to keep the columns from floating down to the bottom when the window
is narrower?

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
May 2 '06 #42

P: n/a
ph**************@ipal.net wrote:
On Tue, 02 May 2006 09:54:54 +0200 Johannes Koch <ko**@w3development.de> wrote:
| 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.

Why would there be 2 different non-depricated mechanisms in the standards
that accomplish exactly the same thing?


Because they are two different things: One (HTML tables) is markup for
tabular data. E.g. it includes the "Table rendering by non-visual user
agents" (HTML 4.01, section 11.4). The other (CSS table presentation
model) is just for presenting content in a certain way (a grid).
--
Johannes Koch
Spem in alium nunquam habui praeter in te, Deus Israel.
(Thomas Tallis, 40-part motet)
May 2 '06 #43

P: n/a
On Tue, 02 May 2006 22:25:17 +0200 Johannes Koch <ko**@w3development.de> wrote:
| ph**************@ipal.net wrote:
|> On Tue, 02 May 2006 09:54:54 +0200 Johannes Koch <ko**@w3development.de> wrote:
|> | 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.
|>
|> Why would there be 2 different non-depricated mechanisms in the standards
|> that accomplish exactly the same thing?
|
| Because they are two different things: One (HTML tables) is markup for
| tabular data. E.g. it includes the "Table rendering by non-visual user
| agents" (HTML 4.01, section 11.4). The other (CSS table presentation
| model) is just for presenting content in a certain way (a grid).

So why not use the CSS table presentation model for the tubular data?
Or is there some difference in the exact semantics of these methods?
Why have two mechanisms that work the same way?

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
May 3 '06 #44

P: n/a

<ph**************@ipal.net> kirjoitti
viestissä:e3*********@news4.newsguy.com...

<snip>
How to keep the columns from floating down to the bottom when the window
is narrower?


Let them float down instead of trying to prevent it, don't make issue from
something that is not. There are ways to prevent it though, but I'd rather
see stuff to adjust to viewport so...
May 3 '06 #45

P: n/a
In article <Pi*******************************@ppepc87.ph.gla. ac.uk>,
Alan J. Flavell <fl*****@physics.gla.ac.uk> wrote:
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.


Not really... It would be nice if IE actually did consider CSS
optional and choose not to take the option. Instead, it chooses to
implement the option incorrectly. That's a totally different thing.

-A
May 3 '06 #46

P: n/a
ph**************@ipal.net wrote:
On Tue, 02 May 2006 22:25:17 +0200 Johannes Koch <ko**@w3development.de> wrote:
| Because they are two different things: One (HTML tables) is markup for
| tabular data. E.g. it includes the "Table rendering by non-visual user
| agents" (HTML 4.01, section 11.4). The other (CSS table presentation
| model) is just for presenting content in a certain way (a grid).

So why not use the CSS table presentation model for the tubular data?


In many browsers the CSS table presentation model _is_ used for
presenting table/tr/td etc. That's the default rendering.

--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)
May 3 '06 #47

P: n/a
ph**************@ipal.net wrote:
Why have two mechanisms that work the same way?


Why is there a strong element in HTML, when CSS offers 'font-weight:
bold'? Same answer.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)
May 3 '06 #48

P: n/a
To further the education of mankind, "W˙rm"
<no*************@north.invalid> vouchsafed:

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

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.


A chessboard grid is not tabular data, it's structured data. There is a
difference.

Here's a mock-up I made using someone's visual example from above. Putting
all the ridiculous artificial restrictions aside, it uses no tables, is
fluid, and works in IE. It, unfortunately, doesn't work in Opera because
of Opera's flawed graphic technology.

http://www.neredbojias.com/zyxix/chess/chss2.html

As I intimated, it's just a prototype, but I think it could be a decent
base for a dynamic chess page.

--
Neredbojias
Infinity has its limits.
May 3 '06 #49

P: n/a

"Neredbojias" <http://www.neredbojias.com/fliam.php?cat=alt.html> kirjoitti
viestissä:Xn*********************************@208. 49.80.251...

<snip>
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.


A chessboard grid is not tabular data, it's structured data. There is a
difference.


And where did I say it is? Incase it escaped you what I meant above.

Translation: (spell it word by word if meaning still happily escapes from
you)

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

And data in it meaning _ANY_ data, not just some silly chess stuff.
May 3 '06 #50

117 Replies

This discussion thread is closed

Replies have been disabled for this discussion.