Question

Whats the advantage is JSF 2 Panel grid vs an HTML table?

e.g.

<h:panelGrid columns="1">
 <h:outputText value="Hello"/>
</h:panelGrid>

vs

<table>
<tr>
<td>
 <h:outputText value="Hello"/>
</td>
</tr>
</table>

Answer 1

"h:panelGrid" tag in JSF is used to generate HTML table tags. It places JSF components in rows and columns layout. The Advantage of using it is you do not have to type all those html tags.

For example, here you have to type all these html tags in your coding,

<table>
<tbody>
<tr>
    <td>
        Enter a Phone number : 
    </td>       
    <td>
        <h:inputText id="input1" value="#{bean.input1}" 
            size="20" required="true"
            label="Number" >
            <f:convertNumber />
        </h:inputText>
    </td>
    <td>
        <h:message for="input1" style="color:red" />
    </td>
</tr>
</tbody>
</table>

but the same thing can be done using “h:panelGrid” by typing the following,

<h:panelGrid columns="3">
    Enter a Phone number : 
    <h:inputText id="input1" value="#{bean.input1}" 
        size="20" required="true"
        label="Number" >
        <f:convertNumber />
    </h:inputText>
    <h:message for="input1" style="color:red" />
</h:panelGrid>

JSF doc gives more details, and panelGrid has got some limitations too.
It would be very easy to align various panels and your can have JSF form control () within the panel, without much help from UI developer.

One of the limitations with PanelGrid is : It would not be easy to apply CSS styles. You need look for alternate solutions. But with standard html tags it would be easy to apply CSS styles. JSF2 Primefaces gives themes but I could not avoid CSS styles in a real time application development.
But with PanelGrid you can use almost any JSF control that fits in the rendered html of PanelGrid.