一、初識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如何來格式成具有拆分合并樣式的表
這要用到panelGrop，它的作用是將封裝在內的元件作為一個元件來看待，如果panelGrop
中封裝了一個panelGrid，則被封裝的表放在其他表中就相當于一個子表。通過paneGrop來封
裝各UI組件的辦法，可以實現表格的拆分目的。
<h:panelGrop>
<h:panelGrid>
...
</h:panelGrid>
</h:panelGrop>
或者：
<h:panelGrop>
<h:outputText value="您好，朋友！"/>
<h:outputText value="您好，朋友！"/>
</h:panelGrop>
它們在容器中相當于一個顯示元件(好像本來是一個人住一間房，現在是更多的人住一間房)。
三、如何在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 p 中居中，而不是指表格在<body>(屏幕)中居中。我
要在屏幕中居中怎么辦？有兩種辦法，一種是通過在<body>中加入格式說明，第二種辦法是在
panelGrid的外面再套一個panelGrid。即：
<h:panelGrid style="text-align:center;width=979px;">
<h:panelGrop>
<h:panelGrid style="text-align:center">
<h:outputText value="您好，朋友！您好，朋友！"/>
<h:outputText value="您好，朋友！"/>
<h:outputText value="您好，朋友！"/>
</h:panelGrid>
</h:panelGrop>
</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>
上面語句的作用是將本塊中的內容上對齊，橫向居中對齊。