<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"/>