Captions & Headings

After this lesson, you can give a table a caption and group header and data rows with thead and tbody.

BEGIN WITH A QUESTION

Understanding begins with a question.

Two tables contain Day and Time. One shows opening hours; the other shows volunteer shifts. A caption helps readers identify the table they are reading.

Give a table a caption and group header and data rows with thead and tbody.

UNDERSTAND THE CONCEPT

Caption names the table

Caption is a table’s title or short description, written as its first child. Provide context, such as ‘Sample garden volunteer schedule’, rather than just ‘Table 1’. This connects the data with its purpose.

Row groups

Thead wraps header rows. Tbody wraps the main data rows. Both contain tr, which in turn contains th or td. Tfoot can hold summary rows such as totals, but is not required for every table.

Groups do not replace cell headers

Putting td inside thead does not turn it into th. Use th for cells naming columns or rows. Row groups and cell types are separate decisions.

EXAMPLE / CONTEXT

Examples clarify concepts.

HTML EXAMPLE

<table>
  <caption>Sample garden volunteer schedule</caption>
  <thead><tr><th scope="col">Day</th><th scope="col">Task</th></tr></thead>
  <tbody>
    <tr><th scope="row">Saturday</th><td>Watering</td></tr>
    <tr><th scope="row">Sunday</th><td>Weeding</td></tr>
  </tbody>
</table>

BROWSER RESULT

Caption provides context; thead and tbody identify row groups. Header cells still use th.

COMMON MISTAKES

<thead><td>Day</td><td>Task</td></thead>

Thead needs tr to wrap each row. Header cells inside that row use th.

TRY TOGETHER

Practice clarifies understanding.

Complete the element that names a table.

<table>
  <>Sample reading collection</caption>
</table>

Show a hint

Its name differs from figcaption, which belongs to figure.

Try as often as you need. The independent task that follows records lesson completion.

WRITE · OBSERVE · UNDERSTAND

Give the collection context

Organize this table: add a caption explaining the sample collection data, move the header row into thead, use th, and wrap the two data rows in tbody.

<table>
  <tr><td>Category</td><td>Count</td></tr>
  <tr><td>Science</td><td>12</td></tr>
  <tr><td>Stories</td><td>18</td></tr>
</table>

index.htmlHTMLLn 1, Col 15 lines2 spasi

Editor shortcuts & help

Ctrl + Space: Show suggestions · ↑ ↓ select · Enter accept · Esc close
Shift + Alt + F: Format code
Ctrl/⌘ + F: Find and replace text
Ctrl/⌘ + [ / ]: Decrease / increase indentation
Tab: Move focus; inside a snippet, move to the next field. Esc then Tab to exit.
Ctrl/⌘ + Z: Undo changes, including formatting

Suggestions use the language, snippets, and local code context. Formatting runs in your browser.

Document preview

Ctrl/⌘ + Enter runs the preview. Preview uses reading styles. Scripts and form submission are disabled. Sample illustration: assets/observatory.svg.

TAKE THIS UNDERSTANDING WITH YOU

Practice gives a foundation.

Caption provides context for the whole table.
Thead and tbody group rows.
Th is still needed to identify header cells.

Tables

A lesson is complete when the independent task meets its goals. Return to the reading at any time.

Connect with other concepts

HTML table °Semantic HTML °

Library: Three languages behind one page ↗

Next lesson →