這個標簽可以用來作簡單的組件排版，它會使用HTML表格標簽來繪制表格，并將組件置于其中，主要指定columns屬性，例如設定為 2：
<h:panelGrid columns="2">
<h:outputText value="Username"/>
<h:inputText id="name" value="#{userBean.name}"/>
<h:outputText value="Password"/>
<h:inputText id="password" value="#{userBean.password}"/>
<h:commandButton value="submit" action="login"/>
<h:commandButton value="reset" type="reset"/>
</h:panelGrid>
則自動將組件分作 2 個 column來排列，排列出來的樣子如下：


<h:panelGrid>的本體間只能包括JSF組件，如果想要放入非JSF組件，例如簡單的樣版（template）文字，則要使用 <f:verbatim>包括住，例如：
<h:panelGrid columns="2">
<f:verbatim>Username</f:verbatim>
<h:inputText id="name" value="#{userBean.name}"/>
<f:verbatim>Password</f:verbatim>
<h:inputText id="password" value="#{userBean.password}"/>
<h:commandButton value="submit" action="login"/>
<h:commandButton value="reset" type="reset"/>
</h:panelGrid>



<h:panelGroup>
這個組件用來將數個JSF組件包裝起來，使其看來像是一個組件，例如：
<h:panelGrid columns="2">
<h:outputText value="Username"/>
<h:inputText id="name" value="#{userBean.name}"/>
<h:outputText value="Password"/>
<h:inputText id="password" value="#{userBean.password}"/>
<h:panelGroup>
<h:commandButton value="submit" action="login"/>
<h:commandButton value="reset" type="reset"/>
</h:panelGroup>
</h:panelGrid>
在<h:panelGroup>中包括了兩個<h:commandButton>，這使得< h:panelGrid>在處理時，將那兩個<h:commandButton>看作是一個組件來看待，其完成的版面配置如下所示：


下面轉載與http://blog.csdn.net/liyong1115/archive/2008/02/27/2125029.aspx
一、初識panelGrid和與之相關的設計元素

　　panelGrid相當于HTML的表格，在設計中與之相關的組件有panelGrop，與之相配合的CSS

設計元素有styleClass、headerClass、footerClass、rowClasses、columnClasses。這些元

素的有機組合，可以設計出不同的輸出畫面。

　　在HTML網頁設計中，表格有<table><tr><td>等標記符號，也可以在標記符號內嵌入CSS控

制語句來控制輸出的表現形式。JSF中的panelGrid雖然與HTML表格相對應，但是二者在設計時

還是有很大差異的。例如我們假設有一個HTML的表如下：

<table>
  <tr>
    <td>...</td>
    <td>...</td>
  </tr>

  <tr>
    <td>...</td>
    <td>...</td>
  </tr>
</table>

則panelGrid與之對應的標記是：

<h:panelGrid column="2">
...
...
...
...

</h:panelGrid>

它只有外殼標記，沒有行控制和列控制標記。

　　熟悉HTML編程的道人一眼就看出，只有外殼標記，你該怎樣控制行或列的輸出樣式呢？別

急，JSF設計者已經想到了，他們設計出

了styleClass、headerClass、footerClass、rowClasses、columnClasses這些設計元素來控

制行與列的輸出樣式，其中
styleClass是格式表格總的外觀的，如表格的長與寬、外邊框樣式、表格的背景樣式等。
headerClass、footerClass分別是控制表的header和footer的。
rowClasses和columnClasses分別是控制表格的行與列樣式的。

　　還是舉個例子說一下，我們有下例：

<h:panelGrid columns="1" cellpadding="5"
      styleClass="styleClazz"
      headerClass="headerClazz"
      footerClass="footerClazz"
      rowClasses="row1,row2"
      columnClasses="column1"
      >

  <f:facet >
    <h:outputText value="您好，朋友！"/>
  </f:facet>

    <h:outputText value="您好，朋友！"/>
    <h:outputText value="您好，朋友！"/>
    <h:outputText value="您好，朋友！"/>
    <h:outputText value="您好，朋友！"/>
    <h:outputText value="您好，朋友！"/>
    <h:outputText value="您好，朋友！"/>

  <f:facet >
    <h:outputText value="您好，朋友！"/>
  </f:facet>
</h:panelGrid>

　　這就是一個表格，columns="1"，規定這個表只有一列，cellpadding="5"說明了邊框外線

與內線的距離是5個像素。這個表由一個頭部、一個尾部和中間表身三部分組成。headerClass

是格式頭部樣式的，footerClass是格式尾部樣式的，rowClasses和columnClasses是格式行與

列樣式的。 rowClasses="row1,row2"規定了表格的行與行交替使用row1和row2樣式類來格式

輸出樣式，同樣，列也是，并且還可以用3個、4個或更多個row3、row4...來依序交替格式輸

出樣式。

對應的樣式類可以像以下這樣編寫在css文件中：


