Formatting nested tables - html

Question

From this thread, I was suggested to use a nested table which in turn, performed the intended operation/function.
<table>
<thead class="center">
<tr>
<th>ID</th>
<th>L. Name</th>
<th>F. Name</th>
<th>M. Name</th>
<th>Sex</th>
<th>Empl. Status</th>
<th>Dept.</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>
The tables just appeared messed up though, as seen in this screenshot:
How to do it so it appears as originally intended?

Answer 1

The html is designed with nested tables which include a form tag inside a cell of the outer table. From the picture of the output in the browser you see that the nested table occupied the space belong to the first column. But you need both tables to have the same number of collumns. Count a number of columns in the nested table and use colspan attribute of <td> tag to spread a cell to occupy space dedicated to other columns of the outer table.
<td colspan="10" align="right" valign="top">
<form action="savechanges" method="post">
<table style="width:100%;" cellspacing="0" cellpadding="0" border="0">