Grouping cells in column

Discussion in 'HTML' started by Dung Ping, Jun 4, 2006.

  1. Dung Ping

    Dung Ping Guest

    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.
    Dung Ping, Jun 4, 2006
    #1
    1. Advertising

  2. Dung Ping

    Sid Ismail Guest

    On 3 Jun 2006 17:21:47 -0700, "Dung Ping" <> 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
    Sid Ismail, Jun 4, 2006
    #2
    1. Advertising

  3. Dung Ping <> 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/
    Jukka K. Korpela, Jun 4, 2006
    #3
  4. 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.
    Alan J. Flavell, Jun 4, 2006
    #4
  5. Dung Ping

    Dung Ping Guest

    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/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.
    Dung Ping, Jun 5, 2006
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Billow
    Replies:
    1
    Views:
    361
    =?Utf-8?B?RWx0b24gVw==?=
    Nov 18, 2005
  2. Replies:
    0
    Views:
    526
  3. Frank
    Replies:
    2
    Views:
    507
    BootNic
    Dec 7, 2006
  4. Bruce
    Replies:
    1
    Views:
    4,425
    Bruce
    Mar 5, 2008
  5. Joel Finkel

    Cells[].Text or Cells[].Controls[0]

    Joel Finkel, Sep 1, 2003, in forum: ASP .Net Datagrid Control
    Replies:
    0
    Views:
    306
    Joel Finkel
    Sep 1, 2003
Loading...

Share This Page