/*styleClass處于父類的地位,headerClazz,rowClasses等的字體設置取em時,
其在屏幕上顯示的大小會參照該類字體的大小設置而放大或縮小*/

.styleClazz{
  font-size:1em;
  color:blue;
  border-style:solid;
  border-color:red;
  border-width: 1px;
}

.headerClazz{
  background-color:#3F536B;
  font-family:宋體;
  font-size:1.5em;
  color:white;
  text-align:center;
}

.footerClazz{
  background-color:#3F536B;
  font-family:宋體;
  font-size:1.5em;
  color:white;
  text-align:center;
}

/* 當行樣式與列樣式都用時,則行樣式服從于列樣式
邊框的顏色需要在columnClasses中定義,
在rowClasses中定義不起作用
*/

.row1{
  background-color:#FFFFFF;
}

.row2{
  background-color:#C9D3E0;
}

.column1{
  border-style:solid;
  border-color:red;
  border-width: 1px;
}

.column2{
}


你可以用CSS在JSP中的語法將其編寫在JSP文件中。

　　二、panelGrid如何來格式成具有拆分合并樣式的表

　　這要用到panelGroup，它的作用是將封裝在內的元件作為一個元件來看待，如果panelGroup

中封裝了一個panelGrid，則被封裝的表放在其他表中就相當于一個子表。通過panelGroup來封

裝各UI組件的辦法，可以實現表格的拆分目的。

<h:panelGroup>
  <h:panelGrid>
   ...
  </h:panelGrid>
</h:panelGroup>

或者：

<h:panelGroup>
    <h:outputText value="您好，朋友！"/>
    <h:outputText value="您好，朋友！"/>
</h:panelGroup>

它們在容器中相當于一個顯示元件(好像本來是一個人住一間房，現在是更多的人住一間房)。

　　三、如何在panelGrid中實現設計元素對齊

　　panelGrid是通過CSS語言來格式輸出樣式的，在CSS語言中可用vertial-align:...;來格

式輸出元素縱向對齊，使用text-align:...;來實現輸出元素橫向對齊。其中text-align有點

迷糊人，因為從字面看它應該是針對文本的，其實它對其他元素也起作用。

　　在對齊的設計中有個居中對齊的問題容易繞人。在HTML中可用<center>...</center>來實

現被封裝的視圖元素居中，但在CSS中好像沒有類似語句。其實還是有的，只不過繞了一個彎

。你想啊，說到居中，那究竟是在多寬的范圍內居中？是我這個元素在封裝我的容器中居中，

還是被我封裝的元素在我這個容器中居中？這個問題CSS與HTML處理語義是不樣的。

在HTML中表格居中是：
<table align="center">
...
</table>

表格在這里的居中是指這個表格“我”在封裝我的容器<body>中居中，具體表現為在屏幕上居

中，但是您不能通過

<h:panelGrid align="center">
...
</h:panelGrid>

來實現panelGrid在<body>中居中。因為panelGrid標記根本不支持這個語句。還是要通過CSS

來實現。下面這個使用CSS語句描述居中的語義與HTML使用align="center"語義不同。

<h:panelGrid style="text-align:center">
  <h:outputText value="您好，朋友！"/>
</h:panelGrid>

這個語句說的是me這個對象在panelGrid 中居中，而不是指表格在<body>(屏幕)中居中。我

要在屏幕中居中怎么辦？有兩種辦法，一種是通過在<body>中加入格式說明，第二種辦法是在

panelGrid的外面再套一個panelGrid。即：


<h:panelGrid style="text-align:center;width=979px;">

  <h:panelGroup>
   <h:panelGrid style="text-align:center">
    <h:outputText value="您好，朋友！您好，朋友！"/>
    <h:outputText value="您好，朋友！"/>
    <h:outputText value="您好，朋友！"/>
   </h:panelGrid>
  </h:panelGroup>

</h:panelGrid>

這樣就實現了被封裝的panelGrid B 在 A 中居中，注意，這里的width=979px;是必須的，它

規定了居中是在多寬的范圍內居中！數字多少可以調整，但是你不能不寫這個約定，否則，被

封裝在里面的panelGrid還是不會在屏幕上居中。

　　還有一點注意，里面panelGrid B 的text-align繼承外面panelGrid A 中的text-align屬

性的約定，即里面的panelGrid不寫style="text-align:center"，對象me們也會在里

面panelGrid中居中。但是里面的panelGrid不繼承外面的width，像上面，里面panelGrid的顯

示寬度與最長的me1有關，而不是外面panelGrid A的寬度979px。

　　四、其他
　　■當屏幕的顯式格式是1024 X 768 時，最外面的panelGrid寬度取979px是屏幕最大化時

底部滾動條由出現到不出現的臨界值，如超過979則滾動條就會出現。
　　■可以按照是對<table><tr>還是對<td>起作用的CSS類，進行封裝。如寫在style語句中

，則形如下：

<h:panelGrid style="width:240px;vertial-align:top;text-align:center;">
...
</h:panelGrid>