Table sections (thead, tbody, caption)

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Which element provides a visible title for an HTML table?

A <caption>

B <title>

2. Which element groups the header rows of a table?

A <thead>

B <th>

3. Where must <caption> be placed in a table?

A Inside a <thead> row

B Directly inside <table>, before <thead>

4. True or false: <TBODY> with capital letters is valid HTML.

A False

B True

5. True or false: <tbody> must be explicitly written in every table.

A True

B False

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left column		Right column
1<table> <caption>Monthly Sales</caption> <tbody><tr><td>Jan</td></tr></tbody> </table>		A<thead> groups the column header row and <tbody> groups the data rows - both improve structure and accessibility
2<table> <thead><tr><th>Name</th></tr></thead> <tbody><tr><td>Alice</td></tr></tbody> </table>		B<caption> gives the table a visible title - 'Monthly Sales' appears above the table by default
3<caption> provides a visible title placed directly inside <table>		C<td> cells must be inside <tr> rows inside <tbody> - not directly inside <table>
4<thead> groups header rows and <tbody> groups data rows - both sit directly inside <table>		D<table> <caption>Class Results</caption> <tbody><tr><td>Alice</td></tr></tbody> </table>
5<table> <THEAD><tr><th>Name</th></tr></THEAD> <tbody><tr><td>Alice</td></tr></tbody> </table>		ETag names must be lowercase - <THEAD> and </THEAD> should be <thead> and </thead>
6<table> <td>Alice</td> <td>95</td> </table>		F<table> <thead><tr><th>Score</th></tr></thead> <tbody><tr><td>95</td></tr></tbody> </table>

Definitions

<tbody>

Fill in the Blanks

Complete each line of code by filling in the missing parts.

<table> <___> <tr><td>Alice</td></tr> </tbody> </table>

<table> <___>Monthly Sales</caption> <tbody><tr><td>Jan</td></tr></tbody> </table>

<table> <thead> <tr><th>Score</th></tr> </___> </table>

<table> <caption>Results</caption> <thead><tr><th>Name</th></tr></thead> <tbody><tr><td>Alice</td></tr></___> </table>

Spot the Error

Shade in the letter of the line that contains an 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>

Question 2

A <table>

B <tbody>

C <tr><td>Row data</td></tr>

D </table>

Question 3

A <table>

B <caption>Monthly Sales</caption>

C <Thead>

D <tr><th>Month</th><th>Total</th></tr>

E </thead>

F </table>

Question 4

A <table>

B <caption>Results</caption>

C <thead><tr><th>Name</th></tr></thead>

D <td>Alice</td>

E </tbody>

F </table>

Question 5

A <table>

B <thead>

C <tr><th>Product</th></tr>

D </thead>

E <TBODY>

F </tbody>

Answer Key

Table sections (thead, tbody, caption)

Section A: Quick Questions

A — <caption>

A — <thead>

B — Directly inside <table>, before <thead>

A — False

B — False

Section B: 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>

Section C: Definitions

<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.

Section D: Fill in the Blanks

<table>
  <thead>
    <tr><th>Name</th></tr>
  </thead>
</table>

<table>
  <tbody>
    <tr><td>Alice</td></tr>
  </tbody>
</table>

<table>
  <caption>Monthly Sales</caption>
  <tbody><tr><td>Jan</td></tr></tbody>
</table>

<table>
  <thead>
    <tr><th>Score</th></tr>
  </thead>
</table>

<table>
  <caption>Results</caption>
  <thead><tr><th>Name</th></tr></thead>
  <tbody><tr><td>Alice</td></tr></tbody>
</table>

Section E: Spot the Error

A — HTML tag names must be lowercase. <THEAD> should be written as <thead>.

B — The <tbody> opening tag is missing its closing </tbody> tag before </table>. Each section element must be properly closed.

C — HTML tag names must be lowercase. <Thead> should be written as <thead>.

D — The <td> cell is missing its enclosing <tr> and <tbody> wrapper. It should be <tbody><tr><td>Alice</td></tr></tbody>.

E — HTML tag names must be lowercase. <TBODY> should be written as <tbody>.