I'd like to be able to do something like this in HTML. It isn't valid HTML, but the intent is there:
<table>
<tr>
<th>Name</th>
<th>Favorite Color</th>
<th> </th>
<th> </th>
</tr>
<tr>
<form action="/updatePerson" method="post">
<input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
<td><input name="name" value="John"/></td>
<td><input name="favorite_color" value="Green"/></td>
<td><input type="submit" value="Edit Person"/></td>
</form>
<td>
<form action="deletePerson" method="post">
<input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
<input type="submit" value="Delete Person"/>
</form>
</td>
</tr>
<tr>
<form action="/updatePerson" method="post">
<input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/>
<td><input name="name" value="Sally"/></td>
<td><input name="favorite_color" value="Blue"/></td>
<td><input type="submit" value="Edit Person"/></td>
</form>
<td>
<form action="deletePerson" method="post">
<input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/>
<input type="submit" value="Delete Person"/>
</form>
</td>
</tr>
</table>
Obviously, I can't do this because I must not have a form tag immediately inside of of a <tr>
element. The only alternatives I can see are to use nasty javascript or to change the behavior of my program.
What might be a solution that would allow me to have a form that spans multiple columns like this?