JavaServer Faces

Giving the Table Some Style

Let’s talk about style. The preferred way to describe the look of HTML documents nowadays is with Cascading Style Sheets (CSS), so JSF supports this mechanism. All of the HTML component action elements support one or more attributes that let you specify CSS classes that you then declare in a style sheet.

The <h:dataTable> element is a good example:

<h:dataTable value="#{reportHandler.sortedReportsModel}" var="report"
  first="#{reportHandler.firstRowIndex}"
  rows="#{reportHandler.noOfRows}" 
  styleClass="tablebg" rowClasses="oddRow, evenRow" 
  columnClasses="left, left, left, right, left">
  ...
</h:dataTable>

All JSF HTML components support the styleClass attribute. Its value is used as is as the value of the class attribute of the generated HTML element. When you specify it for the <h:dataTable> element, it ends up as the class attribute value of the HTML <table> element. For a component type that isn’t rendered normally as an HTML element (such as a plain output component), specifying a styleClass value results in a <span> element with the class attribute, rendered around the component’s value.

You can also specify classes to use for the <tr> and <td> elements the <h:dataTable> action generates. The rowClasses attribute takes a comma-separated list of class names that are used for the <tr> elements. If two classes are specified, for instance, the first one is used for the first row and the second one for the second row, then the first class is used again ...