Eu freqüentemente me vejo querendo fazer uma tabela de formulários - um monte de linhas, cada linha sendo um formulário separado com seus próprios campos e botão de envio. Por exemplo, aqui está um exemplo de aplicação de pet shop - imagine que esta é uma tela de checkout que lhe dá a opção de atualizar as quantidades e atributos dos animais de estimação que você selecionou e salvar suas alterações antes de fazer o check out:

Pet    Quantity Color Variety   Update
snake         4 black rattle    update
puppy         3 pink  dalmatian update

Eu adoraria poder fazer isso usando HTML que se parece com isso:

<table> 
<thead><tr><th>Pet</th> <th>Quantity</th> <th>Color</th> <th>Variety</th> <th>Update</th></tr></thead>
<tbody>
     <tr>
          <form>
            <td>snake<input type="hidden" name="cartitem" value="55"></td>
            <td><input name="count" value=4/></td>
            <td><select name="color"></select></td>
            <td><select name="variety"></select></td>
            <td><input type="submit"></td>
          </form>
     </tr>
</tbody>
</table>

Esta é basicamente uma tabela cheia de formulários, um formulário por linha. Acertar a atualização uma vez permite que você atualize essa linha específica (este não é um exemplo real, meus aplicativos reais realmente exigem independência de linhas).

Mas isso não é HTML válido. De acordo com as especificações, um<form> tem que ser completamente dentro de um<td> ou completamente fora de um<table>. Este html inválido quebra as bibliotecas javascript e é uma dor enorme para lidar.

Acabo fazendo uma tabela para conter cabeçalhos de coluna e, em seguida, criando uma tabela por formulário. Mas isso requer larguras de coluna fixas para que as entradas sejam alinhadas em colunas puras, o que é insatisfatório. Como você acaba lidando com esse problema? Existe uma solução fácil óbvia que estou perdendo? Como faço uma tabela de formulários?