TABLES - CSS: Professional Techniques for Modern Layout - page 210

Figure 6-5: Styling column elements.

Some of you may be sure that you've heard about applying other CSS properties to columns.
It's entirely possible that you have, since Internet Explorer allows you to apply just about any
CSS property to col elements. h e reasons other browsers (and the CSS specii cation itself )
don't is long, tortuous, and frankly kind of annoying. IE really does the expected and desirable
thing here.

So while col elements are the theoretically easy way to do column styling, they're incredibly
limited in the real world. If you want to do column styling, you have to get more creative. h e
usual way to accomplish this is with classes on all the cells throughout the whole table.

< table>
< tbody>
< tr>
< td class="c1">Row 1 cell 1</ td>
< td class="c2">Row 1 cell 2</ td>
< td class="c3">Row 1 cell 3</ td>
< td class="c4">Row 1 cell 4</ td>
< td class="c5">Row 1 cell 5</ td>
</ tr>
< tr>
< td class="c1">Row 2 cell 1</ td>
< td class="c2">Row 2 cell 2</ td>
< td class="c3">Row 2 cell 3</ td>
< td class="c4">Row 2 cell 4</ td>
< td class="c5">Row 1 cell 5</ td>
</ tr>
</ tbody>
</ table>

212

Now if you want to make a specii c column red-backed, say, you simply write CSS the
addresses that the cell classes. h is will recreate the ef ect seen in Figure 6-5.

.c1 , .c2 , .c3 , .c4 { background : red ; width : 10em ;}

Clumsier in both markup and style, yes. h e advantage here is that you can continue on to any
other CSS property that can be applied to a table cell (just about anything except margins). So
if you want to center-align and italicize all those cells (as in Figure 6-6), it's simple enough.

.c1 , .c2 , .c3 , .c4 { background : red ; width : 10em ;
text-align : center ; font-style : italic ;}