Grouping cells in column

[Dung Ping]

An example:

A table consists of five rows and five columns. I wanted to put a
different color on the background of last two columns. I can use <td
class='dif_color'> on all the cells of those two columns, and define
the background-color on the <style> section.

But is there a simpler method to group those cells? Thanks.

 

[Sid Ismail]

: An example:
:
: A table consists of five rows and five columns. I wanted to put a
: different color on the background of last two columns. I can use <td
: class='dif_color'> on all the cells of those two columns, and define
: the background-color on the <style> section.
:
: But is there a simpler method to group those cells? Thanks.


No, but it is verrrry easy to insert the coding by the simple
expedient of highlighting those columns in Dreamweaver, then insert
the class - with just 2 clicks.

Sid

 

[Jukka K. Korpela]

A table consists of five rows and five columns. I wanted to put a
different color on the background of last two columns. I can use <td
class='dif_color'> on all the cells of those two columns, and define
the background-color on the <style> section.

But is there a simpler method to group those cells?

Yes. It's not very simple, but at least it does not require all those class
attributes and it works on almost all graphic browsers used these days:

Insert the markup
<col><col><col><col class="special"><col class="special">
into the table, after the <table> tag.

Include the following CSS code into your style sheet:

td:first-child + td + td + td,
td:first-child + td + td + td + td,
..special {
background: #ffc;
color: black; }

The somewhat complicated contextual selectors work on browsers that conform
to the CSS 2 specification, and they select <td> cells in the 4th and 5th
column.

The attribute selector .special, together with the <col> markup, handles IE
6. Whether it _should_ work is mostly just a theoretical question. The
practical side of the matter is that IE 6 uses the background for the
column. (Naturally this postulates that the <td> cells themselves have the
default background, transparent.)

 

[Alan J. Flavell]

]

td:first-child + td + td + td,
td:first-child + td + td + td + td,
.special {
background: #ffc;
color: black; }

The somewhat complicated contextual selectors work on browsers that
conform to the CSS 2 specification, and they select <td> cells in
the 4th and 5th column.

Right. In an earlier example of mine, the first cell of each row was
<th>, so I was able to use a selector of th + td + td ... without
having to rely on support for :first-child, but that was luck.[1]

And I was leaving IE to do whatever it did. Which wasn't much.

The attribute selector .special, together with the <col> markup,
handles IE 6.

That's pragmatic. Well spotted.

The practical side of the matter is that IE 6 uses the background
for the column.

Yes. Although, a common requirement seems to call for alternating b.g
colours in the rows as well as in the columns, and then the idea
unfortunately falls down.

(Naturally this postulates that the <td> cells themselves have the
default background, transparent.)

Indeed. As also the rows (tr). It's the background color of the cols
that is shining through - /not/ the class name of the cols that is
somehow percolating down to the cells.

best regards

[1] But then again, if you have (say) a 4-column table, then
td+td+td+td will match the fourth column, without needing to be
anchored. td+td+td could match the third column and the fourth, but
surely the td+td+td+td is more specific and will win? Further, td+td
could match any except the first column, but the more-specific styles
for columns 3 and 4 will win. And so on. At least it seems to do
what I intended for
http://ppewww.ph.gla.ac.uk/~flavell/tests/poules2.html , whose
stylesheet http://ppewww.ph.gla.ac.uk/~flavell/tests/poules-style2.css
was based on that assumption, without being anchored with an initial
th nor with your :first-child condition.

 

[Dung Ping]

]

td:first-child + td + td + td,
td:first-child + td + td + td + td,
.special {
background: #ffc;
color: black; }

The somewhat complicated contextual selectors work on browsers that
conform to the CSS 2 specification, and they select <td> cells in
the 4th and 5th column.

Right. In an earlier example of mine, the first cell of each row was
<th>, so I was able to use a selector of th + td + td ... without
having to rely on support for :first-child, but that was luck.[1]

And I was leaving IE to do whatever it did. Which wasn't much.

The attribute selector .special, together with the <col> markup,
handles IE 6.

That's pragmatic. Well spotted.

The practical side of the matter is that IE 6 uses the background
for the column.

Yes. Although, a common requirement seems to call for alternating b.g
colours in the rows as well as in the columns, and then the idea
unfortunately falls down.

(Naturally this postulates that the <td> cells themselves have the
default background, transparent.)

Indeed. As also the rows (tr). It's the background color of the cols
that is shining through - /not/ the class name of the cols that is
somehow percolating down to the cells.

best regards

[1] But then again, if you have (say) a 4-column table, then
td+td+td+td will match the fourth column, without needing to be
anchored. td+td+td could match the third column and the fourth, but
surely the td+td+td+td is more specific and will win? Further, td+td
could match any except the first column, but the more-specific styles
for columns 3 and 4 will win. And so on. At least it seems to do
what I intended for
http://ppewww.ph.gla.ac.uk/~flavell/tests/poules2.html , whose
stylesheet http://ppewww.ph.gla.ac.uk/~flavell/tests/poules-style2.css
was based on that assumption, without being anchored with an initial
th nor with your :first-child condition.

Thanks a million to everyone for your help.