资料来源： From PmWiki@caterpillar
作者： caterpillar
　　<h:dataTable>配合<h:column>来以表格的方式显示数据，< h:column>中只能包括 JSF组件或者是<f:facet>，JSF支援两种facet：header与footer。分别用以设定表格的表头与表尾文字，一个设定的例子如下：
<h:dataTable value="#{tableBean.userList}" var="user">
<h:column>
<f:facet name="header">
<h:outputText value="Name"/>
</f:facet>
<h:outputText value="#{user.name}"/>
<f:facet name="footer">
<h:outputText value="****"/>
</f:facet>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Password"/>
</f:facet>
<h:outputText value="#{user.password}"/>
<f:facet name="footer">
<h:outputText value="****"/>
</f:facet>
</h:column>
</h:dataTable>
　　所产生的表格如下所示：

　　另外，对于表头、表尾仍至于每一行列，都可以分别设定CSS风格，例如下面这个styles.css摘录自Core JSF一书：
styles.css
.orders {
border: thin solid black;
}

.ordersHeader {
text-align: center;
font-style: italic;
color: Snow;
background: Teal;
}

.evenColumn {
height: 25px;
text-align: center;
background: MediumTurquoise;
}

.oddColumn {
text-align: center;
background: PowderBlue;
}
　　可以在我们的页面中如下加入：
....
<link href="styles.css" rel="stylesheet" type="text/css"/>
....
<h:dataTable value="#{tableBean.userList}" var="user"
styleClass="orders"
headerClass="ordersHeader"
rowClasses="evenColumn,oddColumn">
<h:column>
<f:facet name="header">
<h:outputText value="Name"/>
</f:facet>
<h:outputText value="#{user.name}"/>
<f:facet name="footer">
<h:outputText value="****"/>
</f:facet>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Password"/>
</f:facet>
<h:outputText value="#{user.password}"/>
<f:facet name="footer">
<h:outputText value="****"/>
</f:facet>
</h:column>
</h:dataTable>
　　则显示的表格结果如下：

返回目录