Class applied to col

emf

unread,

May 17, 2013, 4:01:59 AM5/17/13

to

=============
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
td { width: 8em; }
.yll { background:yellow; text-align:center; }
</style>
</head>
<body>
Table 1
<table>
<tr>
<td>1a</td>
<td class="yll">1b</td>
<td>1c</td>
<td class="yll">1d</td>
</tr>
</table>
Table 2
<table>
<col><col class="yll"><col><col class="yll">
<tr>
<td>1a</td>
<td>1b</td>
<td>1c</td>
<td>1d</td>
</tr>
</table>
</body>
</html>
=============

In the code above there are 2 tables each with 4 columns. In the first
table the class .yll is applied directly to the 2nd and 4th cells. In
the second table I try to apply the class to the 2nd and 4th column
instead. Although, however, the respective cells turn yellow, their text
is not centered, Clearly the code has to be applied to the cells, not
the the columns.

I played with:
col.yll td { background:yellow; text-align:center; }
but that of course doesn't work because the td is not inside the col.

What is the relation of the td to the col, and is there a way to change
the code in the header to make table 2 work?

Thanks,

emf

--
It ain't THAT, babe! - A radical reinterpretation
https://files.nyu.edu/emf202/public/bd/itaintmebabe.html

dorayme

unread,

May 17, 2013, 5:58:56 AM5/17/13

to

In article <kn4o4t$9sb$1...@speranza.aioe.org>, emf <emf...@gmail.com>
wrote:

> td { width: 8em; }
> .yll { background:yellow; text-align:center; }

> <table>
> <tr>
> <td>1a</td>
> <td class="yll">1b</td>
> <td>1c</td>
> <td class="yll">1d</td>
> </tr>
> </table>

> <table>
> <col><col class="yll"><col><col class="yll">
> <tr>
> <td>1a</td>
> <td>1b</td>
> <td>1c</td>
> <td>1d</td>
> </tr>
> </table>

>

> In the code above there are 2 tables each with 4 columns. In the first
> table the class .yll is applied directly to the 2nd and 4th cells. In
> the second table I try to apply the class to the 2nd and 4th column
> instead. Although, however, the respective cells turn yellow, their text
> is not centered, Clearly the code has to be applied to the cells, not
> the the columns.
>
> I played with:
> col.yll td { background:yellow; text-align:center; }
> but that of course doesn't work because the td is not inside the col.
>
> What is the relation of the td to the col, and is there a way to change
> the code in the header to make table 2 work?
>

The styling achievable reliably via the COL element is known to be
restricted to a few things, I think BORDER, BACKGROUND, WIDTH at
least, maybe not much more.

Not that it might be so helpful generally but in your particular case

tr td:first-child + td {text-align:center;}
tr td:first-child + td + td + td {text-align:center;}

should make the second table work by the lever of styling in the head
without adding classes or IDs

--
dorayme

emf

unread,

May 17, 2013, 7:40:31 AM5/17/13

to

I had to add tbody in front so as not to affect the thead cells. It took
me some mental effort to comprehend the code: In the second line

tbody tr td:first-child + td + td

represents the third td in the tbody row "as is", only the last + td is
effective. Interesting. Thanks,

emf

--
Date Calculator with all-purpose JS code
https://files.nyu.edu/emf202/public/js/dateCalculator.html

Jukka K. Korpela

unread,

May 17, 2013, 9:54:23 AM5/17/13

to

2013-05-17 12:58, dorayme wrote:

> The styling achievable reliably via the COL element is known to be
> restricted to a few things, I think BORDER, BACKGROUND, WIDTH at
> least, maybe not much more.

Yes, the point is that you can assign a class to COL and use that class
in CSS, but most properties you set on COL that way have no effect. CSS
is very liberal in a sense: all elements have all properties, and you
can thus set any property on any element, but not all properties affect
all elements. The issue with COL is that it has no children. A table
cell is never a child of a COL, always a a child of a TR.

CSS 2.1 explicitly specifies that only border, background, width, and
visibility properties apply to columns:
http://www.w3.org/TR/CSS2/tables.html#columns

