Form tag won't enclose elements inside a table

Question

I\'ve run into a curious problem; I\'ve got a form inside a , however the form refuses to wrap any tags inside it. I\'ve made a quick JSFiddle here to

Answer 1

The <form> tag can only be placed inside a <td> element or outside the <table> in this case.

If I were you, I'd just put the <form> around the whole table since you said there won't be any other forms within it.

Or, you could replace the <table> completely with <div>s instead that use display: table; or display: table-cell;.

Answer 2

you can only put a form inside a td basically, so you could put those 2 rows inside a new table that you create inside a td
like ...

<table><tr><td><form><table><tr>...</tr><tr>...</tr></table></form></td></tr><tr>...</tr><tr>...</tr></table>

Answer 3

You cannot interrupt the <table> structure with any tags besides <thead>, <tfoot>, <tbody>, <tr>, <th>, or <td>. You form tags need to be encapsulated between two <td> or your entire <table> needs to be placed within the <form> tag.

<table>
    <tr>
        <td>
            <form>
            ...form data...
            </form>
        </td>
    </tr>
</table>

..or..

<form>
    <table>
    ...
    </table>
</form>