> <table border="1">
> <tr>
> <th>Today's Date</th>
> <th>Current Weather</th>
> </tr>
> <tr>
> <td align="right">11/15/2006</td>
> <td>Sunny</td>
> </tr>
> </table>
[snip]
> <h:panelGrid columns="2">
> <h:panelGrid style="text-align: center" columns="2">
> <h:outputText value="Today's Date"/>
> <h:outputText value="Current Weather"/>
> </h:panelGrid>
> <h:panelGrid style="text-align: right" columns="1">
> <h:outputText value="#{myBean.todaysDate}"/>
> </h:panelGrid>
> <h:panelGrid columns="1">
> <h:outputText value="#{myBean.weather}"/>
> </h:panelGrid>
> </h:panelGrid>
These two aren't even close. The HTML table uses <th> to define the headers,
so your <h:panelGrid> should have the <f:facet name="header"> to get the same
thing.
But more importantly, the nesting of panel grids you have will not give the
same result as what you think. The outer grid says 2 columns and, after
layout, you'll have 2 rows. But the upper left cell from the outer table will
contain the first inner panel grid (2 cols, 1 row with header), the upper right
will have a table (1 row, 1 col), the bottom left will have a table (1 row, 1
col), and the bottom right cell will be empty.
<h:panelGrid> supports the columnClasses attribute where you can specify
classes to assign to the columns; the best way to get what you want (if the
upper table is what you want) would be:
<h:panelGrid columns="2" columnClasses="justifyRight,justifyCenter">
<f:facet name="header">
<h:outputText value="Today's Date" />
<h:outputText value="Current Weather" />
</f:facet>
<h:outputText value="#{myBean.todaysDate}" />
<h:outputText value="#{myBean.weather}" />
</h:panelGrid>
Just define the justifyRight and justifyCenter in the stylesheet to justify
right and center appropriately. You'll probably also want to use the
headerClass attribute of <h:panelGrid> to have the header formatted differently
than the standard columns while you're at it.
