📊 Phase 4 · Tables & Forms🟠 Intermediate+Module 05

Colspan & Rowspan

⏱ 20 min read📖 4 sections🧩 5-question quiz

Course Progress49% complete

Real-world tables often need cells that span multiple columns (like a full-width header) or multiple rows (like a recurring label on the left). The colspan and rowspan attributes do exactly that — but they require careful accounting so the browser knows which cells to remove to make room for the spanning cell.

Section 1

colspan — 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.

No colspan (4 cells per row)

A	B	C	D
E	F	G	H

colspan="4" on first cell

A (spans 4)
E	F	G	H

HTMLcolspan example

<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>
      <th>Region</th>
      <th>Jul</th>
      <th>Aug</th>
      <th>Sep</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">North</th>
      <td>£4,200</td>
      <td>£3,800</td>
      <td>£5,100</td>
    </tr>
  </tbody>
</table>

Section 2

rowspan — Merging Rows

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

Without rowspan

North	Mon	£100
North	Tue	£120
South	Mon	£90
South	Tue	£80

With rowspan="2"

North	Mon	£100
North	Tue	£120
South	Mon	£90
South	Tue	£80

HTMLrowspan example

<table>
  <tbody>
    <tr>
      <!-- "North" spans the next 2 rows -->
      <th rowspan="2" scope="rowgroup">North</th>
      <td>Monday</td>
      <td>£100</td>
    </tr>
    <tr>
      <!-- No "North" cell here — rowspan covers it -->
      <td>Tuesday</td>
      <td>£120</td>
    </tr>
    <tr>
      <th rowspan="2" scope="rowgroup">South</th>
      <td>Monday</td>
      <td>£90</td>
    </tr>
    <tr>
      <td>Tuesday</td>
      <td>£80</td>
    </tr>
  </tbody>
</table>

⚠️

The cell-removal rule is critical

If you forget to remove the cells that are "eaten" by a span, the row will have too many cells and the table layout will break. Always count: a 3-column table with a colspan="2" cell means that row has only 2 cells total, not 3.

Section 3

Combining 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 tables.

colspan="2" rowspan="2" — spans a 2×2 area

Big Cell (2×2)		C1	D1
Big Cell (2×2)		C2	D2
A3	B3	C3	D3

HTMLCombined colspan + rowspan

<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>
  </tr>
  <tr>
    <!-- Row 2: no cells for columns 1–2 (rowspan covers them) -->
    <td>C2</td>
    <td>D2</td>
  </tr>
  <tr>
    <!-- Row 3: full width again -->
    <td>A3</td><td>B3</td><td>C3</td><td>D3</td>
  </tr>
</table>

Section 4

Debugging Broken Tables

When a spanning table looks wrong, work through this checklist:

🛠

Debugging steps

1. Count the expected number of columns in the widest row — that's your column count.
2. For every row, count cells + their colspan values. They must all sum to the same number.
3. For every rowspan cell, confirm the rows it "consumes" have one fewer cell than expected.
4. Use browser DevTools — hover a cell and check its actual column/row position in the box model.

💡

Pro tip: draw it first

For complex tables with many spans, sketch the grid on paper (or in a spreadsheet) first. Mark which cells are "consumed" by spans, then write the HTML from that map. Never code a complex spanning table purely in your head.

🏆

Module 5 Complete!

You've covered Tables Basics, Table Structure, and Colspan & Rowspan. Next: Module 6 · Forms

🧩 Quick Check — Lesson 17

5 questions · instant feedback

1. If a table has 3 columns and you write <td colspan="3">, how many other <td> cells should be in that row?

2. You use rowspan="3" on a cell in row 1. How many rows below it should skip a cell in that column?

3. Which is the correct attribute to make a cell span 2 columns?

4. What is the best way to plan a complex table with many spanning cells?

5. A cell has colspan="2" AND rowspan="2". How many cells total does it remove from the table's remaining rows?

🏆

Tables Module Complete!

Excellent! Next up: HTML Forms — collecting user input.

🏆

Lesson 17 Challenge

Code exercise · 20 min

Build a timetable/schedule table using both colspan and rowspan.

Create a weekly class schedule with these columns: Time, Monday, Tuesday, Wednesday, Thursday, Friday.

1. Use colspan="5" on a header that says "Weekly Schedule" spanning all day columns
2. Use rowspan="2" for a class that runs across two time slots (e.g., "HTML Bootcamp" from 9-11am)
3. Use rowspan="3" for a class that spans three slots (e.g., "Project Work" from 1-4pm)
4. Include a "Lunch" row that uses colspan="5" across all day columns
5. Style with border-collapse: collapse and different colors for the spanning cells

Show hints

Remember: for every rowspan, remove one cell from each subsequent row in that column
Start with the full grid on paper before coding — count every cell
A rowspan="2" cell in column 2, row 1 means row 2 has one fewer cell (skip column 2)
The "Lunch" colspan row will have just 2 cells: the Time column + a colspan="5" cell

← Table Structure

Lesson 17 of 35

Form Basics →