Grouping cells in column

38 views
Skip to first unread message

Dung Ping

unread,
Jun 3, 2006, 8:21:47 PM6/3/06
to
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

unread,
Jun 3, 2006, 10:18:33 PM6/3/06
to
On 3 Jun 2006 17:21:47 -0700, "Dung Ping" <dung...@yahoo.com> wrote:

: An example:


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

unread,
Jun 4, 2006, 10:28:36 AM6/4/06
to
Dung Ping <dung...@yahoo.com> scripsit:

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

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

Alan J. Flavell

unread,
Jun 4, 2006, 11:44:08 AM6/4/06
to
On Sun, 4 Jun 2006, Jukka K. Korpela wrote:
[...]

> 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

unread,
Jun 5, 2006, 2:28:49 PM6/5/06
to

Thanks a million to everyone for your help.

Reply all
Reply to author
Forward
0 new messages