Attributes for entire table column?

[enchant]

Often, when I'm putting a table together, I need all items in a specific column to have a certain attribute, and I was wondering if there was a better way than to specify it in every table cell in that column.

[Ingolemo]

If you need to apply styles to a whole column, you could use the col element. Unfortunately, most implementations don't consistently recognise it.

<table>
<col>
<col style="background:red;">
<tbody>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</tbody>
</table>

[rebelde]

That example looked good in IE7 and Firefox. I was surprised. I had looked into this a while back and it didn't work. Does anybody know specifically how well this works these days?

[SuzyUK]

It works fine, BUT the properties that you can apply to <col> are limited, not by support issues but by its nature.

You can only apply border, background, width & visibility properties to the col & colgroup elements. - ref: W3C recs [w3.org]

IE will allow you to do more, text-align is one, though not sure what all it does 'support', it's this that leads to x-browser support confusion at times?

- the 4 properties above are supported quite consistently

[edited by: SuzyUK at 6:40 am (utc) on Mar. 26, 2007]

[Ingolemo]

Thanks SuzyUK, that's what I meant to imply, but I worded it badly.

[enchant]

> You can only apply border, background, width & visibility properties

I was looking for attributes such as text-align (e.g. for a column of numbers) or BOLD or font-family, etc.

[Achernar]

In gecko (and probably IE7) you can use this syntax:

tr td:first-child + td {
background-color: green;
color: white;
width: 50px;
}

This style will apply to the second column, and only to it (add a third column to your test to verify).

[firstreflex]

> You can only apply border, background, width & visibility properties

I don't think border works consistently