How to translate this HTML table into JSF table

Question

I want to translate this html table into JSF table

<table border="1">
   <tr>
     <td>OS Verison</td>
     <td>Linux</td>
   </tr>
   <tr>
     <td>Installed packages</td>
     <td>30</td>
   </tr>
   <tr>
     <td>Free HDD Space</td>
     <td>30 GB</td>
   </tr>
   <tr>
     <td>Installed RAM</td>
     <td>2 GB</td>
   </tr>
</table> 

I found many examples on Google how to write JSF table which retrieve data from database as list but none of them shows how to create table with two columns like the above.

P.S

How I can rewrite this code to achieve the same output result?

                    <h:dataTable id="books"
                             columnClasses="list-column-center,
                             list-column-right, list-column-center,
                             list-column-right" headerClass="list-header"
                             rowClasses="list-row" styleClass="list-
                             background" value="#{DashboardController.getDashboardList()}" var="store">   
                    <h:column>
                          <h:outputText  value="Session Timeout"/>
                          <h:outputText  value="Maximum Logged Users"/>
                    </h:column>
                    <h:column>                       
                          <h:outputText value="#{store.sessionTTL} minutes"/>
                          <h:outputText value="#{store.maxActiveUsers}"/>
                    </h:column>

                    <h:column>
                        <f:facet name="header">
                          <h:outputText  value="one"/>
                        </f:facet>
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                          <h:outputText  value="two"/>
                        </f:facet>
                    </h:column>

                </h:dataTable> 

I want to display in a basic way like the first table the content of database table wich has 2 columns with just one row.

Answer 1

There the <h:panelGrid> is for.

<h:panelGrid columns="2" border="1">
    <h:panelGroup>OS Verison</h:panelGroup>
    <h:panelGroup>Linux</h:panelGroup>

    <h:panelGroup>Installed packages</h:panelGroup>
    <h:panelGroup>30</h:panelGroup>

    <h:panelGroup>Free HDD Space</h:panelGroup>
    <h:panelGroup>30 GB</h:panelGroup>

    <h:panelGroup>Installed RAM</h:panelGroup>
    <h:panelGroup>2 GB</h:panelGroup>
</h:panelGrid>

Please note that "plain vanilla HTML" works as good in JSF pages. It's not true that you must use JSF components only if it's solely for layout and/or presentation.

See also:

• Java EE 6 tutorial - Using JSF components
  • Laying Out Components with the h:panelGrid and h:panelGroup Tags
• JSF tag documentation
  • <h:panelGrid> tag documentation