> Not that it might be so helpful generally but in your particular case
>
> tr td:first-child + td {text-align:center;}
> tr td:first-child + td + td + td {text-align:center;}
>
> should make the second table work by the lever of styling in the head
> without adding classes or IDs

Yes, and if you keep the current CSS code that sets text-align on COL
elements, things work on old versions of IE, too. They don't understand
the fancy selectors above, but in compensation, they incorrectly make
cells of a column aligned according to the text-align property set on
COL (this violates the specs, but here it's what we want).

You could simplify the selectors to td:nth-child(2) and td:nth-child(4),
but then you would have a problem with IE 8 (partly solvable e.g. with
Selectivizr.js, but perhaps it's better to use the clumsier selectors,
unless you are styling the 13th column or something).

--
Yucca, http://www.cs.tut.fi/~jkorpela/

dorayme

unread,

May 17, 2013, 6:28:16 PM5/17/13

to

In article <kn54uk$kmr$1...@speranza.aioe.org>, emf <emf...@gmail.com>
wrote:

> On 2013-05-17 05:58 dorayme wrote:
> > In article <kn4o4t$9sb$1...@speranza.aioe.org>, emf <emf...@gmail.com>
> > wrote:

...

> > Not that it might be so helpful generally but in your particular case
> >
> > tr td:first-child + td {text-align:center;}
> > tr td:first-child + td + td + td {text-align:center;}
> >
> > should make the second table work by the lever of styling in the head
> > without adding classes or IDs
>
> I had to add tbody in front so as not to affect the thead cells. It took
> me some mental effort to comprehend the code: In the second line
>
> tbody tr td:first-child + td + td
>
> represents the third td in the tbody row "as is", only the last + td is
> effective. Interesting. Thanks,
>

Not sure why you have to add tbody ... anyway, here is the effect I
thought you wanted:

<http://dorayme.netweaver.com.au/emf.html>

--
dorayme

dorayme

unread,

May 17, 2013, 6:32:37 PM5/17/13

to

In article <kn5cj2$rjc$1...@dont-email.me>,

"Jukka K. Korpela" <jkor...@cs.tut.fi> wrote:

> 2013-05-17 12:58, dorayme wrote:
>
> > The styling achievable reliably via the COL element is known to be
> > restricted to a few things, I think BORDER, BACKGROUND, WIDTH at
> > least, maybe not much more.
>
> Yes, the point is that you can assign a class to COL and use that class
> in CSS, but most properties you set on COL that way have no effect. CSS
> is very liberal in a sense: all elements have all properties, and you
> can thus set any property on any element, but not all properties affect
> all elements. The issue with COL is that it has no children. A table
> cell is never a child of a COL, always a a child of a TR.
>
> CSS 2.1 explicitly specifies that only border, background, width, and
> visibility properties apply to columns:
> http://www.w3.org/TR/CSS2/tables.html#columns
>

Ah yes, VISIBILITY as well, forgot that one. Did I ever tell you of
the marine biology professor in America who complained that his brain
was so crowded that every time there was a new intake of students and
he had to remember a new name, he forgot the name of an important fish.

--
dorayme

Swifty

unread,

May 18, 2013, 2:24:33 AM5/18/13

to

On 17/05/2013 23:28, dorayme wrote:
> here is the effect I thought you wanted:

I'm really interested in this styling, but my understanding of CSS is
quite incomplete...

Am I right in assuming that the <col> tags in Table 2 are
irrelevant/superfluous?

Yes, I know I could test it, but that would mostly increase my knowledge
of browsers differences, rather than increasing my knowledge of CSS.
I'll still run the experiment, though.

[My retirement objectives include: learning more CSS, learning more
Javascript, and learning some C++. However, it's a close race between
the knowledge I'm gaining, and the stuff that is fading away...
On the face of it, this technique seems useful enough to "stick"]

--
Steve Swift
http://www.swiftys.org.uk/

Swifty

unread,

May 18, 2013, 2:46:26 AM5/18/13

to

On 18/05/2013 07:24, Swifty wrote:
> I know I could test it

After my test, I ended up with:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">

td { width: 8em; border: 1px solid;}
tr td:first-child + td {text-align:center;background:yellow}

tr td:first-child + td + td + td

{text-align:center;background:yellow}
</style>
</head>
<body>
<p>Table 2</p>

</body>
</html>

Is there a way to eliminate the duplicate
"{text-align:center;background:yellow}", perhaps by putting that in a
class, and using the class instead of repeating the style?

Swifty

unread,

May 18, 2013, 2:52:12 AM5/18/13

to

On 17/05/2013 23:32, dorayme wrote:
> his brain
> was so crowded that every time there was a new intake of students and
> he had to remember a new name, he forgot the name of an important fish

As in: http://swiftys.org.uk/images/brainfull.jpg (from which I'm
definitely suffering)

