大可制作：QQ群：31564239（asp|jsp|php|mysql）

JSF Gossip: 表头、表尾

<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>
 
则显示的表格结果如下：