Cell spanning

Merge cells with the colspan and rowspan attributes.

Horizontal spanning: colspan

Sometimes a cell needs to cover more than one column. For this you use the colspan attribute. For example <td colspan="2"> says the cell merges two columns.

Picture a table where the first row has a single 'Final' header covering all columns, and below it two separate columns. You cannot build this without colspan. The value is always an integer and tells how many columns are joined.

Vertical spanning: rowspan

When a cell needs to cover more than one row, you use rowspan. For example <td rowspan="3"> says the cell merges three rows downward.

This helps when a single category name on the left must span three rows on the right. It can be combined with colspan in the same cell; but using both at once should be reserved for truly complex layouts.

A merged cell example

A colspan example:

<table>
  <tr>
    <td colspan="2">Final Term</td>
  </tr>
  <tr>
    <td>Midterm</td>
    <td>Final</td>
  </tr>
</table>

The first row has a single cell covering two columns; the second row has two separate cells. The number of merged columns must match the cell count in the row below.

Exercise Write a table with a merged cell

Add a <table> to body. The first <tr> row should hold a single <td colspan="2"> cell (for example Final Term). The second <tr> row should hold two separate <td> cells (for example Midterm and Final).

Show example solution

<body>
  <table>
    <tr>
      <td colspan="2">Final Term</td>
    </tr>
    <tr>
      <td>Midterm</td>
      <td>Final</td>
    </tr>
  </table>
</body>

Test yourself

What does <td colspan="2"> mean?
- The cell's height becomes 2 pixels
- The cell contains two rows
- The cell merges two columns
- The cell is written twice
Show answer

The cell merges two columns — Correct. colspan="2" means the cell merges two columns.

Close the merged cell

<table>
  <tr>
    <td colspan="2">Final Term____
  </tr>
  <tr>
    <td>Midterm</td>
    <td>Final</td>
  </tr>
</table>

Show answer

<table>
  <tr>
    <td colspan="2">Final Term</td>
  </tr>
  <tr>
    <td>Midterm</td>
    <td>Final</td>
  </tr>
</table>

Match each attribute to its meaning

colspan="2"

Merges two columns
rowspan="2"

Merges two rows
scope="col"

Marks a column header
scope="row"

Marks a row header

Next lesson: Summary - Class schedule table

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies