Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Grouping cells in column

Reply
Thread Tools

Grouping cells in column

 
 
Dung Ping
Guest
Posts: n/a
 
      06-04-2006
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.

 
Reply With Quote
 
 
 
 
Sid Ismail
Guest
Posts: n/a
 
      06-04-2006
On 3 Jun 2006 17:21:47 -0700, "Dung Ping" <(E-Mail Removed)> wrote:

: 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


 
Reply With Quote
 
 
 
 
Jukka K. Korpela
Guest
Posts: n/a
 
      06-04-2006
Dung Ping <(E-Mail Removed)> scripsit:

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

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

 
Reply With Quote
 
Alan J. Flavell
Guest
Posts: n/a
 
      06-04-2006
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/...les-style2.css
was based on that assumption, without being anchored with an initial
th nor with your :first-child condition.

 
Reply With Quote
 
Dung Ping
Guest
Posts: n/a
 
      06-05-2006
Alan J. Flavell wrote:
> 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/...les-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.

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
ToolTips and Tables -- how can I have tooltips on the cells of a column? Frank HTML 2 12-07-2006 10:05 PM
convert yyyymmdd text cells into date cells =?Utf-8?B?ZF9jYW1wZWxvQGhvdG1haWwuY29t?= Microsoft Certification 2 11-22-2006 04:52 PM
Writing to Cells in the Detailsview Insertmode makes cells uneditable. SixStringSlaya@gmail.com ASP .Net 0 02-28-2006 10:23 PM
change the text of cells of a column Billow ASP .Net 1 11-18-2005 04:17 PM
Cells[].Text or Cells[].Controls[0] Joel Finkel ASP .Net Datagrid Control 0 09-01-2003 04:42 PM



Advertisments