JSF component closing-off table cell - jsf

Question

I'm trying to nest a table inside a h:panelGrid component, and h:selectOneMenu is screwing-up the formatting by closing off the cell it appears within and creating a new (and unwanted) row.
My code looks something like this:
<h:panelGrid columns="2">
[Other rows that work just fine]
<h:outputText value="Match [Stuff] to [More Stuff]:" />
<table>
<tr>
<th>[Stuff]</th>
<th>[More Stuff]</th>
</tr>
<tr>
<td>
<h:outputText value="Manually Created First Element of Stuff" />
</td>
<td>
<h:selectOneMenu value="#{bean.moreStuffSetting}">
<f:selectItem itemLabel="--None--" itemValue="" />
<f:selectItem itemLabel="Manual First Choice" itemValue="manual" />
<f:selectItems
value="#{bean.listOfMoreStuff}"
var="moreStuff"
itemLabel="#{moreStuff.name}"
itemValue="#{moreStuff.value}" />
</h:selectOneMenu>
</td>
</tr>
<ui:repeat value="#{bean.listOfStuff}" var="stuff">
<tr>
<td>
<h:outputText value="#{stuff.name}" />
</td>
<td>
<h:selectOneMenu value="#{bean.moreStuffSetting}">
<f:selectItem itemLabel="--None--" itemValue="" />
<f:selectItem itemLabel="Manual First Choice" itemValue="manual" />
<f:selectItems
value="#{bean.listOfMoreStuff}"
var="moreStuff"
itemLabel="#{moreStuff.name}"
itemValue="#{moreStuff.value}" />
</h:selectOneMenu>
</td>
</tr>
</ui:repeat>
</table>
</h:panelGrid>
The problem occurs with that first h:selectOneMenu element. (The h:selectOneMenu element inside ui:repeat is doing exactly what I expect it to, however.) I'm expecting "Manually Created First Element of Stuff" and that drop-down to appear as two cells in the same row. However, this is what's showing up in the generated HTML:
<tr>
<td>Manually Created First Element of Stuff</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td><select...
Two rows. However, in the nested one below, I get this:
<tr>
<td>[Label I'm expecting]
</td>
<td><select...
... which is exactly how I expected it to behave.
What am I doing wrong? Am I misusing JSF somehow? Is there some face-palm-worthy typo in there I'm not seeing?

Answer 1

The <h:panelGrid> picks the first sibling in the JSF component tree to start a new table cell. The plain HTML <table> element which you've there isn't a JSF component.
Wrap it in a <h:panelGroup>.
<h:panelGrid columns="2">
<h:outputText value="Match [Stuff] to [More Stuff]:" />
<h:panelGroup>
<table>
...
</table>
</h:panelGroup>
</h:panelGrid>
An alternative is to just use <h:dataTable> instead.