<tr> 内 <td> 显示不正确

Question

Can anybody tell me why my internal rows are not coming inside the td.

<tr id="group_1_id">
    <th>Group 1</th>
    <td>
        <tr id="1"><td>1</td><td>One</td><td><input type="text" name="one" value="one"/></td></tr>
        <tr id="2"><td>2</td><td>Two</td><td><input type="text" name="two" value="two"/></td></tr>
        <tr id="3"><td>3</td><td>Three</td><td><input type="text" name="three" value="three"/></td></tr>
    </td>
</tr>

The 3 table rows comes outside the parent tr. Though they are defined inside the td of my parent tr.

Thanks in advance

Answer 1

I would say that your HTML is not correct. If you want a header section, then use <thead> or <tbody> element, not <th> . I believe your problems emerged from the fact that you have used <th> instead of <thead> .

You may want to use a validator to check whether your HTML is correct. Upload your page to http://validator.w3.org for example, and correct the errors it shows you.

Also check the specification (for example on www.whatwg.org ) because I suppose that you wanted to create more than one header section in a table. A table may have not more than one <thead> , not more than one <tfoot> , and any number of <tbody> elements.

Oh, you have just reedited the question, but the problem is the same :)

A <tr> element cannot be placed inside a <td> or <th> . When that code is parsed, a nested table is automagically created, so the real HTML looks like this:

<tr id="group_1_id">
  <th>Group 1</th>
  <td>
    <table>
      <tbody>
        <tr id="1"><td>1</td><td>One</td><td><input type="text" name="one" value="one"/></td></tr>
        <tr id="2"><td>2</td><td>Two</td><td><input type="text" name="two" value="two"/></td></tr>
        <tr id="3"><td>3</td><td>Three</td><td><input type="text" name="three" value="three"/></td></tr>
      </tbody>
    </table>
  </td>
</tr>