📊 Phase 7 · Tables🟢 BeginnerMODULE 23
Tables Basics
Course progress66%
🎯 What you'll learn: When actual tabular data belongs in a
<table> (and when it shouldn't), the basic <tr>/<td> structure, and the <caption> element.
Section 1
Tables Are for Tabular Data — Not Layout
In the early web, tables were misused for page layout (columns, grids). Modern CSS (flexbox, grid) handles layout instead. <table> should only be used for genuinely tabular data — rows and columns of related facts, like a price comparison or a schedule.
⚠️
The test
Ask: "If I read this row by row and column by column out loud, does that make sense as data?" A pricing table, a class schedule, or sports statistics — yes. A three-column page footer — no, that's layout, use CSS Grid or Flexbox.
Section 2
Basic Structure: table, tr, td
<table> is the container. <tr> (table row) holds one row. <td> (table data) holds one cell within that row.
table-basic.html
HTML
<table> <tr> <td>Plan</td> <td>Price</td> </tr> <tr> <td>Starter</td> <td>$10</td> </tr> </table>
This works, but it's incomplete — the first row is really a header, not just another data row. Lesson 24 introduces <th> to fix that properly.
Section 3
caption — A Table's Title
<caption> gives the table a title, announced by screen readers before the table's content — like alt text for images, but for data. It must be the first child inside <table>.
table-caption.html
HTML
<table> <caption>Monthly Pricing Plans</caption> <tr> <td>Plan</td> <td>Price</td> </tr> <tr> <td>Starter</td> <td>$10</td> </tr> </table>
| Plan | Price |
| Starter | $10 |
| Premium | $25 |
Section 4
Tables vs. CSS Layout — Quick Reference
| Content | Right choice |
|---|---|
| Sports league standings | <table> — genuinely tabular |
| Price comparison across plans | <table> — genuinely tabular |
| Three-column footer layout | CSS Grid/Flexbox — this is visual layout, not data |
| Photo gallery grid | CSS Grid — visual layout, not data |
🧩 Knowledge Check — Lesson 23
5 questions to test your table basics knowledge.
1. What should <table> be used for today?
2. What does <tr> represent?
3. What does <caption> do?
4. Where must <caption> be placed inside <table>?
5. A 3-column footer with links — should it be a <table>?
Coding Challenge — Lesson 23
Apply what you learned · Beginner Level
Challenge: Build a Class Schedule Table
1. Build a <table> with a <caption> titled "Weekly Class Schedule."
2. Add 4 rows of tr/td: a header-ish first row (Day, Subject, Time), then 3 data rows.
1. Build a <table> with a <caption> titled "Weekly Class Schedule."
2. Add 4 rows of tr/td: a header-ish first row (Day, Subject, Time), then 3 data rows.
💡 Show hints if you're stuck
- Structure:
<table><caption>...</caption><tr><td>...</td></tr></table>
Finished this lesson?
Mark it complete to track your progress.
Module 23 of 62Phase 7 — Tables