How to Group columns in front end?

Question

Table has to be displayed in front end. Following is the code.

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

It has three columns in table namely class,student name and section. Since class is same for some student it has to spanned across students having same class. Following is the sample output.

Data is fetched from Backend.

Answer 1

Colspan Attribute can merge columns in a table.

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

Example

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

Result

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

Rowspan Attribute:

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

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