Sometimes you need a cell to span multiple columns or rows. HTML provides two attributes for this: colspan and rowspan.

Spanning Columns

A cell can span 2 or more columns using the colspan attribute:

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td colspan="2">Row 1 Columns 1-2</td>
    <td>Row 1 Column 3</td>
  </tr>
  <tr>
    <td colspan="3">Row 2 Columns 1-3</td>
  </tr>
</table>

In this example, the first data row has a cell that spans columns 1 and 2, and the second row has a cell that spans all three columns.

Spanning Rows

A cell can span 2 or more rows using the rowspan attribute:

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td rowspan="2">Rows 1-2 Column 1</td>
    <td>Row 1 Column 2</td>
    <td>Row 1 Column 3</td>
  </tr>
  <tr>
    <td>Row 2 Column 2</td>
    <td>Row 2 Column 3</td>
  </tr>
</table>

Combining Both

You can combine colspan and rowspan on the same cell:

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td colspan="2" rowspan="2">Rows 1-2 Columns 1-2</td>
    <td>Row 1 Column 3</td>
  </tr>
  <tr>
    <td>Row 2 Column 3</td>
  </tr>
</table>

This creates a cell that occupies 4 cell positions (2 columns × 2 rows).

Lessons in this unit:

0:	Introduction
1:	How to Create HTML Tables
2:	▶︎ How to Span Rows and Columns in HTML Tables
3:	Using thead, tbody, and tfoot in HTML Tables