The table to the right was produced using:
<h:dataTable value="#{order.all}" var="order"
styleClass="orders"
headerClass="ordersHeader"
columnClasses="oddColumn,evenColumn">
...
where the CSS classes are:
.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;
}
Note that color names such as
PowderBlue should be replaced
by equivalent hex constants because they are portable, whereas color
names are not.
Note that the column style classes are applied from left to right and
reused to produce the alternating styled column effect.
The table to the right was produced using:
<h:dataTable value="#{order.all}" var="order"
styleClass="orders"
headerClass="ordersHeader"
rowClasses="oddRow,evenRow">
...
Note that the row style classes are applied from top to bottom and
reused to produce the alternating styled row effect.