Table of contents

Introduction

h:panelGrid HTML Tag

2.1.

Rendered Output

2.2.

Tag Attributes

Example Application

3.1.

Main.xhtml

3.1.1.

Output

Frequently Asked Questions

4.1.

What is meant by JSF?

4.2.

What is “h:panelGrid” in JSF?

4.3.

What is a value-binding expression?

Conclusion

Last Updated: Aug 13, 2025

JSF h:panelGrid

Author Satyam Shandilya

Do you think IIT Guwahati certified course can help you in your career?

Yes

Introduction

In this blog, we will learn about the JSF h:panelGrid. JSF (Java Server Faces) is a Java-based web application framework designed to build web-based user interfaces more accessible. The Java Community Process codified a definition for JavaServer Faces, a standardised display technology. The MVC design pattern separates model and display, allowing developers to concentrate on their primary competencies and communicate more effectively. The HTML table element is rendered using the JSF h:panelGrid tag. The h:panelGrid tag creates a table element in HTML. This article describes the panelGrid function in JSF, beginning with the most straightforward statements and progressing to the most significant modules.

h:panelGrid HTML Tag

<h:panelGrid id = "panel" columns = "2" border = "1"
      cellpadding = "10" cellspacing = "1">
   
   <f:facet name = "header">
      <h:outputText value = "Login"/>
   </f:facet>
   <h:outputLabel value = "Username" />
   <h:inputText  />
   <h:outputLabel value = "Password" />
   <h:inputSecret />
   
   <f:facet name = "footer">
      <h:panelGroup style = "display:block; text-align:center">
         <h:commandButton id = "submit" value = "Submit" />
      </h:panelGroup>
   </f:facet>
</h:panelGrid>

Rendered Output

<table id = "codingNinjas10:panel" border = "1" cellpadding = "10" cellspacing = "1">
    <thead>
       <tr><th colspan = "2" scope = "colgroup">Login</th></tr>
    </thead>
   
    <tfoot>
       <tr>
          <td colspan = "2">
             <span style = "display:block; text-align:center">
                <input id = "codingNinjas10:submit" type = "submit"
                   name = "codingNinjas10:submit" value = "Submit" />
             </span>
          </td>
       </tr>
    </tfoot>
   
    <tbody>
       <tr>
          <td><label>Username</label></td>
          <td><input type = "text" name = "codingNinjas10:codingNinjas17" /></td>
       </tr>
       <tr>
          <td><label>Password</label></td>
          <td><input type = "password" name = "codingNinjas10:codingNinjas21" value = "" /></td>
       </tr>
   
    </tbody>
 </table>

Tag Attributes

The message Tag properties are listed in the tables below:

S.NO.	ATTRIBUTES	DESCRIPTION
	title	A title that is used for accessibility. Browsers often generate tooltips for the value of the title.
2.	border	The width of an element's border in pixels.
3.	id	It is used as a component's identifier.
4.	binding	The component that can use in a backing bean.
5.	rendered	It is a boolean tag attribute, where false reduces rendering.
6.	styleClass	It is used as the class name for Cascading style sheet(CSS).
7.	value	The value of a component, often a value binding.
8.	bgcolor	It is used to change the Background color for the table.
9.	border	It is used to change the Width of the table’s border.
10.	cellpadding	It is used to change the Padding around table cells.
11.	cellspacing	It is used to change the spacing around table cells.
12.	columnClasses	CSS classes for columns, separated by commas.
13.	columns	It is used to handle the number of columns in a table.
14.	footerClass	It is the CSS class for the table footer.
15.	headerClass	It is the CSS class for the table header.
16.	rowClasses	CSS classes for columns, separated by commas.
17.	frame	Valid values for the sides of the frame encircling the table to be drawn are none, above, below, hsides, vsides, lhs, rhs, box and border.
18.	rules	Specification for cell-to-cell lines; permissible values include groups, rows, columns, and all.
19.	summary	A summary of the table's purpose and structure as it relates to non-visual feedback such as speech.
20.	dir	Textual direction Valid values are ltr (left to right) and rtl (right to left) (right to left).
21.	lang	The attributes and text of an element's base language.
22.	onblur	The element's focus has shifted.
23.	onchange	The element's value shifts.
24.	onclick	The mouse button is clicked over the element.
25.	ondblclick	The mouse button is double-clicked over the element.
26.	onfocus	The element is highlighted.
27.	onkeydown	The desired key is pressed.
28.	onkeypress	The desired key is pressed and subsequently released.
29.	onkeyup	The desired key is released.

Example Application

To test the above tag, let's create a test JSF application.

As described in the JSF - First Application chapter, create a project called helloworld in the package com.codingNinjas.test.
Make the following changes to the main.xhtml: Leave the remainder of the files alone.
Compile and run the application to ensure that the business logic works as expected.
Finally, create a war file of the application and deploy it to the Apache Tomcat Webserver.
In the final step, launch your web application using the right URL.

Main.xhtml

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">
   <head>
      <title>JSF h:panelGrid</title>
   </head>
   
   <body>
      <h2>h:panelGrid example</h2>
      <hr />
     
      <h:form>
             <!--Opening the panel grid for dividing the panels-->
         <h:panelGrid id = "panel" columns = "2" border = "1"
            cellpadding = "10" cellspacing = "1">
            <!--facet tag is used-->
            <f:facet name = "header">
               <h:outputText value = "Login"/>
            </f:facet>
            <h:outputLabel value = "Username" />
            <h:inputText  />
            <h:outputLabel value = "Password" />
            <h:inputSecret />
           
            <f:facet name = "footer">
                <!--Using the h:panelGrid tag-->>
               <h:panelGroup style = "display:block; text-align:center">
                  <h:commandButton id = "submit" value = "Submit" />
               </h:panelGroup>
            </f:facet>
         </h:panelGrid>
      </h:form>
   
   </body>
</html>

Then compile and run the application as we did in the JSF - First Application chapter. If everything is good with your application, the following will happen.

Output

Frequently Asked Questions

What is meant by JSF?

JSF (Java Server Faces) is a Java-based web application framework designed to make the building of web-based user interfaces easier. The Java Community Process codified a definition for JavaServer Faces, a standardised display technology.

What is “h:panelGrid” in JSF?

In JSF, the “h:panelGrid” tag is used to generate HTML table tags to place JSF components in rows and columns layout, from left to right, top to bottom.

What is a value-binding expression?

A JavaServer Faces EL expression that refers to a backing bean property. A component tag uses this expression to bind the associated component's value or the component instance to the bean property.

Conclusion

In this blog, we have extensively discussed the JSF h:panelGrid. We hope that this article has helped all of you with additional information about Java Server Faces. For more information about Java Server Faces, you can visit Java Frameworks and Introduction to JSP blogs. For more information about JSF, you can visit JSF-Coding Ninjas and XML-encoding Coding Ninjas blogs. Also, take a look at the Coding Ninjas website for some great information, Web Development, Coding Ninjas Studio Problems, Coding Ninjas Studio Interview Bundle, Coding Ninjas Studio Interview Experiences, Coding Ninjas Courses, Coding Ninjas Studio Contests, and Coding Ninjas Studio Test Series. Do upvote our blog in helping other ninjas grow.

Delighted Programming!