← HTML & CSS

Tables (table, tr, td, th)

An HTML element that creates one horizontal row inside a table. Every <td> and <th> cell must sit inside a <tr>.

Part of: HTML and CSS Journey — Module 24

What it does: The two <th> cells label the Product and Price columns. They are bold and centred by default without any CSS. The two <td> cells are inside a <tr>, which is inside <table>. This correct nesting is required for valid HTML tables. <tr> (table row) creates a horizontal row. Each cell - <td> or <th> - sits inside a <tr>. HTML tag names must be lowercase. <TABLE> is non-standard - use <table>. A single row can mix <th> header cells and <td> data cells - for example a row label in <th> followed by data in <td>. All four table elements work together: <table> is the container, <tr> creates rows, <th> labels, and <td> holds data.

Common mistakes: HTML tag names must be lowercase. <TABLE> should be written as <table>. HTML tag names must be lowercase. <TD> and </TD> should be written as <td> and </td>.

Class: _____________________  ·  Name: _____________________  ·  Date: _________

Free printable worksheet with full answer key — or add this module to a journey and assign it to your class.

🖨 Print Worksheet and Answer key of Tables (table, tr, td, th) (PDF)

Take this worksheet further — free with Cloodit

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

Learning
Duo
Which element wraps the entire table?
<table><tr>
Matches
<table> <td>Name</td> <td>Score</td> </table>
↓
<td> cells must be inside a <tr> row - add <tr></tr> wrappers around the cells
Applying
Meanings
Term
<tr>
Meaning
An HTML element that creates one horizontal row inside a table. Every <td> and <th> cell must sit inside a <tr>.
Practice
<table>
Testing
Gaps
<>
Check Answer
Spots
1<TABLE>
2 <tr><th>Name</th><th>Age</th></tr>

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

The 'Seal' badge — Smooth Formatter, 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.

Teach this with your class →

Quick Questions

1. Which element wraps the entire table?
A. <table> ✓
B. <tr>
<table> is the outer container. All rows and cells must be nested inside it.
2. Which element creates a single row inside a table?
A. <tr> ✓
B. <td>
<tr> (table row) creates a horizontal row. Each cell - <td> or <th> - sits inside a <tr>.
3. What is the difference between <td> and <th>?
A. <th> is a header cell, bold by default; <td> is a data cell ✓
B. <th> is for tables; <td> is for div containers
<th> (table header) is bold and centred by default, used for labels. <td> (table data) is the standard content cell.
4. True or false: <td> cells can be placed directly inside <table> without a <tr>.
A. False ✓
B. True
Every <td> and <th> must sit inside a <tr>. Placing cells directly inside <table> without a row wrapper is invalid HTML.
5. True or false: <TABLE> with capital letters is valid HTML.
A. False ✓
B. True
HTML tag names must be lowercase. <TABLE> is non-standard - use <table>.

Match the Pairs

<table> <tr><th>Name</th><th>Age</th></tr> <tr><td>Alice</td><td>25</td></tr> </table> → A complete table - <table> wraps everything, <tr> defines rows, <th> labels columns, <td> holds data
<tr><td>Sydney</td><td>5m</td></tr> → One table row with two data cells - the row wraps two <td> elements containing city name and population
<th> creates a header cell - bold and centred by default, used for column or row labels → <table> <tr><th>Product</th><th>Price</th></tr> </table>
Every <td> and <th> must be inside a <tr>, and every <tr> must be inside <table> → <table> <tr> <td>Alice</td> <td>95</td> </tr> </table>
<table> <td>Name</td> <td>Score</td> </table> → <td> cells must be inside a <tr> row - add <tr></tr> wrappers around the cells
<TABLE> <TR><TH>Name</TH></TR> </TABLE> → All table tag names must be lowercase - <TABLE>, <TR>, <TH> should be <table>, <tr>, <th>

Key Term

<tr>
An HTML element that creates one horizontal row inside a table. Every <td> and <th> cell must sit inside a <tr>.

Fill in the Blanks

1. <table> <tr><td>Data</td></tr> </table>
Hint: Type the element name that creates a table
2. <table> <tr><th>Name</th></tr> </table>
Hint: Type the element name that creates a table row
3. <table> <tr><th>Score</th></tr> </table>
Hint: Type the element name for a table header cell
4. <table> <tr><td>Alice</td></tr> </table>
Hint: Type the element name for a standard table data cell
5. <table> <tr><th>City</th></tr> <tr><td>Sydney</td></tr> </table>
Hint: Type the element name for the closing tag that ends the table

Spot the Error

Question 1
A <TABLE>
B <tr><th>Name</th><th>Age</th></tr>
C <tr><td>Alice</td><td>25</td></tr>
D </table>
Line A — HTML tag names must be lowercase. <TABLE> should be written as <table>.
Question 2
A <table>
B <tr><TD>Name</TD><TD>Score</TD></tr>
C <tr><td>Alice</td><td>95</td></tr>
D </table>
Line B — HTML tag names must be lowercase. <TD> and </TD> should be written as <td> and </td>.
Question 3
A <table>
B <tr><th>Item</th><th>Price</th></tr>
C <TR><td>Apple</td><td>$1</td></TR>
D </table>
Line C — HTML tag names must be lowercase. <TR> and </TR> should be written as <tr> and </tr>.
Question 4
A <table>
B <tr><th>Name</th><th>Age</th></tr>
C <tr><td>Alice</td><td>25</td></tr>
D <td>Bob</td><td>30</td>
E </table>
Line D — Each row's cells must be wrapped inside a <tr> element. The cells for Bob are missing their enclosing <tr></tr> tags.
Question 5
A <table>
B <tr>
C <th>Product</th>
D <th>Price</th>
E <tr>
F </table>
Line E — The second <tr> is an opening tag - it should be the closing tag </tr> to end the header row.
For Teachers

Create a free class, add this module to a journey, and track who's stuck.

Create a free teacher account →

No credit card. No setup fee. Make a class and invite students in under three minutes.

For Students

Practice this topic interactively, track progress, and unlock badges.

Start Learning Free →

Have a class code?