Can you make a section of a table belong to a form using legal HTML?

Question

I've tried entering the following in the HTML validator, but it failed to validate even when I used the "Validate HTML fragment" option:

<table>
  <form action="foo">
    <tr>
      <td>tables + forms = BOOM</td>
    </tr>
  </form>
</table>

I think what I'm trying to do here is pretty clear, but the validator seems to be telling me this isn't allowed :(.

What if I want a single table to contain multiple forms? I guess there are alot of possibilities for how to split up a into several forms, but it seems reasonable to at least allow tr and/or tbody be children of form.

Using separate tables does not give the same effect, because the column widths may not end up being the same.

Answer 1

As you've seen, <form> elements can only appear entirely within a table cell (<td>), or entirely encapsulating a <table>. You're not going to be able to validate any other way; the HTML DTDs all prohibit non-table elements as first-level child elements within <table> or <tr>.

That said, most browsers will understand what you're trying to do even if you don't validate.

Answer 2

Unfortunately, HTML4 specifies that you can't have a <form> directly inside a <table>, but you can have a form as a child of a <td>, maybe try this instead:

<table>
  <tr>
    <td>
      <form action="foo">
        td + form = SUCCESS!
      </form>
    </td>
  </tr>
</table>

(The is still true in HTML5 where a <th> may only contain phrasing elements, whereas <form> is classified as a flow element.)

Answer 3

Have a look e.g. here at the list of what each type of element can contain.

Tables are fussy: they can contain only caption?, ( col* | colgroup* ), (( thead?, tfoot?, tbody+ ) | ( tr+ )).

A form is 'block content' so you can put it anywhere that whose content can be 'Block', which includes anywhere whose content can be 'Flow', which includes inside table cells: so you can put a form inside a td.