How to indent checkbox and radio button in html?

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>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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>

Method 2

Try to span the first column using colspan .

<tr>
  <td>
    <table>
      <tr>
        <td>Select from 1</td>
      <tr colspan="2">
        <td>
          <INPUT name="all" type="radio">
        </td>
        <td>all item</td>
      </tr>
      <tr>
          <td></td>
        <td>
          <INPUT name="x" type="checkbox">
        </td>
        <td>x item <INPUT TYPE="text" size="8">
        </td>
      <tr>
          <td></td>
        <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>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0