← HTML & CSS

Table sections (thead, tbody, caption)

The HTML element that groups the main data rows of a table. It sits inside <table> alongside <thead> and <caption>, wrapping the <tr> rows that contain <td> cells.

Part of: HTML and CSS Journey — Module 25

Understanding Table sections (thead, tbody, caption) in HTML & CSS

What it does: <caption> is a direct child of <table>, appearing before the section elements. It renders as a visible label above the table. <thead> is the section wrapper for header rows. <th> is an individual header cell inside a <tr> inside <thead>. HTML tag names must be lowercase. <TBODY> is non-standard - use <tbody>. <tbody> is optional - browsers add it implicitly if omitted. However, writing it explicitly improves readability and CSS targeting. <tbody> contains the main data rows, which use <td> cells. <th> cells typically live in <thead> rows. The correct nesting is <table> ? <tbody> ? <tr> ? <td>. Placing <td> directly inside <table> is invalid HTML.

Common mistakes: HTML tag names must be lowercase. <THEAD> should be written as <thead>. The <tbody> opening tag is missing its closing </tbody> tag before </table>. Each section element must be properly closed.

Class: _____________________  ·  Name: _____________________  ·  Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add Table sections (thead, tbody, caption) to a class →

This module's key terms are also in a printable crossword (Modules 21–30) and word search (Modules 21–41).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning
Duo
Which element provides a visible title for an HTML table?
<caption><title>
Matches
<table> <THEAD><tr><th>Name</th></tr></THEAD> <tbody><tr><td>Alice</td></tr></tbody> </table>
↓
Tag names must be lowercase - <THEAD> and </THEAD> should be <thead> and </thead>
Applying
Meanings
Term
<tbody>
Meaning
The HTML element that groups the main data rows of a table. It sits inside <table> alongside <thead> and <caption>, wrapping the <tr> rows that contain <td> cells.
Practice
<table>
Testing
Gaps
<>
Check Answer
Spots
1<THEAD>
2 <tr><th>Name</th><th>Score</th></tr>

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

The 'Lion' badge — Inheritance King, one of Cloodit's 106 collectible badges
Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy
Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games
Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print
Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. Which element provides a visible title for an HTML table?
A. <caption> ✓
B. <title>
<caption> is placed inside <table> to give it a visible label. <title> is a document head element and never appears on the page.
2. Which element groups the header rows of a table?
A. <thead> ✓
B. <th>
<thead> is the section wrapper for header rows. <th> is an individual header cell inside a <tr> inside <thead>.
3. Where must <caption> be placed in a table?
A. Inside a <thead> row
B. Directly inside <table>, before <thead> ✓
<caption> is a direct child of <table>, placed before the section elements. It renders as a label above the table.
4. True or false: <TBODY> with capital letters is valid HTML.
A. False ✓
B. True
HTML tag names must be lowercase. <TBODY> is non-standard - use <tbody>.
5. True or false: <tbody> must be explicitly written in every table.
A. True
B. False ✓
<tbody> is optional - browsers add it implicitly if omitted. However, writing it explicitly improves readability and CSS targeting.

Match the Pairs

<table> <caption>Monthly Sales</caption> <tbody><tr><td>Jan</td></tr></tbody> </table> → <caption> gives the table a visible title - 'Monthly Sales' appears above the table by default
<table> <thead><tr><th>Name</th></tr></thead> <tbody><tr><td>Alice</td></tr></tbody> </table> → <thead> groups the column header row and <tbody> groups the data rows - both improve structure and accessibility
<caption> provides a visible title placed directly inside <table> → <table> <caption>Class Results</caption> <tbody><tr><td>Alice</td></tr></tbody> </table>
<thead> groups header rows and <tbody> groups data rows - both sit directly inside <table> → <table> <thead><tr><th>Score</th></tr></thead> <tbody><tr><td>95</td></tr></tbody> </table>
<table> <THEAD><tr><th>Name</th></tr></THEAD> <tbody><tr><td>Alice</td></tr></tbody> </table> → Tag names must be lowercase - <THEAD> and </THEAD> should be <thead> and </thead>
<table> <td>Alice</td> <td>95</td> </table> → <td> cells must be inside <tr> rows inside <tbody> - not directly inside <table>

Key Term

<tbody>
The HTML element that groups the main data rows of a table. It sits inside <table> alongside <thead> and <caption>, wrapping the <tr> rows that contain <td> cells.

Fill in the Blanks

1. <table> <thead> <tr><th>Name</th></tr> </thead> </table>
Hint: Type the element that wraps the header rows of a table
2. <table> <tbody> <tr><td>Alice</td></tr> </tbody> </table>
Hint: Type the element that wraps the body rows of a table
3. <table> <caption>Monthly Sales</caption> <tbody><tr><td>Jan</td></tr></tbody> </table>
Hint: Type the element that provides a visible title above a table
4. <table> <thead> <tr><th>Score</th></tr> </thead> </table>
Hint: Type the element name for the closing tag of the table header section
5. <table> <caption>Results</caption> <thead><tr><th>Name</th></tr></thead> <tbody><tr><td>Alice</td></tr></tbody> </table>
Hint: Type the element name for the closing tag of the table body section

Spot the Error

Question 1
A <THEAD>
B <tr><th>Name</th><th>Score</th></tr>
C </thead>
D <tbody>
E <tr><td>Alice</td><td>95</td></tr>
F </tbody>
Line A — HTML tag names must be lowercase. <THEAD> should be written as <thead>.
Question 2
A <table>
B <tbody>
C <tr><td>Row data</td></tr>
D </table>
Line B — The <tbody> opening tag is missing its closing </tbody> tag before </table>. Each section element must be properly closed.
Question 3
A <table>
B <caption>Monthly Sales</caption>
C <Thead>
D <tr><th>Month</th><th>Total</th></tr>
E </thead>
F </table>
Line C — HTML tag names must be lowercase. <Thead> should be written as <thead>.
Question 4
A <table>
B <caption>Results</caption>
C <thead><tr><th>Name</th></tr></thead>
D <td>Alice</td>
E </tbody>
F </table>
Line D — The <td> cell is missing its enclosing <tr> and <tbody> wrapper. It should be <tbody><tr><td>Alice</td></tr></tbody>.
Question 5
A <table>
B <thead>
C <tr><th>Product</th></tr>
D </thead>
E <TBODY>
F </tbody>
Line E — HTML tag names must be lowercase. <TBODY> should be written as <tbody>.

Student with a class code? Join your class →