HTML Table Colspan and Rowspan

The colspan and rowspan attributes are used to merge cells in an HTML table. Here’s how they work:

• colspan: This attribute is used to merge two or more cells horizontally. It takes a numeric value that specifies the number of columns to span. Here’s an example:

<table>
  <tr>
    <td colspan="2">Header Cell</td>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

In this example, the first cell in the first row spans two columns, effectively merging the cells. The resulting table will have three columns instead of four.

• rowspan: This attribute is used to merge two or more cells vertically. It takes a numeric value that specifies the number of rows to span. Here’s an example:

<table>
  <tr>
    <td rowspan="2">Header Cell</td>
    <td>Cell 1</td>
  </tr>
  <tr>
    <td>Cell 2</td>
  </tr>
</table>

In this example, the first cell in the first column spans two rows, effectively merging the cells. The resulting table will have two rows instead of three.

It’s worth noting that using colspan and rowspan can make the HTML code more complex and harder to read. Use them judiciously and only when necessary to make the table layout more readable and understandable.