Как сгруппировать столбцы в интерфейсе?

Question

Таблица должна отображаться в передней части. Ниже приведен код.

<logic:present name="searchStudent">
    <table class=" tblSearchResult" border="1" cellspacing="0" cellpadding="0">
    <caption><b><bean:message key="label.student.details.display"/></b></caption>
    <tr>
        <td align="center"><b><bean:message key="label.student.class.code"/></b></td>
        <td align="center"><b><bean:message key="label.student.name.code"/></b></td>
        <td align="center"><b><bean:message key="label.student.section.code"/></b></td>
        <td align="center"><b><bean:message key="label.edit" /></b></td>
        <td align="center"><b><bean:message key="label.delete" /></b></td>
    </tr>
    <logic:iterate name="searchStudent" id="row">
    <tr>
        <td rowspan="2">
            <bean:write name="row" property="sclass" />
        </td>
        <td>
            <bean:write name="row" property="sname" />
        </td>
        <td>
            <bean:write name="row" property="section" />
        </td>
            
        <td rowspan="2" style="text-align:center;"><input
                onclick="clearMessage();updateStudent(this);"
                type="image"
                src="${pageContext.request.contextPath}/images/pen_edit_thick.png"
                class="imgEditPen"
                title="<bean:message key="button.tooltip.edit"/>"></td>
            <td rowspan="2" style="text-align:center;"><input
                onclick="clearMessage();deleteStudent();"
                type="image"
                src="${pageContext.request.contextPath}/images/icon_delete.gif"
                class="imgEditPen"
                title="<bean:message key="button.tooltip.remove"/>"></td>
        
    </tr>
    </logic:iterate>
    </table>
</logic:present>

Он имеет три столбца в таблице, а именно: класс, имя студента и раздел. Поскольку у некоторых учеников класс одинаков, он должен охватывать учащихся одного класса. Ниже приведен пример вывода.

введите описание изображения здесь

Данные извлекаются из Backend.

Answer 1

Атрибут Colspan может объединять столбцы в таблице.

<td colspan="2">Sum: $180</td>

Пример

     <table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
  <tr>
    <td colspan="2">Sum: $180</td>
  </tr>
</table>

Результат

Refer: https://www.w3schools.com/tags/att_td_colspan.asp

Атрибут Rowspan:

 <tr>
    <td>January</td>
    <td>$100</td>
    <td rowspan="2">$50</td>
  </tr>

https://www.w3schools.com/tags/att_td_rowspan.asp