HTML Tables: Structured and Accessible Data

Build tables that are easier to read and easier to navigate by using `caption`, `thead`, `tbody`, `th` and `scope` with clear intent.

How much do you know about HTML?

📘 Theory

A Table Structure That Actually Helps

Think in terms of data relationships, not just rows and borders.

`caption` gives the table a shared context. `thead` separates headers from body rows. `th` marks header cells, and `scope` clarifies whether a header belongs to a row or a column.

These small decisions matter a lot when tables become larger or more complex.

Common Table Mistakes

Avoid these and your tables already become much easier to trust.

Using `td` where a real header cell should be `th`.
Skipping `caption` in tables that need shared context.
Using tables to arrange layout instead of data.
Creating rows with confusing or inconsistent column structure.

1 A Table Structure That Actually Helps 2 Common Table Mistakes

🧪 Learn by doing

Example Guided Example: Small Pricing Table Review caption, header structure and row headers together.

⌄

🏁 Challenges

Challenge Challenge: Improve the Header Accessibility Add missing column scope attributes to the header row.

⌄

🧰 Resources

Useful links

MDN: <table> WAI: Tables tutorial MDN HTML MDN HTML Elementos

Test

Check your knowledge with a test about HTML.

Test for HTML

Course resources 27

📘 Glossary 🎧 Audio 📄 PDFs 🖼️ Infographics 🎬 Videos 🔗 Links 🧠 Flashcards 🧩 Snippets

‹

Lesson 11

Basic HTML Forms: `label`, `input` and Native Validation

Lesson 13

Advanced Forms and Native Validation

›