HTML Table Colspan & Rowspan

In this tutorial, you will learn HTML Table Colspan & Rowspan

Colspan and rowspan are HTML attributes that allow you to merge cells horizontally and vertically in a table. Here is a tutorial on how to use colspan and rowspan in HTML tables:

• To use colspan, add the attribute to a <td> or <th> element and set its value to the number of columns you want to merge.

<td colspan="2">

This will merge the current cell with the next cell to the right.

• To use rowspan, add the attribute to a <td> or <th> element and set its value to the number of rows you want to merge.

<td rowspan="2">

This will merge the current cell with the next cell below it.

• Keep in mind that when you use colspan and rowspan, you need to skip the cells that are merged in the next rows or columns, to avoid errors in table structure.
• You can also use colspan and rowspan together to merge cells both horizontally and vertically.

<td rowspan="2" colspan="2">

• If you want to use CSS to control the appearance of merged cells, you can use the :first-child and :last-child selector to target the first and last cells of the merged cells respectively.
• You can also use the :nth-child(n) selector to target specific cells in the merged cells.

Here’s an example of a basic table structure with colspan and rowspan:

<table>
  <tr>
    <td>A1</td>
    <td>A2</td>
    <td>A3</td>
  </tr>
  <tr>
    <td rowspan="2">B1</td>
    <td colspan="2">B2</td>
  </tr>
  <tr>
    <td>C3</td