colgroup and css

[Frank]

Hi,

am I right in the assumption that I cannot use colgroup in a class defined
in css?
Is there something else I can use? I want to define in a css class named
'tabwith2cols' that I
have a table and 2 columns with width of 20% and 80%. So when I use the
classname for the table (DIV) I don't have to specify the colwidths.

Thanx
Frank

 

[Steve Pugh]

am I right in the assumption that I cannot use colgroup in a class defined
in css?

colgroup.foo { ... styles ... } matches <colgroup class="foo">
and
..foo colgroup { ... styles ... } matches <table class="foo"><colgroup>

So no you are not right.

But, there are only certain styles that can be set on columns (col and
colgroup elments). See http://www.w3.org/TR/CSS2/tables.html#q4
(Note the very annoying absence of text-align from that list).

Is there something else I can use? I want to define in a css class named
'tabwith2cols' that I
have a table and 2 columns with width of 20% and 80%. So when I use the
classname for the table (DIV) I don't have to specify the colwidths.

Width can be set via CSS for columns.

col.foo { width: 20%;}
col.bar { width: 80%; }

<col class="foo"><col class="bar">

Steve

 

[Frank]

colgroup.foo { ... styles ... } matches <colgroup class="foo">
and
.foo colgroup { ... styles ... } matches <table class="foo"><colgroup>

So no you are not right.

But, there are only certain styles that can be set on columns (col and
colgroup elments). See http://www.w3.org/TR/CSS2/tables.html#q4
(Note the very annoying absence of text-align from that list).


Width can be set via CSS for columns.

col.foo { width: 20%;}
col.bar { width: 80%; }

<col class="foo"><col class="bar">

Steve

I understand, but I would still have to put <col class="foo"><col
class="bar"> in the table def.
What I want is:
<div class=tablewith2cols>
<table>
<tr><td>small column</td><td>large column</td></tr>
....
And the columns are automatically the width specified in the class
tablewith2cols.
But I will use your answer, it's better then specify the width in the
colgroup.
Thanx
Frank

 

[Steve Pugh]

I understand, but I would still have to put <col class="foo"><col
class="bar"> in the table def.
What I want is:
<div class=tablewith2cols>
<table>
<tr><td>small column</td><td>large column</td></tr>
...
And the columns are automatically the width specified in the class
tablewith2cols.

Easy to do if the cols have the same width

..tablewith2cols td {width: 50%;}

Theoretically possible otherwise, but no support in Internet Explorer
so probably of little practical use.

..tablewith2cols td {width: 80%;}
..tablewith2cols tr td:first-child width: 20%;}

