Welcome to WebmasterWorld Guest from 23.23.53.177

Forum Moderators: not2easy

Message Too Old, No Replies

Attributes for entire table column?

   
12:40 pm on Mar 25, 2007 (gmt 0)

10+ Year Member



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.
5:26 pm on Mar 25, 2007 (gmt 0)

5+ Year Member



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>
11:03 pm on Mar 25, 2007 (gmt 0)

10+ Year Member



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?
6:39 am on Mar 26, 2007 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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]

5:28 pm on Mar 26, 2007 (gmt 0)

5+ Year Member



Thanks SuzyUK, that's what I meant to imply, but I worded it badly.
11:33 am on Mar 28, 2007 (gmt 0)

10+ Year Member



> 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.

12:08 pm on Mar 28, 2007 (gmt 0)

5+ Year Member



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).

2:57 pm on Mar 28, 2007 (gmt 0)

10+ Year Member



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

I don't think border works consistently