Re: jsf dataTable - header and data row/column style

The best way to do this is to use CSS to style the table and the whole
page really.

Check out this link for for info on the vertical-align.
http://reference.sitepoint.com/css/vertical-align


Thanks
Bryce Martin
Programmer/Analyst I
570-546-4777



"Lim Hock-Chai" <Lim.Hock-Chai@xxxxxxxxxxxxxxx>
Sent by: web400-bounces@xxxxxxxxxxxx
06/10/2011 11:06 AM
Please respond to
Web Enabling the AS400 / iSeries <web400@xxxxxxxxxxxx>


To
<web400@xxxxxxxxxxxx>
cc

Subject
[WEB400] jsf dataTable - header and data row/column style






Hello,
I've received a mock up html file from my web-page designer for a new,
my first, web project. This mock up is what I'm supposed to use to
create my first web app. In this mock up file, it has a <table> tag.
The table column header and column data for this table looks like below:

Table Header <td> is as below:
<td class="Rowwith2XBottomLine" valign="center" align="middle"
width="152" bgcolor="#f9f9f9">Column1 Header</td>
<td class="Rowwith2XBottomLine" valign="center" align="middle"
width="10" bgcolor="#f9f9f9">Column2 Header</td>
....

Table Data <td> is as below:
<td class="RowwithBottomDotLine" valign="top" nowrap align="left"
height="20">Column 1 Data</td>
<td class="RowwithBottomDotLine" valign="top" nowrap align="left">Column
1 Data</td>
...



So far below is what I did to translate above into jsf equivalent. My
question for this post is how do I add the valign/align/width.. in the
above <td> tag into my <h:column>?


<h:dataTable value=#{CarbonCopyAndForwardingListBean.dataList}
var="item"
columnClasses="RowwithBottomDotLine, RowwithBottomDotLine,
RowwithBottomDotLine,RowwithBottomDotLine"
headerClass="Rowwith2XBottomLine">
<h:column>
<f:facet name="header">Column1 Header</f:facet>
<h:outputText value="#{item.column1Data}" />
</h:column>

<h:column>
<f:facet name="header">Column2 Header</f:facet>
<h:outputText value="#{item.column2Data}" />
</h:column>
....
</h:dataTable>

Thanks