格式化嵌套表格

Question

从开始，有人建议我使用嵌套的 table，它反过来执行预期的 operation/function。

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

不过，tables 看起来很乱，如屏幕截图所示：

如何使它看起来像最初预期的那样？

Answer 1

html 设计有嵌套的 table，其中在外部 table 的单元格内包含一个 form 标记。从浏览器输出的图片可以看出，嵌套的 table 占据了 space 属于第一列。但是您需要两个 table 具有相同数量的列。统计嵌套table中的列数，利用<td>标签的colspan属性展开一个单元格占用space，专用于外层[=19=的其他列].

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

格式化嵌套表格

Formatting nested tables

html

jsp

html-table