Fine Tuning Table Styles in JSF and Richfaces with CSS

Richfaces is a nice JSF component library packed with very stylish looks and skinning capabilities. The rich:dataTable control is one of the flag ship controls of the entire package because it allows developers to get nice attributes such as roll over highlighting and alternate line shading done easily with an minimal amount of work. However, some times the data would require that the developer either nest a table or get right down to the actual cell for styling purposes. For many developers just starting to work with JSF and Richfaces, this could be a very time consuming task that produces much frustration. We will look at one way of getting to the cells that you want using css.

<*:column> means the <h:column>, <t:column>, <rich:column> items for tables.

JSF table styling and scope is as follows

styleClass – Table level styling and potentially row level styling if in a <*:column> tag
headerClass – Table header level styling
columnClasses – Table column level styling (common area of misconception)
rowClasses- Table row level styling (normally used for backgrounds, selection indicators and roll over shading)

With all of the above tag attributes they turn into class definitions for the table. Using these to define things like header rows or columns; provide column alignment, with and style; table size, borders and fonts works very well. The issue is how do you get down to a single cell and adjust things differently than they normally are in the table. Say you have one cell that had a different border requirement because of emphasis on that data, or a cell that has different font and background needs than the rest of the table.

HTML users would say go and place an ID on the cell and style based on the ID. However, there is no cell definition in the layout of table controls in JSF. Table Cells are generated for you automatically based on the combination of the amount of columns you define in the eg a two column table would have (columns=”2″), and the list of column and element tags you have nested inside of the panelGrid, dataTable, subTable tag. So there is no direct access to a <td> to put an ID on.

To get around this what I did was use a CSS class which I could add to either my rowClasses definition or styleClass definition of a specific <*:column>


for the column
<t:column styleClass="myStyle">
contents that need to be styled in the TD
</t:column>

The style definition for this would then be
.mystyle td{ border:1px solid red;}

What this achieved is placing a red border around the TD or TDs contained in that column tag.  For fine tuning of your tables this method allows you to get to the cell level.  However, it is still not as good as being able to directly place an ID on the cell you want to manipulate and styling that item individually and directly.

---

Possibly related posts: (automatically generated)

• Tackling the layout
• HTML Tutorials IV :: Tables
• How to put a border around single cells in HTML Tables
• Nairobi Drum Table