HTML · Quick Reference

Lesson 17 — Colspan & Rowspan Cheat Sheet

HTML

In one line: colspan="N" makes a cell occupy N columns instead of one. The key rule: remove N-1 cells from that row — the browser doesn't add space automatically.

Key Ideas

1colspan — Merging Columns. colspan="N" makes a cell occupy N columns instead of one. The key rule: remove N-1 cells from that row — the browser doesn't add space automatically.

2rowspan — Merging Rows. rowspan="N" makes a cell span N rows vertically. Again, you must remove the corresponding cells from the N-1 rows below.

3Combining Both. You can use colspan and rowspan on the same cell to create a cell that spans multiple rows and multiple columns simultaneously. This is useful for complex report-style...

4Debugging Broken Tables. When a spanning table looks wrong, work through this checklist:

Code Examples

<table>
  <thead>
    <tr>
      <!-- One header spans all 4 columns -->
      <th colspan="4">Q3 Sales Summary</th>
      <!-- Only 1 cell here — it occupies 4 columns -->
    </tr>
    <tr>
   ...

<table>
  <tbody>
    <tr>
      <!-- "North" spans the next 2 rows -->
      <th rowspan="2" scope="rowgroup">North</th>
      <td>Monday</td>
      <td>£100</td>
    </tr>
    <t...

<table>
  <tr>
    <!-- Spans columns 1–2 AND rows 1–2 -->
    <td colspan="2" rowspan="2">Big Cell</td>
    <!-- Row 1 still has cells for columns 3 and 4 -->
    <td>C1</td>
    <td>D1</td>...