In this lesson, you'll learn how to add captions to your tables using the <caption> tag. A table caption provides a brief description or title for the table, offering context to the data presented.

What Is a Table Caption?

A table caption is a short piece of text that describes the content or purpose of the table. It helps users quickly understand what the table is about. The caption is defined using the <caption> tag and is placed immediately after the opening <table> tag.

Syntax of the <caption> Tag

The basic syntax for adding a caption to a table is:

<table>
  <caption>Your Caption Here</caption>
  <!-- Table rows and cells go here -->
</table>

Explanation:

• <table>: Starts the table.
• <caption>Your Caption Here</caption>: Sets the caption text, which appears above (or sometimes below) the table depending on the browser.
• The rest of the table structure (rows and cells) follows after the caption.

Example of Adding a Caption to a Table

Let's look at an example where we add a caption to a simple table.

Explanation:

• <caption>Grade Report for Semester 1</caption>: This tag adds a caption to the table, describing that it is a grade report for Semester 1.
• Placement: The <caption> tag is placed immediately after the <table> opening tag.
• Enhanced Understanding: The caption helps users quickly understand what the table represents before they review the data.

Adding captions to your tables is a simple yet effective way to provide context and improve the readability of your data. In the next lesson, we'll explore Working With Colspan and Rowspan, where you'll learn how to merge cells to create more flexible table layouts.