JSF component inside HTML table -- not rendering properly

Question

I have a HTML table like the one below. In one of those columns (td) I have a JSF component. When I run the app, the JSF component (even if its a simple inputText or panelGrid or panelGroup) is not getting inside the td. Instead, it forms a seperate table after this td.
Code I have:
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>... ..MULTIPLE Td's here - Deleted for simplicity </td>
<td class="topNav">
Blog Directory
</td>
<td>
<img src="./images/top_button_right.gif"/>
</td>
<td class="topNav">
<f:panelGroup>
<h:inputText value="Username"/>
<h:inputSecret value="Password"/>
</f:panelGroup>
</td>
</tr>
</tbody>
</table>
What I expected:
username, passwd field inside the top level HTML table.
What comes: (as a result of running thsi JSF page )
<table> -- Original table
<td> </td> -- -TD that had the inputText - comes empty here
</table>
<table>
<tbody>
<tr>
<td><input type="text" name="_id1:header:EasyHeader:_id4" value="Username" /><input type="password" name="_id1:header:EasyHeader:_id5" value="" /></td>
</tr>
<tr>
<td><table>
I am a newbie to JSF & due to the complexity of the layout & page, I m unable to get rid of the HTML tags totally.
Thanks in advance.
Ganesh

Answer 1

Found the solution to the problem.
wrapped the entire HTML page till the JSF component ( panelGrid) under <f:verbatim>.
something like this
<f:verbatim>
<table>
<tr> <td>...</td>
<td>
</f:verbatim>
<h:panelGrid> ... </h:panelGrid>
<f:verbatim>
</td>
</table>
</f:verbatim>