[css-d] Styling COL and COLGROUP revisited

[christianz]

Okay, for those of us who remember my question about styling columns here is 
the solution I came up with (for my current project anyway). It takes advantage 
of the fact that Firefox *does* allow for the background of columns to be 
styled while still keeping everything very tight (notice that no style rule is 
ever declared more than once and the assigning of classes is kept to a bare 
minimum). Thanks to all those who responded to this onlist and offlist before.
Christian Z.
 

 
COLGROUP { background-color: #E1E4E4; }
TBODY, THEAD { text-align: left; }
TD { font-weight: bold;
 text-align: center; }
TH { color: #FF; }
.col2 { background-color: #CCD2D2; }
 

 

 
  
   This cell is the beginning of the first row and the first 
column.   
   Column #1
   Column #2
   Column #3   
   Column #4
  
 
 
  
 
 
  
  
  
  
 
 
  
   Row #1   
   X
   X
    
   X
  
  
   Row #2
    
   X
    
   X
  
  
   Row #3
    
   X
       
   X
  
  
   Row #4
       
    
   X
    
  
 

___
Try the New Netscape Mail Today!
Virtually Spam-Free | More Storage | Import Your Contact List
http://mail.netscape.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Styling COL and COLGROUP

[CJ Larson]

> It's possible, and pretty simple. You just use the solution from the
> wiki, where you style the COL and IE picks it up, and use adjacent
> siblings for standards-complient browsers.

This is what I'm trying to avoid, since I would rather not style for
individual browsers, which means it would be not-simple to me.  I'm all
for hacking the dead, I love CSS, and I use it as much as possible, but
when it means keeping separate styling in very different ways all over
the place for each browser, I don't have the patience (personal flaw)
nor time (dang deadlines) to keep up with all of that.

[Giving the tables individual names would be possible for me, but giving
the body tag a class would not in my personal situation, as I'm using
asp.net and master pages.  To be more technically correct, I could use
code behind to set a class on the body depending on what the page's file
name was or some such way, but this would be a hassle for me to set up
for no real purpose.  Plus keep in mind here that my shopping cart
displays on the side (or bottom depending on what layout is chosen) of
the main section, which would potentially have both of the other tables
on it (though not at the same time, of course), which the body-class
method wouldn't cover.]


> It's a little bit more CSS, but it gets the job done without
> wading into the conceptual impossibility that is trying to force table
> cells to inherit from a COL or COLGROUP.

Or I could get the job done the stinky, effective, and cross-browser
compatible way and not mess with clunky CSS tricks to force table cells
to behave the same in different browsers by different means.  :)

Please understand that I'm not knocking the suggestion as one that's not
feasible or useful, but it would create a larger manageability curve
that I personally would prefer not to climb, even if I had the time.

Respectfully,
~ cj
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Styling COL and COLGROUP

[James Bennett]

On 11/10/05, CJ Larson <[EMAIL PROTECTED]> wrote:
> I have a feature table in which I have 5 total columns: ID, Name,
> Description, Cost, and Activated.  On my main feature page, I wish to
> display the Name, Desc, and Cost fields in that order.  On my "manage
> your features" page, I wish to display the Name, Description, and
> Activated fields in that order.  On my shopping cart page, I wish to
> display the Name and Cost fields in that order.  Using the method you
> linked to, I will need to style all tables completely separate in my
> CSS.  Using what most people think to be what "colgroup" should be, I
> would only have 1 colgroup per field, and simply omit or add a colgroup
> when I display certain columns.  Easy!  (but currently not possible)

It's possible, and pretty simple. You just use the solution from the
wiki, where you style the COL and IE picks it up, and use adjacent
siblings for standards-complient browsers. Then, to get different
styling for the tables on different pages, either give the different
tables different class names (e.g., table class="features", table
class="cart", etc.) or use classes on the body element so you can do
other context-sensitive styling for different areas of the site as
well. It's a little bit more CSS, but it gets the job done without
wading into the conceptual impossibility that is trying to force table
cells to inherit from a COL or COLGROUP.

--
"May the forces of evil become confused on the way to your house."
  -- George Carlin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Styling COL and COLGROUP

[Steve Clay]

Thursday, November 10, 2005, 1:59:25 PM, Dan Kletter wrote:
> Drawback is colgroup is only supported by IE and limited to width,
> border, background and visibility styles.

Thanks to it's non-standard layout engine IE doesn't have these limitations
on styling via COL.  Nor do CSS2 browsers styling via adjacent siblings.

> adjacent sibling selectors. It's not very efficient.

How is it inefficient besides having to know which column you're
styling when you're writing the CSS?  There are plenty of cases where you
need to know markup structure to style it.  This is another one.

> Ideally, colgroup will be better supported in the future

True, but we'll probably be waiting quite some time.  In the meantime...

OT!  the easy solution to all this would be a Javascript that copies the
COL classNames to the cells, somehow dealing with spanned columns and rows.
Someone knock that out...but post it on another list ;)

Steve
-- 
http://mrclay.org/ : http://thefrenchhorns.com/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Styling COL and COLGROUP

[CJ Larson]

> Have you tried it?
> http://css-discuss.incutio.com/?page=StylingColumns (Combination 
> method)
(Sorry you get this twice Steve; I sent it off list accidentally the
first time.)


I was referring to colgroup as specified in the original post, not
work-around methods (that consequently don't work in IE).

Thank you for pointing the page out, however, since it might help the
original poster.


Now consider the following scenario:

I have a feature table in which I have 5 total columns: ID, Name,
Description, Cost, and Activated.  On my main feature page, I wish to
display the Name, Desc, and Cost fields in that order.  On my "manage
your features" page, I wish to display the Name, Description, and
Activated fields in that order.  On my shopping cart page, I wish to
display the Name and Cost fields in that order.  Using the method you
linked to, I will need to style all tables completely separate in my
CSS.  Using what most people think to be what "colgroup" should be, I
would only have 1 colgroup per field, and simply omit or add a colgroup
when I display certain columns.  Easy!  (but currently not possible)

This isn't a particularly specific example, but this is the spot I find
my own self stuck in with my work environment restrictions.  To get
around this, I have to specify classes in each td I wish to style as a
colgroup.  I understand exactly the frustration Christianz is
experiencing, and hopefully the scenario helped you see a narrowed use
for the wiki's example.  :)

Note: I'm not saying the wiki example is bad!  Please don't start
arguing with me about that, because I definitely for-100%-sure am NOT
saying that.  I'm just saying not everyone has the luxury of having the
exact same styling needs in the exact same order on every table, which
is where being able to style colgroups more would be invaluable.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Styling COL and COLGROUP

[christianz]

CJ Larson wrote:
"I think the problem posed is that *every* td has the same thing, the
same thing, the same thing, so why should a class have to specified 40
times (number pulled from a hat) to style this one type of td?  Now, if
only one city td needed to be special, a class there would be different.
For example, the city currently displayed on the page or in a little
window would be bolded and made bigger.

However, copy/pasting 'class="city"' 40 times doesn't feel like a good
programming practice, because we already know it's a city.  It's the
same dang thing 40 times.  Making a colgroup for this city *one* time
and being done with it is the intuitive thing to do, but since it
doesn't work...  'problem.'"
Exactly. You're right about every cell having the same thing. They are 
either empty or simply have an 'X' in them (and it is all appropriate content . 
. . even in the cases of emptiness).
 
http://www.gateway.com/dw/video_card.shtml
 
If you can add styling to a whole row you should be able to add styling to a 
whole column and assign semantic meaning to that column (and therefore all of 
its associated cells) exactly once.
 
___
Try the New Netscape Mail Today!
Virtually Spam-Free | More Storage | Import Your Contact List
http://mail.netscape.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Styling COL and COLGROUP

[Dan Kletter]

Drawback is colgroup is only supported by IE and limited to width,
border, background and visibility styles. (I know the original poster
was designing for IE, but still...)

I think Eric Meyer had the right idea. I wouldn't advise using
adjacent sibling selectors. It's not very efficient.

Ideally, colgroup will be better supported in the future because it
would be invaluable for implementing online financials for
corporations in a quarterly statement, for example.

--dk

On Thu, 10 Nov 2005, Steve Clay wrote:

> Have you tried it?
> http://css-discuss.incutio.com/?page=StylingColumns (Combination method)
>
> 
>   
>   
>   
>   
>   ...
> 
>
> #cities td:first-child + td {
>   /* styles */
> }
> #cities .population {
>   /* styles */
> }
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Styling COL and COLGROUP

