1. <rowspan> and <colspan>
The merging of table cells is crucial in extending the application of tables beyond just using them to present basic information. In HTML, this is achieved with the rowspan and colspan attributes in the <th> and <td> elements. Figure 4.13 shows how it is done, and Figure 4.14 depicts the rendered result.
In the example, notice that the table has a border. This has been done by using CSS, and it is necessary to use it at this point to show the effects of rowspan and colspan, which otherwise will not have been apparent without a border. In the first table row element, the first rowspan attribute specifies that the cell should span one column (the default) and two rows; the colspan specifies that the cell should span one row (the default) and two columns.
Like the first, the second rowspan specifies to span one column and two rows. In the second table row element, the two <th> elements are used to put content in the second row of the table, which has only two columns, bearing in mind that the first cells of the first and fourth columns belong to the first row. The last two <tr> elements are used to fill the cells of the remaining rows, as normal.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.