Styling tables

Almost all JSF UI components support the style and styleClass attributes for creating custom designs using CSS. But the <h:dataTable> tag supports attributes, such as captionClass, captionStyle, columnClasses, rowClasses, headerClass, and footerClass. Therefore, we should have no problem in adding a CSS style to every single part of a table (header, footer, caption, and so on). Obviously, there are plenty of examples that can be built, but let's see three of the most impressive and used ones.

Alternate row colors with the rowclasses attribute

The rowClasses attribute is used to indicate a string of CSS classes separated by a comma. The string is parsed by JSF, and the styles are applied sequentially and repeatedly to rows. For example, you can color the even rows with one color, and the odd rows with some other color, as follows:

<h:dataTable value="#{playersBean.data}" rowClasses="even, odd" var="t">
...

Here, even and odd are the following CSS classes:

.odd {
  background...