emf

unread,

May 18, 2013, 2:56:37 AM5/18/13

to

On 2013-05-17 09:54 Jukka K. Korpela wrote:
> 2013-05-17 12:58, dorayme wrote:
>
>> The styling achievable reliably via the COL element is known to be
>> restricted to a few things, I think BORDER, BACKGROUND, WIDTH at
>> least, maybe not much more.
>
> Yes, the point is that you can assign a class to COL and use that class
> in CSS, but most properties you set on COL that way have no effect. CSS
> is very liberal in a sense: all elements have all properties, and you
> can thus set any property on any element, but not all properties affect
> all elements. The issue with COL is that it has no children. A table
> cell is never a child of a COL, always a a child of a TR.
>
> CSS 2.1 explicitly specifies that only border, background, width, and
> visibility properties apply to columns:
> http://www.w3.org/TR/CSS2/tables.html#columns

The most useful use of col I could think of would be to assign a class
specifying the background-color of the column, so one can easily have
columns of different colors. It's a pity it's not included in the
specifications,

Actually, after reading dorayme's reply to my message, I retained the
classes assigned to the 4 columns in the webpage I've been working on,
and added in the header style the 2 lines for centering the text in col
2 and 4, because I am using a stylesheet that has classes for colors and
an alternate for reverse colors. Now to be compliant to the
specifications I should consider changing the code.

>> Not that it might be so helpful generally but in your particular case
>>
>> tr td:first-child + td {text-align:center;}
>> tr td:first-child + td + td + td {text-align:center;}
>>
>> should make the second table work by the lever of styling in the head
>> without adding classes or IDs
>
> Yes, and if you keep the current CSS code that sets text-align on COL
> elements, things work on old versions of IE, too. They don't understand
> the fancy selectors above, but in compensation, they incorrectly make
> cells of a column aligned according to the text-align property set on
> COL (this violates the specs, but here it's what we want).
>
> You could simplify the selectors to td:nth-child(2) and td:nth-child(4),
> but then you would have a problem with IE 8 (partly solvable e.g. with
> Selectivizr.js, but perhaps it's better to use the clumsier selectors,
> unless you are styling the 13th column or something).

I suppose that "nth" stands for ninth, as in x^9 (in the ninth power),
right?

emf

--
Natal Transits Calculator
https://files.nyu.edu/emf202/public/jv/nataltransits.html

emf

unread,

May 18, 2013, 3:01:52 AM5/18/13

to

Thanks. I was talking about the webpage I am working on, that has a
thead row too, not the example I posted here.

Thomas 'PointedEars' Lahn

unread,

May 18, 2013, 3:32:38 AM5/18/13

to

emf wrote:

> On 2013-05-17 09:54 Jukka K. Korpela wrote:
>> CSS 2.1 explicitly specifies that only border, background, width, and
>> visibility properties apply to columns:
>> http://www.w3.org/TR/CSS2/tables.html#columns
>
> The most useful use of col I could think of would be to assign a class
> specifying the background-color of the column, so one can easily have
> columns of different colors. It's a pity it's not included in the
> specifications,

“background-color” is included implicitly, and it works:

<http://www.w3.org/TR/CSS2/colors.html#propdef-background>

>> You could simplify the selectors to td:nth-child(2) and td:nth-child(4),
>> but then you would have a problem with IE 8 (partly solvable e.g. with
>> Selectivizr.js, but perhaps it's better to use the clumsier selectors,
>> unless you are styling the 13th column or something).
>
> I suppose that "nth" stands for ninth, as in x^9 (in the ninth power),
> right?

It is “_to_ the ninth power”, and what sense would it make to format the
ninth, 512nd, 19683rd, aso. child element?

<http://www.merriam-webster.com/table/dict/number.htm>
<http://www.w3.org/TR/css3-selectors/#nth-child-pseudo>

Please think before you post: RTFM and get a real name.

PointedEars
--
var bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
) // Plone, register_function.js:16