[Steve Clay]

Thursday, November 10, 2005, 1:27:55 PM, CJ Larson wrote:
> Making a colgroup for this city *one* time and being done with it is the
> intuitive thing to do, but since it doesn't work...  "problem".

Have you tried it?
http://css-discuss.incutio.com/?page=StylingColumns (Combination method)


  
  
  
  
  ...


#cities td:first-child + td {
  /* styles */
}
#cities .population {
  /* styles */
}

Steve
-- 
http://mrclay.org/ : http://thefrenchhorns.com/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Styling COL and COLGROUP

[CJ Larson]

> The extra classes have
> relevant names, so you shouldn't feel that they are obstructing your
quest
> for purity.

I think the problem posed is that *every* td has the same thing, the
same thing, the same thing, so why should a class have to specified 40
times (number pulled from a hat) to style this one type of td?  Now, if
only one city td needed to be special, a class there would be different.
For example, the city currently displayed on the page or in a little
window would be bolded and made bigger.

However, copy/pasting 'class="city"' 40 times doesn't feel like a good
programming practice, because we already know it's a city.  It's the
same dang thing 40 times.  Making a colgroup for this city *one* time
and being done with it is the intuitive thing to do, but since it
doesn't work...  "problem".

I think until the inheritance issue with colgroup is figured out, this
will always be an issue.  The instinctive reaction to colgroup and what
it *should* do will bring up the restricting 4 properties limit as many
times as there are people who see there is even a colgroup to begin
with.  :)

