I have live code demo in https://codebeautify.org/htmlviewer/cb5c1850
It basically is a simple html code. I am trying to indent radio button and checkbox, but I am having hard time.
<tr>
<td>
<table>
<tr>
<td>Select from 1</td>
<tr>
<td><INPUT name="all" type="radio"></td>
<td>all item</td>
</tr>
<tr>
<td><INPUT name="x" type="checkbox"></td>
<td>x item<INPUT TYPE="text" size="8"></td>
<tr>
<td><INPUT name="y" type="checkbox"></td>
<td>y item<INPUT TYPE="text" size="8"></td>
</tr>
</tr>
</tr>
</table>
<table>
<tr>
<td>Select from 2</td>
</tr>
</table>
</td>
</tr>Currently the output looks like:
What I actually want is:
I want to indent x item and y item checkboxes. When I use colspan="2" it only indents the text and not the whole body (checkbox and text). Is there a way I can say move this snippet to right?
<tr>
<td><INPUT name = "y" type="checkbox"></td>
<td>y item<INPUT TYPE="text" size="8"></td>
</tr>
>Solution :
I hope you are looking for something like this.
Check the below snippet.
I created another table with the checkboxes inside the radio button td
<table>
<tbody>
<tr>
<td>Select from 1</td>
<tr>
<td style="vertical-align: baseline;"><INPUT name="all" type="radio"></td>
<td>all item
<table>
<tr>
<td><INPUT name="x" type="checkbox"></td>
<td>x item<INPUT TYPE="text" size="8"></td>
<tr>
<td><INPUT name="y" type="checkbox"></td>
<td>y item<INPUT TYPE="text" size="8"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Select from 2</td>
</tr>
</tbody>
</table>