JSF pages can be layed out using HTML tables, but it is tedious. JSF provides the <h:panelGrid> tag to alleviate some of the tedium. The <h:panelGroup> tag serves to group items in a <h:panelGrid> so that they are treated as a single table entry.

You can lay out components in a grid of rows and columns by using the <h:panelGrid> tag with the columns attribute, like this:

     <h:panelGrid columns="3">
       ...
     </h:panelGrid>
      

Components are laid out in columns from left to right and top to bottom, in the order they appear in the body of the tag.

Within a <h:panelGrid> tag, <h:panelGroup> gives you control over what is treated as a table entry.

The results.xhtml page in the Unstyled example demonstrates a simple use of <h:panelGrid>: laying out labels for JSF HTML tags. The index.xhtml page carries the idea further, also laying out error messages for the tags.

The index.xhtml and results.xhtml pages in the Styled example are identical except for the addition of a <h:outputStylesheet> tag in the <h:head> tag. This adds styling to the layout and makes the error messages appear red.

<h:panelGrid> is often used with <h:panelGroup>, which groups two or more components so they are treated as one. For example, you might group an input field and its error message, like this:

     <h:panelGrid columns="2">
        ...
        <h:panelGroup>
           <h:inputText id="name" value="#{user.name}">
           <h:message for="name"/>
        </h:panelGroup>
        ...
     </h:panelGrid>
      

Grouping the text field and error message puts them in the same table cell.

Sometimes <h:panelGrid> makes odd decisions about what to treat as a table entry. By using <h:panelGroup> tags you can control the decisions.