My 2 cents, at least!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Styling COL and COLGROUP

[Nick Fitzsimons]

> Thanks, Eric. It was just so nice when I had stripped away a ton of code
> and had all these cells with no classes assigned or inline styling or
> anything (literally just: X, whereas the old version that
> somebody else coded looked like  bgcolor="E1E4E4">X) and it worked, and worked
> beautifully, but only in IE. I'm tempted to keep my coding how it is now
> because they told me when I started here the usual thing: "As long as it
> works in IE . . . "
>
> Christian
>

No need to be defeatist :-)

I think the relevant point is that all the crufty bits in the example you
give (align attributes, extra spans, and so on) were muddying the markup
with stuff that was there purely for presentation, which is what you're
trying to get away from; whereas Eric's suggestion:


>   
>   
>   New York
>   $6,123
>   


is, if anything, _adding_ semantic information to the markup, which is as
it should be.

As Albert Einstein said in his early career as a web developer, "Markup
should be as simple as possible, but no simpler." The extra classes have
relevant names, so you shouldn't feel that they are obstructing your quest
for purity.

Regards,

Nick.
-- 
Nick Fitzsimons
http://www.nickfitz.co.uk/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Styling COL and COLGROUP

[christianz]

Thanks, Eric. It was just so nice when I had stripped away a ton of code and 
had all these cells with no classes assigned or inline styling or anything 
(literally just: X, whereas the old version that somebody else coded 
looked like X) and it worked, and worked beautifully, but only in IE. 
I'm tempted to keep my coding how it is now because they told me when I started 
here the usual thing: "As long as it works in IE . . . "
 
Christian
 
 
-Original Message-
From: Eric A. Meyer <[EMAIL PROTECTED]>
To: [EMAIL PROTECTED]; css-d@lists.css-discuss.org
Sent: Thu, 10 Nov 2005 09:46:38 -0500
Subject: Re: [css-d] Styling COL and COLGROUP


At 8:32 PM -0500 11/9/05, [EMAIL PROTECTED] wrote: 
 
