Table Spanning

Merge cells across columns with colspan and across rows with rowspan.

Overview

In real-world tables, some cells need to span multiple columns or rows like a header that labels a group of columns, or a cell that covers multiple time slots in a schedule. HTML handles this with two attributes: - colspan="N": makes a cell span N columns horizontally - rowspan="N": makes a cell span N rows vertically When a cell spans multiple columns, you must remove the same number of regular cells from that row. When a cell spans multiple rows, remove cells from the subsequent rows. Getting the count right takes practice visualize the grid before writing the HTML.

Key Points

•colspan="N" merges a cell across N columns (horizontal merge)
•rowspan="N" merges a cell across N rows (vertical merge)
•When using colspan, remove (N-1) cells from the same row
•When using rowspan, remove (N-1) cells from subsequent rows
•The total number of columns must be consistent across every logical row
•colspan and rowspan can be combined on the same cell

Examples

colspan: a header spanning multiple columns

<table>
  <tr>
    <!-- This header spans 3 columns -->
    <th colspan="3">Q1 Results (Jan-Mar)</th>
  </tr>
  <tr>
    <th>January</th>
    <th>February</th>
    <th>March</th>
  </tr>
  <tr>
    <td>$4,200</td>
    <td>$3,800</td>
    <td>$5,100</td>
  </tr>
</table>

rowspan: a cell spanning multiple rows

<table>
  <tr>
    <th>Day</th>
    <th>Session</th>
    <th>Topic</th>
  </tr>
  <tr>
    <td rowspan="2">Monday</td>
    <td>Morning</td>
    <td>HTML Basics</td>
  </tr>
  <tr>
    <!-- No "Monday" cell here it's covered by rowspan -->
    <td>Afternoon</td>
    <td>CSS Introduction</td>
  </tr>
</table>

Combining colspan and rowspan

<table>
  <tr>
    <td colspan="2" rowspan="2">Top-left 2x2 block</td>
    <td>Top-right</td>
  </tr>
  <tr>
    <!-- First two cells covered by the spanning cell above -->
    <td>Middle-right</td>
  </tr>
  <tr>
    <td>Bottom-left</td>
    <td>Bottom-middle</td>
    <td>Bottom-right</td>
  </tr>
</table>

Common Mistakes

Not removing cells that are covered by a spanning cell results in extra columns
Miscounting how many cells to remove draw the grid on paper first
Forgetting that colspan/rowspan values must be whole numbers greater than 0

Note

Before writing complex spanning tables, sketch the grid on paper. Mark which cells span how many columns/rows, then count how many regular cells to omit from affected rows.

Table Spanning

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

What does colspan="3" on a <td> do?