格式化嵌套表

Question

从this thread开始，我被建议使用嵌套表，然后执行预期的操作/功能。

<table>
    <thead class="center">
        <tr>
            <th><a href="viewfaculty?columnName=professor_id">ID</a></th>
            <th><a href="viewfaculty?columnName=professor_last_name">L. Name</a></th>
            <th>F. Name</th>
            <th>M. Name</th>
            <th>Sex</th>
            <th><a href="viewfaculty?columnName=professor_employment_status">Empl. Status</a></th>
            <th><a href="viewfaculty?columnName=professor_department">Dept.</a></th>
            <th>Modify</th>
        </tr>
    </thead>

    <tbody>
        <c:forEach var="professor" items="${facultyList}">
        <tr>
            <td>
                <form action="savechanges" method="post">
                <table>
                    <tr>
                        <td align="center">${professor.profId}</td>
                        <td>${professor.profLastName}</td>
                        <td>${professor.profFirstName}</td>
                        <td>${professor.profMiddleName}</td>
                        <td align="center">${professor.profSex}</td>
                        <td align="center">${professor.profEmplStatus}</td>
                        <td align="center">${professor.profDept}</td>

                        <td align="center">
                            <c:choose>
                                <c:when test="${professor.profEmplStatus.equals('FULL')}">
                                    <select name="profEmplStatus" required>
                                        <option value="FULL" selected>FULL</option>
                                        <option value="PART">PART</option>
                                        <option value="RET">RET</option>
                                        <option value="TRMTD">TRMTD</option>
                                    </select>
                                </c:when>

                                <c:when test="${professor.profEmplStatus.equals('PART')}">
                                    <select name="profEmplStatus" required>
                                        <option value="FULL">FULL</option>
                                        <option value="PART" selected>PART</option>
                                        <option value="RET">RET</option>
                                        <option value="TRMTD">TRMTD</option>
                                    </select>
                                </c:when>

                                <!-- more <c:when> -->
                            </c:choose>
                        </td>

                        <td align="center">
                            <c:choose>
                                <c:when test="${professor.profDept.equals('BSCS-SE')}">
                                    <select name="profDept" required>
                                        <option value="BA-MMA">BA-MMA</option>
                                        <option value="BFDT">BFDT</option>
                                        <option value="BS-AN">BS-AN</option>
                                        <option value="BS-GPD">BS-GPD</option>
                                        <option value="BSBA-FM">BSBA-FM</option>
                                        <option value="BSBA-MKT">BSBA-MKT</option>
                                        <option value="BSCS-SE" selected>BSCS-SE</option>
                                        <option value="BSIT-WD">BSIT-WD</option>
                                        <option value="GENED">GENED</option>
                                    </select>
                                </c:when>

                                <c:when test="${professor.profDept.equals('GENED')}">
                                    <select name="profDept" required>
                                        <option value="BA-MMA">BA-MMA</option>
                                        <option value="BFDT">BFDT</option>
                                        <option value="BS-AN">BS-AN</option>
                                        <option value="BS-GPD">BS-GPD</option>
                                        <option value="BSBA-FM">BSBA-FM</option>
                                        <option value="BSBA-MKT">BSBA-MKT</option>
                                        <option value="BSCS-SE">BSCS-SE</option>
                                        <option value="BSIT-WD">BSIT-WD</option>
                                        <option value="GENED" selected>GENED</option>
                                    </select>
                                </c:when>

                                <!-- more <c:when> -->
                            </c:choose>
                        </td>

                        <td class="center">
                            <input type="hidden" name="profId" value="${professor.profId}" />
                            <input type="submit" value="Save" />
                        </td>
                    </tr>
                </table>
                </form>
            </td>
        </tr>
        </c:forEach>
    </tbody>
</table>

这些表格虽然显得格外混乱，如截图所示：

如何操作，使其显示为最初的用途？

Answer 1

html设计有嵌套表，其中包含外表的单元格内的form标记。从浏览器输出的图片中可以看到嵌套表占用的空间属于第一列。但是你需要两个表都有相同数量的collumns。计算嵌套表中的多个列，并使用colspan标记的<td>属性来扩展单元格以占用专用于外部表的其他列的空间。

<td colspan="10" align="right" valign="top">
   <form action="savechanges" method="post">
      <table style="width:100%;" cellspacing="0" cellpadding="0" border="0">