Add style to a table column?

[dbzfyam]

Is it possible to style the contents of a table column (in my case: making all text bold)? I need this for a script i'm making which has a WYSIWYG editor in it. The user has to fill in details about computer components (such as the CPU, motherboard etc) in a table (inside the editor). So I want to make all text in the first column bold and text in the second column normal text. Like this:

CPU - Details CPU
Motherboard - Details Motherboard

Is this possible and if so, how can I do this?

Thank you very much in advance,
Stefan

[DrDoc]

Technically, yes ...
Accessible Tables [webmasterworld.com] (see the COL and COLGROUP section).

You can also use something like:

tr > td:first-child { 
  /* styles here */ 
}

However, remember that browser support for the above selector is sketchy in older browsers, including IE6.

That can, however, be remedied using Dean Edwards' excellent IE7 [dean.edwards.name] JavaScript patch.

Last, but not least, you can always assign a class to the first cell of each row. Works great.

[dbzfyam]

Thanks for the fast reply.

If I remember correctly, only the background and width are supported by older browsers with COL and COLGROUP? How would I do this?

I also just wanted to try the second method, but I can't really figure out how to apply it to my table (I'm probably doing something wrong in my code):

<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 7]><script src="ie7-standard-p.js" type="text/javascript"></script><![endif]-->
<style type="text/css">
tr > td:first-child {.bold {font-weight:bold;}}
</style>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td width="40%" valign="top" id="first-child">&nbsp;</td>
<td width="40%" valign="top">&nbsp;</td>
</tr>
</tbody>
</table>

I already tried assigning a class to the first cell (which I thought was the easiest method). however, my editor (TinyMCE) just strips the class when I click the button to add another row. So only the first TR has the right formatting.
I'm afraid it will do the same with your second suggestion.

[DrDoc]

A few corrections ...

<!-- compliance patch for microsoft browsers --> 
<!--[if lt IE 7]><script src="ie7-standard-p.js" type="text/javascript"></script><![endif]--> 
<style type="text/css"> 
tr > td:first-child { font-weight: bold; } 
</style> 
<table border="0" cellspacing="0" cellpadding="0" width="100%"> 
<tbody> 
<tr> 
<td width="40%" valign="top">I am bold</td> 
<td width="40%" valign="top">I am normal</td> 
</tr> 
<tr> 
<td width="40%" valign="top">I am bold</td> 
<td width="40%" valign="top">I am normal</td> 
</tr> 
</tbody> 
</table>

Just remember that you need to have the IE7 scripts uploaded to your server as well.

[Robin_reala]

Any reason why you're adding the 'tr >' to the selector? <td>s are always children of <tr>s so you don't need to specifically define it.

[DrDoc]

True, true. In this case you are absolutely right. :)
The 'tr >' is not necessary; 'td:first-child' will suffice.

[dbzfyam]

Thanks DrDoc! In Firefox it seems to be working, but for some reason it doesn't work in Internet Explorer 7 (I can't test it in IE6 right now). Do you by any chance know a way to fix this? ie7-standard-p.js has been uploaded in the same folder by the way.

[Fotiman]

It seems to me as though your first column is really a "table header", and so semantically you should be using a <th> instead of a <td> on that item, and then just style your <th> to be bold.

[dbzfyam]

Fotiman, just tried it (didn't think of that by the way), but the editor I'm using just inserts a TD instead of a TH when I click on the button to add a row so it seems it can only be done DrDocs way (as I have almost no Javascript knowledge to edit the WYSIWYG editor).

[DrDoc]

... unless you can view and edit the source code. Most WYSIWYG editors allow you to do that.

[dbzfyam]

I can edit the source code indeed, but as this is for a computer hardware site, there can be about 10 to 50 rows for the specifications. I think it's best/easiest if I just keep the plain text then. Thanks for the help!