HTML:跨多个td列跨越表单

Question

我希望能够在HTML中做这样的事情.它不是有效的HTML,但意图是:

<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>

显然,我不能这样做,因为我不能在<tr>元素内部直接使用表单标记.我能看到的唯一选择是使用讨厌的javascript或改变我的程序的行为.

什么可能是一个解决方案,允许我有一个跨越多列这样的表单？

Answer 1

一种选择是将列与 colspans 像这样组合：

<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>

并使用 CSS 设置表单元素的布局样式。或者您可以使用基于 DIV 的纯布局。

Answer 2

一种解决方案是，如果您的多个列实际上是在DIVs 而不是表中创建的。