How to indent checkbox and radio button in html?

November 4, 2021

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>