title: JSF component closing-off table cell
body: <p>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.</p>
  
  <p>My code looks something like this:</p>
  
  <pre><code>&lt;h:panelGrid columns="2"&gt;
      [Other rows that work just fine]
      &lt;h:outputText value="Match [Stuff] to [More Stuff]:" /&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;th&gt;[Stuff]&lt;/th&gt;
              &lt;th&gt;[More Stuff]&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;h:outputText value="Manually Created First Element of Stuff" /&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;h:selectOneMenu value="#{bean.moreStuffSetting}"&gt;
                      &lt;f:selectItem itemLabel="--None--" itemValue="" /&gt;
                      &lt;f:selectItem itemLabel="Manual First Choice" itemValue="manual" /&gt;
                      &lt;f:selectItems
                          value="#{bean.listOfMoreStuff}"
                          var="moreStuff"
                          itemLabel="#{moreStuff.name}" 
                          itemValue="#{moreStuff.value}" /&gt;
                  &lt;/h:selectOneMenu&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;ui:repeat value="#{bean.listOfStuff}" var="stuff"&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;h:outputText value="#{stuff.name}" /&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;h:selectOneMenu value="#{bean.moreStuffSetting}"&gt;
                          &lt;f:selectItem itemLabel="--None--" itemValue="" /&gt;
                          &lt;f:selectItem itemLabel="Manual First Choice" itemValue="manual" /&gt;
                          &lt;f:selectItems
                              value="#{bean.listOfMoreStuff}"
                              var="moreStuff"
                              itemLabel="#{moreStuff.name}" 
                              itemValue="#{moreStuff.value}" /&gt;
                      &lt;/h:selectOneMenu&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;    
          &lt;/ui:repeat&gt;
      &lt;/table&gt;
  &lt;/h:panelGrid&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>&lt;tr&gt;
  &lt;td&gt;Manually Created First Element of Stuff&lt;/td&gt;
  &lt;td&gt;
                              &lt;/td&gt;
                              &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;&lt;select...
  </code></pre>
  
  <p>Two rows.  However, in the nested one below, I get this:</p>
  
  <pre><code>                    &lt;tr&gt;
                          &lt;td&gt;[Label I'm expecting]
                              &lt;/td&gt;
                              &lt;td&gt;&lt;select...
  </code></pre>
  
  <p>... which is exactly how I expected it to behave.</p>
  
  <p>What am I doing wrong?  Am I misusing JSF somehow?  Is there some face-palm-worthy typo in there I'm not seeing?</p>