HTML indent table - html

Question

<table class="layout-table">
<tr>
<td><strong>3. Has the person completed all required training within the past three years?</strong><br/><br/></td>
</tr>
<tr>
<td><strong>a. Copy of It</strong>
<p:selectOneRadio id="radio3" value="#{question3a}">
<f:selectItem itemLabel="Yes" itemValue="0" />   
<f:selectItem itemLabel="No" itemValue="1" />   
<f:selectItem itemLabel="NA" itemValue="2" />   
</p:selectOneRadio>
<br/>
<h:outputText id="counter3" />
</td>
</tr>
</table>
What I am trying to do is get a table to look like this
3. Has the person completed all required training within the past three years?
a. Copy of It Yes [] No[] NA[]
b. (another one) Yes [] No[] NA[]
I dont know how to tab the a and b and also if I make it where the buttons are to the right of the columns then it spaces it all the way to the very right hand side and I am not sure why.... Is this possible to do without CSS? If not then CSS would be fine too. Thanks for the help!

Answer 1

You might want to mark it up so it looks like this. I do agree that tables probably aren't the best solution for this problem.
<table class="layout-table">
<tr>
<td><strong>3. Has the person completed all required training within the past three years?</strong>
</tr>
<tr>
<td>
<table width="600" cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto;">
<tr>
<td>
<p:selectOneRadio id="radio3" value="#{question3a}">
<f:selectItem itemLabel="Yes" itemValue="0" />   
<f:selectItem itemLabel="No" itemValue="1" />   
<f:selectItem itemLabel="NA" itemValue="2" />   
</p:selectOneRadio>
</td>
</tr>
<tr>
<td>
<p:selectOneRadio id="radio3" value="#{question3a}">
<f:selectItem itemLabel="Yes" itemValue="0" />   
<f:selectItem itemLabel="No" itemValue="1" />   
<f:selectItem itemLabel="NA" itemValue="2" />   
</p:selectOneRadio>
</td>
</tr>
</table>
</td>
</tr>
</table>