I have live code demo in

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>

CodePudding user response：

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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>