📊 Phase 7 · Tables🟡 IntermediateMODULE 25

Advanced Tables

⏱️ 15 min read

📖 Theory + Code

🧩 5 Quiz Questions

🏗️ 1 Challenge

Course progress71%

🎯 What you'll learn: Merging cells across columns with colspan, merging across rows with rowspan, and building genuinely complex, multi-level table layouts.

Section 1

colspan — Merging Across Columns

colspan="N" makes one cell stretch across N columns. Common for a grouped heading sitting above several sub-columns.

colspan.html

HTML

<table>
  <tr>
    <th>Student</th>
    <th colspan="2">Term 1 Scores</th>
  </tr>
  <tr>
    <th></th>
    <th>Midterm</th>
    <th>Final</th>
  </tr>
  <tr>
    <td>Amina</td><td>85</td><td>91</td>
  </tr>
</table>

Student	Term 1 Scores
	Midterm	Final
Amina	85	91

Section 2

rowspan — Merging Across Rows

rowspan="N" makes a cell stretch down across N rows — useful when one label applies to several rows below it, like a category spanning multiple items.

rowspan.html

HTML

<table>
  <tr>
    <th rowspan="2">Fruits</th>
    <td>Apple</td>
  </tr>
  <tr>
    <td>Banana</td>
  </tr>
</table>
<!-- "Fruits" spans down both rows, no cell needed for it in the 2nd row -->

Fruits	Apple
Fruits	Banana

⚠️

Easy to mess up

When a cell has rowspan, every following <tr> it spans over must NOT include a cell for that column — the browser accounts for the space automatically. Forgetting this is the #1 source of misaligned table bugs.

Section 3

Combining Both

Real-world complex tables (spreadsheets, pricing grids, schedules) often use colspan and rowspan together. Plan the grid on paper first — it's easy to lose track of which cells are "spoken for" by earlier spans.

combined.html

HTML

<tr>
  <th rowspan="2">Category</th>
  <th colspan="2">2026 Sales</th>
</tr>
<tr>
  <th>Q1</th><th>Q2</th>
</tr>

Section 4

When Tables Get Too Complex

If your table needs 4+ levels of merged headers to make sense, consider whether the data would communicate better as a chart, or split into multiple simpler tables. Heavily merged tables are also harder for screen reader users to parse, even with correct scope attributes.

🧩 Knowledge Check — Lesson 25

5 questions to test your advanced tables knowledge.

1. What does colspan="3" do?

2. What does rowspan="2" do?

3. If a th has rowspan="2", what must the next <tr> do?

4. Why might very complex merged tables be a problem?

5. A grouped heading "2026 Sales" sits above two sub-columns "Q1" and "Q2" — which attribute do you use on "2026 Sales"?

💪

Coding Challenge — Lesson 25

Apply what you learned · Intermediate Level

Challenge: Build a Report Card Table

1. Build a header row with "Subject" and a colspan="2" heading "Scores" over "Midterm" and "Final" sub-columns.
2. Add a rowspan="2" cell labeled "Sciences" spanning two subject rows ("Physics", "Chemistry"), each with midterm/final scores.

💡 Show hints if you're stuck

Remember: the 2nd row under a rowspan cell skips that column entirely
Plan the grid on paper first to avoid misalignment

Finished this lesson?

Mark it complete to track your progress.

Module 25 of 62Phase 7 — Tables

Advanced Tables

colspan — Merging Across Columns

rowspan — Merging Across Rows

Combining Both

When Tables Get Too Complex

Lesson 25 Complete!