Styles h:dataTable has attributes that specify CSS classes for the following: -
The table as a whole (styleClass) -
Column headers and footers (headerClass and footerClass) -
Individual columns (columnClasses) -
Individual rows (rowClasses) The table shown in Figure 5-8 uses styleClass, headerClass, and columnClasses. Note | The h:dataTable rowClasses and columnClasses attributes are mutually exclusive. If you specify both, columnClasses has priority. | Styles by Column Here is how the CSS classes in Figure 5-8 are specified: <link href='styles.css' rel='stylesheet' type='text/css'/> ... <h:dataTable value="#{order.all}" var="order" style header columnClasses="oddColumn,evenColumn"> Those CSS classes are listed below. .orders { border: thin solid black; } .ordersHeader { text-align: center; font-style: italic; color: Snow; background: Teal; } .oddColumn { height: 25px; text-align: center; background: MediumTurquoise; } .evenColumn { text-align: center; background: PowderBlue; } We specified only two column classes, but notice that we have five columns. In this case, h:dataTable reuses the column classes, starting with the first. By specifying only the first two column classes, we can set the CSS classes for even and odd columns (1-based counting). Styles by Row You can use the rowClasses attribute to specify CSS classes by rows instead of columns, as illustrated in Figure 5-9. That data table is implemented like this: <link href='styles.css' rel='stylesheet' type='text/css'/> ... <h:dataTable value="#{order.all}" var="order" style header rowClasses="oddRow,evenRow"> Like column classes, h:dataTable reuses row classes when the number of classes is less than the number of rows. In the preceding code fragment, we have taken advantage of this feature to specify CSS classes for even and odd rows. Caution | We use color names, such as PowderBlue and Medium-Turquoise, in our style classes for the sake of illustration. You should prefer the equivalent hex constants because they are portable, whereas color names are not. |
|