To merge columns and rows in an HTML table, you can use the colspan and rowspan attributes within the  or  elements. These attributes allow you to span a cell across multiple columns (colspan) or rows (rowspan). Here's an example demonstrating how to merge cells in an HTML table:

Consider a table where you want to merge cells to create a structure where one cell spans multiple columns or rows.

Example:-

<table border=1 width=70% height=20%>

<tr>

<th colspan=2 bgcolor=yellow>Name of Student</th>

<th colspan=3 bgcolor=yellow>Address</th>

<th rowspan=2 bgcolor=yellow>Contact No.</th>

</tr>

<tr>

<th>First Name</th>

<th>last Name</th>

<th>House No.</th>

<th>Sector</th>

<th>City</th>

</tr>

<tr>

<td>john</td>

<td>albert</td>

<td>44</td>

<td>1</td>

<td>Delhi</td>

</tr>

</table>

Result:-

In this example,

1. The colspan attribute is used to merge cells horizontally (across columns).

2. The rowspan attribute is used to merge cells vertically (across rows).

3. You can adjust the colspan and rowspan values to suit the desired merging configuration.

Using colspan and rowspan attributes allows you to create more complex table layouts by merging cells as needed for better presentation of data and content within the HTML table.