HTML Table Colspan and Rowspan Explained with Examples

HTML tables can use colspan and rowspan attributes to make cells span multiple columns or rows. These attributes help create more complex table layouts.

Colspan (Column Span)

The colspan attribute makes a cell span across multiple columns.

Example:

<table border="1">
  <tr>
    <th colspan="2">Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>30</td>
  </tr>
</table>

Result:

+-----------+-----+
|   Name    | Age |
+-----+-----+-----+
| John| Doe | 30  |
+-----+-----+-----+

Rowspan (Row Span)

The rowspan attribute makes a cell span across multiple rows.

Example:

<table border="1">
  <tr>
    <th rowspan="2">Name</th>
    <th>First</th>
    <td>John</td>
  </tr>
  <tr>
    <th>Last</th>
    <td>Doe</td>
  </tr>
</table>

Result:

+------+-------+-----+
| Name | First | John|
+      +-------+-----+
|      | Last  | Doe |
+------+-------+-----+

Combined Example

Here's a table using both attributes:

<table border="1">
  <tr>
    <th colspan="2">Full Name</th>
    <th rowspan="2">Age</th>
  </tr>
  <tr>
    <th>First</th>
    <th>Last</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Smith</td>
    <td>25</td>
  </tr>
</table>

Result:

+-------------------+-----+
|    Full Name      |     |
+--------+----------+ Age |
| First | Last      |     |
+-------+----------+-----+
| John  | Doe      | 30  |
+-------+----------+-----+
| Jane  | Smith    | 25  |
+-------+----------+-----+

Key Points:

1. colspan="n" makes a cell span n columns
2. rowspan="n" makes a cell span n rows
3. When using these attributes, remember to adjust the number of cells in other rows/columns accordingly
4. These attributes can be used on both <th> and <td> elements

These techniques are especially useful for creating complex report layouts or data presentations in HTML tables.