How to merge the table cells in HTML?

HTML table

The <table> tag is defines the table in HTML. In that table, <thead> tag is used to define the header of the table. The header name needs to be mentioned inside the <th> and </th> tag.

The <tr> and </tr> tag is covered the <th> tag to give the headers in the same row. If we want to give the header in the next row, we need to open the <tr> tag again and give the <th> value.

The contents of the table is defined inside the <tbody> and </tbody> tag. The row value needs to be mentioned inside the <tr> tag. The column values are splitted using <td> and </td>.

Output

HTML table example
HTML table example

Merge the table rows in HTML table

HTML has rowspan attribute which is used to remove the space between rows. In other words, it specifies number of rows a cell should span. Lets create a table with the column of movie and rating. Consider that this table contains movie rating data. Using rowspan attribute, we are going to combine two rows if multiple movies have same rating.

rowspan attribute syntax:

Rowspan attribute example in HTML
Rowspan attribute example in HTML

HTML code with rowspan attribute

As we have shown in the example, two movies have the same rating in the table. So we have used rowspan attribute in the rating cell which removed the space between two rows.

Merge the table columns in HTML table

HTML has colspan attribute to remove the space between columns. In other words, it specifies number of columns should span in a table. Lets use the previous movie rating table and combine two columns.

colspan attribute syntax:

Colspan attribute example in HTML
Colspan attribute example in HTML

HTML code with colspan attribute

As we have shown in the example, the header value “Marvel Movies Rating table” is common for both the columns. So we have used colspan attribute in the table header to remove the space between columns.