I'm trying to format a column in a table using a <col> element. I can set background-color, width, etc., but can't set the font-weight. Why doesn't it work?
<table>
<col style="font-weight:bold; background-color:#CCC;">
<col>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
A col tag must be inside of a colgroup tag, This may be something to do with the problem.
No, it doesn't actually http://www.w3.org/TR/html401/struct/tables.html#h-11.2.4.2
I've tried it with colgroup tags too, with the same result.
Have you tried applying the style through a CSS class?
The following appears to work:
<style type="text/css">
.xx {
background: yellow;
color: red;
font-weight: bold;
padding: 0 30px;
text-align: right;
}
<table border="1">
<col width="150" />
<col width="50" class="xx" />
<col width="80" />
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
I just noticed that it does work in IE, but no other browsers (Firefox, Opera, Safari, K-Meleon, etc.). Maybe it's just a browser support problem.
Your best bet is to apply your styling directly to the <td> tags. I've never used the <col> tag, but most browsers let you apply formatting at the <table> and <td>/<th> level, but not at an intermediate level. For example if you have
<table>
<tr class="Highlight">
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
then this CSS won't work
tr.Highlight {background:yellow}
but this will
tr.Highlight td {background:yellow}
Also: I assume your code above is just for demonstration purposes and you're not actually going to apply styles inline.
As far as I know, you can only format the following using CSS on the <col> element:
This page has more info.
Herb is right - it's better to style the <td>'s directly. What I do is the following:
<style type="text/css">
#mytable tr > td:first-child { color: red;} /* first column */
#mytable tr > td:first-child + td { color: green;} /* second column */
#mytable tr > td:first-child + td + td { color: blue;} /* third column */
</style>
</head>
<body>
<table id="mytable">
<tr>
<td>text 1</td>
<td>text 2</td>
<td>text 3</td>
</tr>
<tr>
<td>text 4</td>
<td>text 5</td>
<td>text 6</td>
</tr>
</table>
This won't work in IE however.
Reading through this as I was attempting to style a table such that the first column would be bold text and the the other four columns would be normal text.
Using col tag seemed like the way to go but while I could set the widths of the columns with the width attribute the font-weight: bold wouldn't work
Thanks for pointing me in the direction of the solution.
By styling all the td elements td {font-weight: bold;} and then using an adjacent sibling selector to select columns 2-5 and style them back to normal td + td {font-weight: normal;}
Voila, alls good :)