PDA

View Full Version : Styling very specific elements



Fumigator
Jul 13th, 2010, 10:08 PM
I have a table with 4 columns (yes it's displaying tabular data ;) ) and i'd like to style the 4th column differently from the first three columns. Is my only option to specify a class on the <td> tags? Or is there a way to do it without assigning a class to the <td> tags? I can use jQuery to find the last <td> tag in each <tr> tag but if there's a way to do it with just CSS I'd rather.

Oh and I should mention, I do need a solution that is cross-browser compatable.

met
Jul 13th, 2010, 11:31 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<style type="text/css">
colgroup.last { background:#f7f7f7; }
</style>
</head>

<body>
<table width="870" border="0" cellspacing="0" cellpadding="0">
<colgroup span="3"></colgroup>
<colgroup class="last"></colgroup>

<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>


does the trick at least.

edit:
semantically i'm not sure where the <colgroup> tags should go - it appears to work fine in the example i've provided, but it would make more sense to have the <colgroup> wrap the corresponding column...like:



<table width="870" border="0" cellspacing="0" cellpadding="0">
<colgroup span="3">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>

</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>

</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>


</tr>
</colgroup>

<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>

</tr>
<colgroup class="last">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>

</tr>
</colgroup>

</table>



thoughts?

Fumigator
Jul 13th, 2010, 11:38 PM
Wild! Very nice, thanks. The <colgroup> and <col> tags escaped my notice until today.

met
Jul 13th, 2010, 11:39 PM
see my edited post with regards to the semantic order of the tags if you haven't already..depends how picky you are ;)

VIPStephan
Jul 14th, 2010, 12:40 AM
I’m sorry to disappoint you, met, but your assumption about the semantically useful placement of the colgroup elements is wrong. What you did was wrapping the colgroup elements around the table rows. The last column comprises each last data cell in each row so it wouldn’t make sense to put the colgroup element anywhere in the middle of the table, wrapping table cells, ’cause you’d have to wrap it around single table cells across rows. And for what you have done (wrapping the tags around the rows) we already have rowgroup elements. They are called thead, tfoot, and tbody (the latter one of which you can have several times in a table).

met
Jul 14th, 2010, 07:35 PM
I kind of understand that, would you be able to point me in the direction of a truly semantic table then for future reference?

Can't say I've seen many tables making use of these additional elements. And if I may, what's the point of using them as tables seem to function fine without them? or do they benefit say, screenreaders and the like.

http://www.communitymx.com/content/article.cfm?page=1&cid=0BEA6 has a pretty good write up of some of the elements but doesn't really explain why you'd want to


I’m sorry to disappoint you, met, but your assumption about the semantically useful placement of the colgroup elements is wrong. What you did was wrapping the colgroup elements around the table rows. The last column comprises each last data cell in each row so it wouldn’t make sense to put the colgroup element anywhere in the middle of the table, wrapping table cells, ’cause you’d have to wrap it around single table cells across rows. And for what you have done (wrapping the tags around the rows) we already have rowgroup elements. They are called thead, tfoot, and tbody (the latter one of which you can have several times in a table).

VIPStephan
Jul 15th, 2010, 01:26 AM
One of the best and most elaborate resources I found is on http://www.ferg.org/section508/accessible_tables.html#contents_item_3. I’ve learned a lot from it.

Yes, tables work without column group and row group elements. But actually, if you don’t define them they are still there, implicitly. That means if you don’t define column groups the table will treat all columns as if they were in one column group spanning the entire table (i. e. all data within the table is implicitly in one column group). The same goes for row groups. If none are defined, all rows are assumed to be children of one tbody DOM node.

The use of column groups is becoming more obvious with larger tables. If you specify column groups and/or columns the user agent (browser) will already know how many columns the table has before the entire table has been rendered/loaded. This way things like column widths or structure can be calculated faster. Same goes for row groups. If you have a table header, a table body, and a table footer, the order of row groups must be: thead, tfoot, tbody [, tbody, …]. This is so the user agent knows the results of a possible calulation in the table (which is shown in the footer) before the entire table has loaded. Also, with row groups you can make a table with fixed header and footer, and scrolling table body (we disregard browser support at this point).

Fumigator
Jul 16th, 2010, 01:24 AM
Speaking of browser support, it seems Firefox (3.6.6) has problems applying CSS via <col> and <colgroup>. IE8 works fine. FF seems to handle background color OK, but horizontal alignment, font size, and font color do not apply. At least I wasn't able to get those to work. So, I suppose I'll just assign a class to every <td> tag.

VIPStephan
Jul 16th, 2010, 01:31 AM
Yes, styling columns and column groups is relatively limited, not just in Firefox. Also at least older Firefoxes had a bug where a width applied to colgroup would wrongly make each col in that group as wide. Don’t know if that’s fixed in the latest version.

However, if your table is relatively static in terms of amount of columns and position of the specific column you want to style, you can as well use CSS sibling selectors to style the cells rather than adding a class to each cell. For example you could write: td:first-child + td {font-weight: bold;} or something like that. But watch out for colspan and rowspan, these are messing up the number of cells in a row.