tlvp

unread,

May 18, 2013, 4:32:23 AM5/18/13

to

On Sat, 18 May 2013 02:56:37 -0400, emf wrote:

> I suppose that "nth" stands for ninth, as in x^9 (in the ninth power),
> right?

Not Jukka, here: just a random mathematician; but to me "nth" (pronounced
"ennth") makes sense primarily for "n" a positive whole number (1, 2, ...,
9, 10, 12, 16, etc.) and signifies as follows in a few special cases: n=4:
fourth; n=9: ninth; n=10: 10th; n=2,345,679: 2,345,679th; n=n: nth. For
powers: x to the nth power means x^n . For fractions, 3 nths means 3/n .
For n = 2 or 3, nth = half or third (fraction) or squared or cubed (power).

HTH. Cheers, -- tlvp

[PS to Jukka: I learned a few days ago, at a local Peruvian restaurant,
that "Yuca" seems to be the name of a favorite Latin American root
vegetable. Whether that's related to the similarly named Sonoran Desert
plant or not, I have no idea, but I suspect it's rather not; instead rather
cassava (Manihot esculenta). Well, I thought you'd gladly know :-) . tlvp]
--
Avant de repondre, jeter la poubelle, SVP.

dorayme

unread,

May 18, 2013, 5:55:08 AM5/18/13

to

In article <kn76r1$dpk$1...@speranza.aioe.org>,

Swifty <steve....@gmail.com> wrote:

> On 17/05/2013 23:28, dorayme wrote:
> > here is the effect I thought you wanted:
>
> I'm really interested in this styling, but my understanding of CSS is
> quite incomplete...
>
> Am I right in assuming that the <col> tags in Table 2 are
> irrelevant/superfluous?
>

Not quite, they deliver the colour in the particular example as at

<http://dorayme.netweaver.com.au/emf.html>.

But you are right in that if OP was to go the adjacent selector way,
he would really have no need for the COL element, it could be done via
the selectors. Perhaps like this:

td {width: 8em; border: 1px solid;}

tr td:first-child + td {background:yellow; text-align:center;}
tr td:first-child + td + td + td {background:yellow;
text-align:center;}

<p>Table 1</p>

<p>Table 2</p>

But the COL element is terribly good for the few things it can do,
like colour a column. If there were many rows, one would see a saving
in typing.

--
dorayme

dorayme

unread,

May 18, 2013, 5:59:23 AM5/18/13

to

In article <kn7843$ih3$1...@speranza.aioe.org>,

Well, perhaps use the abbreviated way of listing selectors. How about

tr td:first-child + td, tr td:first-child + td + td + td
{background:yellow; text-align:center;}

Try that.

If we use classes that would be a different game. I would probably use
classes (as well as COL) rather than the adjacent selectors - for
peace of mind, what browsers don't understand classes?

--
dorayme

dorayme

unread,

May 18, 2013, 5:59:40 AM5/18/13

to

In article <kn78es$jiv$1...@speranza.aioe.org>,

Swifty <steve....@gmail.com> wrote:

> On 17/05/2013 23:32, dorayme wrote:
> > his brain
> > was so crowded that every time there was a new intake of students and
> > he had to remember a new name, he forgot the name of an important fish
>
> As in: http://swiftys.org.uk/images/brainfull.jpg (from which I'm
> definitely suffering)

<g>

--
dorayme

Swifty

unread,

May 19, 2013, 3:04:23 AM5/19/13

to

On 18/05/2013 10:59, dorayme wrote:
> use the abbreviated way of listing selectors

Thats fine for me, thank you.

Most of my HTML is generated by CGI scripts, and they don't care how
convoluted the resultant CSS coding gets.