Why Isn't This <colgroup> Tag Working?

Discussion in 'HTML' started by Larry Lindstrom, Jun 22, 2012.

  1. Hello Again Folks:

    I've been working on a C++ bug for the last week, but I'm back on
    the HTML Dog tutorial now.

    The issue today is the <colgroup> tag.

    The sample is HTML Dog's "HTML Advanced - Mastering Tables".

    My CSS style isn't being applied to a column identified in the
    <colgroup>.

    Neither Firefox or Internet Explorer display this as I want it
    displayed.

    I've cut and pasted the table sample to my page's source, in order
    to avoid a typeo, but it still doesn't work.

    The HTML and CSS validator don't complain.

    Perhaps my problem is in the HTML that surrounds the table's code.

    http://67.171.145.190/htmldog_htdoc...ial/04_mastering_tables/mastering_tables.html

    I appreciate the assistance knowledgeable people offer in this
    newsgroup.

    What am I doing wrong.

    Thanks
    Larry
    Larry Lindstrom, Jun 22, 2012
    #1
    1. Advertising

  2. Andreas Prilop, Jun 22, 2012
    #2
    1. Advertising

  3. On 6/22/2012 11:16 AM, Andreas Prilop wrote:
    > On Fri, 22 Jun 2012, Larry Lindstrom wrote:
    >
    >> The issue today is the <colgroup> tag.

    >
    > <colgroup> is useless because browsers have always ignored
    > this tag. And <col> is almost useless, too.
    >


    Thanks Andreas:

    This does sound like something a user might want to do.

    Is there a convenient method to apply a style to one or more columns?

    Thanks
    Larry
    Larry Lindstrom, Jun 22, 2012
    #3
  4. 2012-06-22 21:06, Larry Lindstrom wrote:

    > My CSS style isn't being applied to a column identified in the
    > <colgroup>.


    The use of <colgroup> is redundant and irrelevant here, since there is
    no use in defining a group that contains all the columns and since your
    code sets properties on a <col> element, not on the <colgroup> element.

    In a sense, the properties _are_ set on the <col> element, but setting
    color and font weight on it has no effect. The element contains no text
    and no children.

    This is rather confusing, but after reading several explanations during
    a decade or so, I think I sort-of understand the point. One of the
    eye-openers was Hixie's posting long ago:
    http://archivist.incutio.com/viewlist/css-discuss/34844

    The point is that an HTML table isn't really a nice mathematical
    structure (a matrix) but an array of arrays. Each cell is a child of a
    row (<tr> element), never a child of a column element. The <col>
    elements may be used to affect rendering (and logical structure) in
    _some_ limited ways. One might even say that the row is a caring mother
    of a cell, whereas the column is a distant father that occasionally
    inteferes.

    For example, when a cell is to be colored (i.e., a browser decides which
    content color to use), the browser checks whether the cell itself has
    color property assigned to it; if not, it inherits color from the
    parent, the caring mother, <tr>; and if the parent has no color set, the
    color is inherited from the <table>, etc. Nobody asks the opinion of the
    poor lonesome <col>, if present.

    >Perhaps my problem is in the HTML that surrounds the table's code.
    >
    > http://67.171.145.190/htmldog_htdoc...ial/04_mastering_tables/mastering_tables.html


    The surrounding markup is OK. The problem is in the limitations/features
    of HTML and CSS regarding tables.

    The CSS code is:

    ..alternate
    {
    color: red;
    font-weight: bold;
    }

    As class="alternate" is set on a <col>, the settings have no effect, for
    reasons above. The CSS Validator does not complain, since in CSS, you
    can set any property on any element - some (many) settings just have no
    effect, e.g. setting a color on an empty element.

    This <col> element appears as the second one among the <col> elements
    for the table. The desired effect of styling the second column can be
    achieved by replacing the selector .alternate by the following:

    td:first-child + td

    The <col> elements have no role here, but there is no reason to remove
    them. They might be seen as documentation-like, and there might later be
    some use for them.

    The selector above works on almost all browsers, excluding older
    versions of IE. The idea is to use a selector that matches any cell that
    is the first child of its parent, i.e. the first cell of a row, and then
    add the "+ td", which creates a selector that matches any <td> element
    that immediately follows the first cell of a row.

    In CSS3, with more limited but growing support, you could write a little
    simpler:

    td:nth-child(2)

    which matches any <td> element that is the 2nd child of its parent.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Jun 22, 2012
    #4
  5. On 6/22/2012 11:51 AM, Jukka K. Korpela wrote:
    > 2012-06-22 21:06, Larry Lindstrom wrote:
    >
    >> My CSS style isn't being applied to a column identified in the
    >> <colgroup>.


    <Snip>

    > This <col> element appears as the second one among the <col> elements
    > for the table. The desired effect of styling the second column can be
    > achieved by replacing the selector .alternate by the following:
    >
    > td:first-child + td
    >
    > The <col> elements have no role here, but there is no reason to remove
    > them. They might be seen as documentation-like, and there might later be
    > some use for them.
    >
    > The selector above works on almost all browsers, excluding older
    > versions of IE. The idea is to use a selector that matches any cell that
    > is the first child of its parent, i.e. the first cell of a row, and then
    > add the "+ td", which creates a selector that matches any <td> element
    > that immediately follows the first cell of a row.
    >
    > In CSS3, with more limited but growing support, you could write a little
    > simpler:
    >
    > td:nth-child(2)
    >
    > which matches any <td> element that is the 2nd child of its parent.
    >


    Thanks Jukka:

    I appreciate the education about the problems with the <colgroup> tag.

    When I started this response to your advice, I was going to tell you
    that I couldn't get "td:first-child + td" to have any effect on the table.

    Before I hit "Send", I decided to try pulling out the <colgroup>
    from the HTML.

    Now your recomendation works like a charm. I was expecting FireFox
    to work, but I was pleasantly surprised to see it display properly with
    Internet Explorer.

    I've experimented with the arguments, "td:first-child + td + td"
    applies the style to the third column.

    Are there other interesting arguments to "td:first-child"?

    Where can I find more about this?

    I appreciate your advice Jukka.

    Thanks
    Larry
    Larry Lindstrom, Jun 22, 2012
    #5
  6. 2012-06-23 1:53, Larry Lindstrom wrote:

    > When I started this response to your advice, I was going to tell you
    > that I couldn't get "td:first-child + td" to have any effect on the table.
    >
    > Before I hit "Send", I decided to try pulling out the <colgroup>
    > from the HTML.


    That's strange, because <colgroup> or <col> markup should have no impact
    on this, and your current
    http://67.171.145.190/htmldog_htdoc...ial/04_mastering_tables/mastering_tables.html
    works even if I add such markup (well, remove the comment start and end
    that turn them to a comment), as expected.

    > Now your recomendation works like a charm. I was expecting FireFox
    > to work, but I was pleasantly surprised to see it display properly with
    > Internet Explorer.


    Yes, in simple cases like this, the :first-child pseudo-class and the
    "+" construct in selectors works even on IE 7, in "standards mode" (but
    even IE 9 falls to "Quirks Mode" it does not work, if you remove the
    doctype declaration, so just keep it there).

    Support summaries:
    http://www.quirksmode.org/css/contents.html

    > I've experimented with the arguments, "td:first-child + td + td"
    > applies the style to the third column.


    Right.

    > Are there other interesting arguments to "td:first-child"?


    It's not really an argument, it's a matter of combining two types of
    selectors. Basically td:first-child is like adding a class attribute,
    say "class=first_cell", to each <td> that is the first cell of its row
    and then using td.first_cell. The "+" operator creates a contextual
    selector: A + B matches any B that immediately follows a A, as the next
    sibling within the same parent element. You can combine them with other
    types of selectors, e.g. td:first-child + td.foo matches those cells in
    the second column that have class=foo set on them.

    > Where can I find more about this?


    Here's one good-looking description of CSS selectors:
    http://reference.sitepoint.com/css/selectorref

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Jun 23, 2012
    #6
  7. Larry Lindstrom

    richard Guest

    On Fri, 22 Jun 2012 11:06:42 -0700, Larry Lindstrom wrote:

    > Hello Again Folks:
    >
    > I've been working on a C++ bug for the last week, but I'm back on
    > the HTML Dog tutorial now.
    >
    > The issue today is the <colgroup> tag.
    >
    > The sample is HTML Dog's "HTML Advanced - Mastering Tables".
    >
    > My CSS style isn't being applied to a column identified in the
    > <colgroup>.
    >
    > Neither Firefox or Internet Explorer display this as I want it
    > displayed.
    >
    > I've cut and pasted the table sample to my page's source, in order
    > to avoid a typeo, but it still doesn't work.
    >
    > The HTML and CSS validator don't complain.
    >
    > Perhaps my problem is in the HTML that surrounds the table's code.
    >
    > http://67.171.145.190/htmldog_htdoc...ial/04_mastering_tables/mastering_tables.html
    >
    > I appreciate the assistance knowledgeable people offer in this
    > newsgroup.
    >
    > What am I doing wrong.
    >
    > Thanks
    > Larry




    because it never has.
    instead, give all the cells in the same column the same class name.
    style as desired.
    richard, Jun 23, 2012
    #7
  8. On 6/23/2012 4:19 AM, richard wrote:
    > On Fri, 22 Jun 2012 11:06:42 -0700, Larry Lindstrom wrote:

    < Snip >
    >
    > because it never has.
    > instead, give all the cells in the same column the same class name.
    > style as desired.


    Thanks Richard:

    Sorry about the delayed response. I've been called away on other
    problems.

    Figuring out regulatory hoops I need to jump through to export
    software with crypto. The Botan crypto library can be downloaded and
    used to build strong crypto by anybody in the world, including criminals
    in terrorist countries?

    Back to HTML.

    Your advice also works like a charm. I've used ID and class to
    select column styles in the CSS.

    Thanks
    Larry
    Larry Lindstrom, Jun 28, 2012
    #8
    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. Re: Colgroup Bug?

    , Feb 4, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    815
  2. Rob Meade

    <asp:table> and <colgroup> ?

    Rob Meade, Apr 19, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    4,097
    Eliyahu Goldin
    Apr 19, 2005
  3. shruds
    Replies:
    1
    Views:
    779
    John C. Bollinger
    Jan 27, 2006
  4. Mr. SweatyFinger
    Replies:
    2
    Views:
    1,805
    Smokey Grindel
    Dec 2, 2006
  5. Gary K

    COL & COLGROUP tag

    Gary K, Aug 26, 2004, in forum: ASP .Net Datagrid Control
    Replies:
    0
    Views:
    171
    Gary K
    Aug 26, 2004
Loading...

Share This Page