table tag is adding extra td in tr tag automatically

Question

Hi I am just going through a mysterious condition in my code. single <td> Or <th> in chrome and Mozilla Firefox don't know why.

        <div class="right_content">
                <table style="width: 100%; height: 200px; margin-top: 5px;" id="mainTable">
                    <tr>
                        <th colspan="1">Participant Name</th>
                        <td colspan="1">${fullName}<td>
                        <th colspan="1">Role</th>
                        <td colspan="1">${role}<td>
                        <th colspan="1">Brand/Location</th>
                        <td colspan="1">${location}<td>
                    </tr>
                    <tr>
                        <th>Goal Text</th>
                        <td><input name="goalText" id="goalText" name="goalText"
                            class="text_field" size="40" maxlength="95" tabindex="1"
                            title="Minimum Rating For This Competency" /></td>
                        <th>Assessment Center</th>
                        <td><select name="assessmentCenterId" id="assessmentCenterId" class="text_field"
                            tabindex="2" title="Select Assessment Center">
                                <option value="-1">--Select Assessment Center--</option>
                                <c:forEach items="${acList}" var="singleAC" varStatus="sts">
                                <c:choose>
                                <c:when test="${singleAC.id eq 0}">
                                <option value="${singleAC.id}" selected="selected">${singleAC.name} </option>
                                </c:when>
                                <c:otherwise>
                                <option value="${singleAC.id}">${singleAC.name}</option>
                                </c:otherwise>
                                </c:choose>
                                </c:forEach>
                        </select></td>

                        <th>Status</th>
                        <td><select name="status" id="status" class="text_field"
                            tabindex="3" title="Select Status Of IDP">
                                <option value="-1" selected="selected">--Select Status--</option>
                                <c:forEach items="${EnumIDPStatus}" var="singleStatus"
                                    varStatus="sts">
                                    <c:choose>
                                    <c:when test="${(singleStatus.key eq 0)  &&(mode eq 'Add')}">
                                    <option value="${singleStatus.key}" selected="selected">${singleStatus.value}</option>
                                    </c:when>
                                    <c:otherwise>
                                    <option value="${singleStatus.key}">${singleStatus.value}</option>
                                    </c:otherwise>
                                    </c:choose>
                                </c:forEach>
                        </select></td>
                    </tr>

                    <tr>
                        <th>Score</th>
                        <td><input type="text" name="score" id="score" class="text_field"
                            size="40" maxlength="95" tabindex="4" title="Score" /></td>
                        <th>Target Date</th>
                        <td><input type="text" name="targetDate" id="targetDate"
                            class="text_field"  title="Minimum Rating For This Competency" /></td>
                        <th>Extended Date</th>
                        <td><input type="text" name="extendedDate" id="extendedDate"
                            class="text_field"  /></td>
                    </tr>

                    <tr>
                        <th>Manger Comments</th>
                        <td><textarea name="managerComments" id="managerComments"
                                class="text_field" rows="5" cols="50" tabindex="7"
                                title="Minimum Rating For This Competency"></textarea></td>
                        <th>Assessor Comments</th>
                        <td><textarea name="assessorComments" id="assessorComments"
                                class="text_field" rows="5" cols="50" tabindex="8"
                                title="Minimum Rating For This Competency"></textarea></td>
                        <th>Participant Comments</th>
                        <td><textarea name="participantComments"
                                id="participantComments" class="text_field" rows="5" cols="50"
                                tabindex="9" title="Minimum Rating For This Competency"></textarea>
                        </td>
                    </tr>

                    <tr>
                        <td colspan="6" class="frm_footer_buttons"
                            style="text-align: center;"><input type="button"
                            name="btnsubmit" id="btnsubmit" class="frm_button"
                            value="<spring:message code='button.save' />" tabindex="10"
                            onclick="return errorPopup();" /> <input type="reset"
                            class="frm_button" value="Reset" tabindex="11" /> <input
                            type="button" class="frm_button"
                            value="<spring:message code='button.cancel'/>" tabindex="12"
                            onclick="submitRequest('showIDPList.html');" /></td>
                    </tr>
                </table>
        </div>

Answer 1

Make sure to always close your HTML tags properly.

Here's a part of your HTML:

<tr>
    <th colspan="1">Participant Name</th>
    <td colspan="1">${fullName}<td>
    <th colspan="1">Role</th>
    <td colspan="1">${role}<td>
    <th colspan="1">Brand/Location</th>
    <td colspan="1">${location}<td>
</tr>

Can you spot a problem?

Look carefully at your closing tags. Your <th> opening tags have proper </th> closing tags, but you <td> don't. They miss / in their closing tags which effectively means you open a new tag instead of closing the previous one.