HTML: Spanning a form across multiple td columns

forms, html, html-table

Solution

One option is to combine the columns with colspans like this:

<table>
    <tr>
        <th>
            Name
        </th>
        <th>
            Favorite Color
        </th>
        <th>
            &nbsp;
        </th>
        <th>
            &nbsp;
        </th>
    </tr>
    <tr>
        <td colspan="4">
            <form action="/updatePerson" method="post">
                <input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
                    <input name="name" value="John"/>
                    <input name="favorite_color" value="Green"/>
                    <input type="submit" value="Edit Person"/>
            </form>
            <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>
        <td colspan="4">
            <form action="/updatePerson" method="post">
                <input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/>
                <input name="name" value="Sally"/>
                    <input name="favorite_color" value="Blue"/>
                    <input type="submit" value="Edit Person"/>
            </form>
            <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>

And style the form element's layout with CSS. Or you can go with a pure DIV based layout.

Problem

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>&nbsp;</th> <th>&nbsp;</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?

Original source

Related problems