>So the only way to bold and center all the text in every cell of a 
>particular column is to add those rules to every cell? (Sounds like bad 
>coding to me.) Or to pretend that they are header cells when they 
>aren't? (Sounds like bad coding to me.) 
 
  No, though that is one way. The other way is to class all of the cells that 
share a column, and style via that class. A simple example: 
 
   
   
  New York 
  $6,123 
   
   
  Boston 
  $5,627 
   
   
  Cleveland 
  $7,111 
   
   
  Chicago 
  $5,966 
   
   
 
Now you can style each column uniquely. 
  Yes, the city names could probably be th element with scope="row", and then 
you could dump all the class names for this example, but pretend it's a table 
with more than two columns. Also, the markup there isn't very accessible, but 
it's good enough to illustrate the point I'm making. I hope. 
 
-- Eric A. Meyer (http://meyerweb.com/eric/), List Chaperone 
"CSS is much too interesting and elegant to be not taken seriously." 
  -- Martina Kosloff (http://mako4css.com/) 
___
Try the New Netscape Mail Today!
Virtually Spam-Free | More Storage | Import Your Contact List
http://mail.netscape.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Styling COL and COLGROUP

[Steve Clay]

Wednesday, November 9, 2005, 10:01:21 PM, Philippe Wittenbergh wrote:
> .myclass {text-align: center}
> td:first-child+td+td {text-align: center} /* the 3rd column */

> ***But***, and here IE is buggy again, you *cannot* group those 
> selector, else IE doesn't recognise the .myclass selector.

I just noticed that and made the change on the wiki:
http://css-discuss.incutio.com/?page=StylingColumns

Steve
-- 
http://mrclay.org/ : http://thefrenchhorns.com/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Styling COL and COLGROUP

[Eric A. Meyer]

At 8:32 PM -0500 11/9/05, [EMAIL PROTECTED] wrote:

>So the only way to bold and center all the text in every cell of a
>particular column is to add those rules to every cell? (Sounds like bad
>coding to me.) Or to pretend that they are header cells when they
>aren't? (Sounds like bad coding to me.)

No, though that is one way.  The other way is to class all of the 
cells that share a column, and style via that class.  A simple 
example:

   

 New York
 $6,123


 Boston
 $5,627


 Cleveland
 $7,111


 Chicago
 $5,966

   

Now you can style each column uniquely.
Yes, the city names could probably be th element with scope="row", 
and then you could dump all the class names for this example, but 
pretend it's a table with more than two columns.  Also, the markup 
there isn't very accessible, but it's good enough to illustrate the 
point I'm making.  I hope.

-- 
Eric A. Meyer (http://meyerweb.com/eric/), List Chaperone
"CSS is much too interesting and elegant to be not taken seriously."
   -- Martina Kosloff (http://mako4css.com/)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Styling COL and COLGROUP

[Bryce Fields]

On 11/9/05, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote:
> I don't hardly ever use these tags but I found they came in handy in my
> current assignment. However, in IE (not my favorite browser but I have
> to admit it's doing what I want to in this instance) everything
> displayed the way I intuitively imagined it would after adding style
> rules to these two tags but the style rules were ignored in
> Mozilla-based browsers. Does anybody have any experience with this?

Here's a little experiment/study I did w/ assistance from the CSS-D
gang about a year ago.
http://sandbox.royalrodent.com/colgroupies.htm

Hope it helps.

--
Bryce Fields, Webmaster
Where I Work: Kentucky Council on Postsecondary Education
Where I Play: www.royalrodent.com

"Do or do not! There is no try!" -- Yoda
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Styling COL and COLGROUP

[Philippe Wittenbergh]

On 10 Nov 2005, at 11:13 am, James Bennett wrote:
>
> I once read through a long and protracted Mozilla bug report on this
> which I'm currently unable to locate; IIRC the problem, conceptually,
> is that individual table cells are not actually children of the
> COLGROUP or COL; as a result, they don't inherit properties from
> COLGROUPs and COLs in an intuitive way. And Philippe is right that IE
> is buggy -- CSS2 is very explicit on the matter of which properties
> may be set on a COLGROUP or COL and be applied to their cells:
> 'border', 'background', 'width' and 'visibility'.

James already answered the question more or less; a good explanation is 
the text by Ian Hickson [1].
The bug James refers to might have been bug 915 [2].
There was a discussion on the subject on the www-style mailing list 
[3], it is not the only (recent) one, browse the archives there.
In short it is all a question of the DOM, the cascade and inheritance. 
View your table with Gecko's DomInspector, and you'll see that the 
tr/td are not children/descendant of the col/colgroup.

You can do , and use that for IE, and then for 
good browsers, use adjacent sibling selectors for better browsers.

.myclass {text-align: center}
td:first-child+td+td {text-align: center} /* the 3rd column */

***But***, and here IE is buggy again, you *cannot* group those 
selector, else IE doesn't recognise the .myclass selector.

[1] 
[2] 
[3] 

Browsers are fun anyway, and HTML tables are messy objects.
Philippe
---
Philippe Wittenbergh


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Styling COL and COLGROUP

[James Bennett]

On 11/9/05, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote:
> I don't hardly ever use these tags but I found they came in handy in my
> current assignment. However, in IE (not my favorite browser but I have
> to admit it's doing what I want to in this instance) everything
> displayed the way I intuitively imagined it would after adding style
> rules to these two tags but the style rules were ignored in
> Mozilla-based browsers. Does anybody have any experience with this?

I once read through a long and protracted Mozilla bug report on this
which I'm currently unable to locate; IIRC the problem, conceptually,
is that individual table cells are not actually children of the
COLGROUP or COL; as a result, they don't inherit properties from
COLGROUPs and COLs in an intuitive way. And Philippe is right that IE
is buggy -- CSS2 is very explicit on the matter of which properties
may be set on a COLGROUP or COL and be applied to their cells:
'border', 'background', 'width' and 'visibility'.


--
"May the forces of evil become confused on the way to your house."
  -- George Carlin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Styling COL and COLGROUP

[christianz]

> > I don't hardly ever use these tags but I found they came in handy 
in my
> > current assignment. However, in IE (not my favorite browser but I 
have
> > to admit it's doing what I want to in this instance) everything
> > displayed the way I intuitively imagined it would after adding 
style
> > rules to these two tags but the style rules were ignored in
> > Mozilla-based browsers. Does anybody have any experience with this?

> The subject came up 2 days ago. IE is overtly liberal with what it 
allows to style through those tabs.
> 

> Philippe
> ---
> Philippe Wittenbergh
> 

So the only way to bold and center all the text in every cell of a 
particular column is to add those rules to every cell? (Sounds like bad 
coding to me.) Or to pretend that they are header cells when they 
aren't? (Sounds like bad coding to me.)
___
Try the New Netscape Mail Today!
Virtually Spam-Free | More Storage | Import Your Contact List
http://mail.netscape.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Styling COL and COLGROUP

[Philippe Wittenbergh]

On 10 Nov 2005, at 9:21 am, [EMAIL PROTECTED] wrote:

> I don't hardly ever use these tags but I found they came in handy in my
> current assignment. However, in IE (not my favorite browser but I have
> to admit it's doing what I want to in this instance) everything
> displayed the way I intuitively imagined it would after adding style
> rules to these two tags but the style rules were ignored in
> Mozilla-based browsers. Does anybody have any experience with this?

The subject came up 2 days ago. IE is overtly liberal with what it 
allows to style through those tabs.


Philippe
---
Philippe Wittenbergh


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Styling COL and COLGROUP

[christianz]

I don't hardly ever use these tags but I found they came in handy in my 
current assignment. However, in IE (not my favorite browser but I have 
to admit it's doing what I want to in this instance) everything 
displayed the way I intuitively imagined it would after adding style 
rules to these two tags but the style rules were ignored in 
Mozilla-based browsers. Does anybody have any experience with this?
___
Try the New Netscape Mail Today!
Virtually Spam-Free | More Storage | Import Your Contact List
http://mail.netscape.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/