That sets the width to 80% for all cells, but sets it to 20% for the
first cell of each row. But IE doesn't understand :first-child and so
will always make the cells 80% wide, probably leading to horizomntal
scrolling. :-(

But I will use your answer, it's better then specify the width in the
colgroup.

Any reason to use colgroup over col?

Steve

 

[DU]

You can but right now styling col and colgroup is not well supported by
various browsers.

Bug 915: column style resolution for text-align,vertical-align not yet
implemented [CASCADE]
http://bugzilla.mozilla.org/show_bug.cgi?id=915

I understand, but I would still have to put <col class="foo"><col
class="bar"> in the table def.
What I want is:
<div class=tablewith2cols>
<table>

I would not create a wrapping div with a class just to style such table.

<table class="tablewith2cols"> would be sufficient.

I wonder why you just don't go ahead with basic HTML here, like this:

<table style="table-layout:fixed;">
<col width="20%"><col width="80%">
....

Do not use multilength for col since Opera 7 does not support that.
"The col width attribute does not support multilengths"
http://www.opera.com/docs/specs/#html

The COL element in HTML 4.01 spec.:
http://www.w3.org/TR/html401/struct/tables.html#edef-COL

<tr><td>small column</td><td>large column</td></tr>
...
And the columns are automatically the width specified in the class
tablewith2cols.
But I will use your answer, it's better then specify the width in the
colgroup.
Thanx
Frank

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/
- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html

 

[Kai]

Using CSS and Colgroup to style Tables

Further to what has been posted above, I offer a complete example of using CSS to style two totally bare data tables - that is, tables without any named IDs or classes except in the colgroup which can be static.


<style type="text/css">

table {
border-collapse:collapse; padding:0px; margin:0px; border:#333333 solid 1px; font-family:Arial, Helvetica, sans-serif; font-size:11px; table-layout:auto; text-align:center; vertical-align:middle; }

.topcol1, .botcol1 { background:#FF99FF; border-right:3px double #0000FF; width:180px; }

.topcol2, .topcol5, .topcol8, .topcol11, .topcol14 { background-color:#FFCC99; width:85px; }
.topcol3, .topcol6, .topcol9, .topcol12, .topcol15 { background-color:#CCFFFF; width:70px; }
.topcol4, .topcol7, .topcol10, .topcol13, .topcol16 { background-color:#CCCCFF; width:100px; }

.botcol2, .botcol5, .botcol8, .botcol11, .botcol14 { background-color:#CCCCFF; width:100px; }
.botcol3, .botcol6, .botcol9, .botcol12, .botcol15 { background-color:#FFCC99; width:70px; }
.botcol4, .botcol7, .botcol10, .botcol13, .botcol16 { background-color:#CCFFFF; width:85px; }

td, th { border:1px solid #000; padding:0px; padding-left:9px; padding-right:6px; padding-top:2px; padding-bottom:2px; }

table th { font-weight:bold; background-color:#FFFF99; border-bottom:3px double #0000FF; }

table caption { font-weight:bold; font-size:16px; font-style:italic; }
</style>

<table>
<caption>Schedule of Three Rescue Vessels Patroling East Coast North America</caption>

<colgroup>
<col class="topcol1" /> <col class="topcol2" /> <col class="topcol3" /> <col class="topcol4" /> <col class="topcol5" /> <col class="topcol6" /> <col class="topcol7" /> <col class="topcol8" /> <col class="topcol9" />
</colgroup>

<tbody>

<tr> <th>Southbound<br />Ports</th> <th>Rescue Ship<br />Normandy<br />Day 59</th> <th>Rescue Ship<br />Juno<br />Day 20</th> <th>Rescue Ship<br />Omaha<br />Day 14</th> <th>Rescue Ship<br />Normandy<br />Day 61</th> <th>Rescue Ship<br />Juno<br />Day 22</th><th>Rescue Ship<br />Omaha<br />Day 16</th></tr>

<tr> <td>&nbsp;Updated 27 June 2007</td>
<td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td></td> <td></td> </tr>

<tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td></td> <td></td> </tr>

<tr> <td>Houston</td> <td>***</td> <td>***</td> <td>17 JUL</td> <td>***</td> <td>24 AUG</td> <td>6 OCT</td> </tr>

<tr> <td>Beaumont, TX</td> <td>11 MAY</td> <td>13 JUN</td> <td>15 JUL</td> <td>29 JUL</td> <td>22 AUG</td> <td>4 OCT</td> </tr>

<tr> <td>Jacksonville, FL</td> <td>17 MAY</td> <td>17 JUN</td> <td>20 JUL</td> <td>3 AUG</td> <td>19 AUG</td> <td>30 SEP</td> </tr>

<tr> <td>Charleston, SC</td> <td>18 MAY</td> <td>23 JUN</td> <td>21 JUL</td> <td>4 AUG</td> <td>18 AUG</td> <td>29 SEP</td> </tr>

<tr> <td>Baltimore</td> <td>21 MAY</td> <td>6-20 JUN</td> <td>22 JUL</td> <td>7 AUG</td> <td>16 AUG</td> <td>27 SEP</td> </tr>

<tr> <td>Wilmington, DE</td> <td>***</td> <td>21 JUN</td> <td>23 JUL</td> <td>***</td> <td>30 AUG</td> <td>12 OCT</td> </tr>

<tr> <td>Halifax, NS</td> <td>***</td> <td>2 JUN</td> <td>7 JUL</td> <td>***</td> <td>14 AUG</td> <td>25 SEP</td> </tr>

</tbody>
</table>

<p>&nbsp;</p>

<table>
<caption>Schedule of Three Rescue Vessels Patroling East Coast North America</caption>

<colgroup> <col class="botcol1" /> <col class="botcol2" /> <col class="botcol3" /> <col class="botcol4" /> <col class="botcol5" /> <col class="botcol6" /> <col class="botcol7" /> <col class="botcol8" /> <col class="botcol9" />
</colgroup>

<tbody>

<tr> <th>Northbound<br />Ports</th> <th>Rescue Ship<br />Omaha<br />Day 13</th> <th>Rescue Ship<br />Normandy<br />Day 60</th> <th>Rescue Ship<br />Juno<br />Day 21</th> <th>Rescue Ship<br />Omaha<br />Day 15</th> <th>Rescue Ship<br />Normandy<br />Day 62</th> <th>Rescue Ship<br />Juno<br />Day 23</th></tr>

<tr> <td>Updated: 27 June 2007</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td></td> <td></td> </tr>

<tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td></td> <td></td> </tr>

<tr> <td>Beaumont</td> <td>15 JUL</td> <td>29 JUL</td> <td>22 AUG</td> <td>3 OCT</td> <td>30 SEP</td> <td>10 NOV</td> </tr>

<tr> <td>Houston</td> <td>17 JUL</td> <td>***</td> <td>24 AUG</td> <td>5 OCT</td> <td>***</td> <td>12 NOV</td> </tr>

<tr> <td>Jacksonville</td> <td>20 JUL</td> <td>3 AUG</td> <td>19 AUG</td> <td>30 SEP</td> <td>4 OCT</td> <td>7 NOV</td> </tr>

<tr> <td>Charleston</td> <td>11 JUL</td> <td>4 AUG</td> <td>18 AUG</td> <td>29 SEP</td> <td>5 OCT</td> <td>6 NOV</td> </tr>

<tr> <td>Baltimore</td> <td>22 JUL</td> <td>7 AUG</td> <td>16 AUG</td> <td>27 SEP</td> <td>8 OCT</td> <td>4 NOV</td> </tr>

<tr> <td>Wilmington</td> <td>23 JUL</td> <td>***</td> <td>30 AUG</td> <td>12 OCT</td> <td>***</td><td>18 NOV</td></tr>

<tr> <td>Halifax, NS</td> <td>7 JUL</td> <td>***</td> <td>14 AUG</td> <td>25 SEP</td> <td>***</td><td>2 NOV</td> </tr>

</tbody>

</table>



Regards,

Kai