HTML table captions are used to add a title or short description to an HTML table. A caption helps users understand what information the table contains before reading its rows and columns.

In HTML, the <caption> element is used to define a caption for a table. It is placed immediately after the opening <table> tag and before the table rows, headers, or other table content.

For example, you can use a table caption to describe a list of students, employee details, product prices, or monthly sales reports.

What Is an HTML Table Caption?

An HTML table caption provides a descriptive title for a table. It tells users what the table represents and makes the content easier to understand.

The <caption> element is supported by all modern web browsers.

Here is a simple example:

<table>
  <caption>Student Details</caption>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Grade</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>20</td>
    <td>A</td>
  </tr>
  <tr>
    <td>Priya</td>
    <td>21</td>
    <td>B</td>
  </tr>
</table>

In this example, Student Details is the caption. It describes the information displayed in the table.

HTML Table Caption Syntax

The <caption> element is written inside the <table> element. It should appear immediately after the opening <table> tag.

<table>
  <caption>Table Title</caption>
  <!-- Table rows and cells -->
</table>

The caption can contain ordinary text and suitable inline HTML elements, such as <strong> or <em>, when additional formatting is useful.

HTML Table Caption Example

Let’s create a table that displays product names and prices with a caption.

<table>
  <caption>Product Price List</caption>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Keyboard</td>
    <td>₹800</td>
  </tr>
  <tr>
    <td>Mouse</td>
    <td>₹400</td>
  </tr>
  <tr>
    <td>Monitor</td>
    <td>₹7,500</td>
  </tr>
</table>

The caption appears above the table by default and describes the products and their prices.

HTML Table Caption with CSS

You can use CSS to customize the appearance of a table caption. For example, you can change its color, font size, font weight, alignment, and spacing.

<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }

    th, td {
      border: 1px solid #cccccc;
      padding: 10px;
      text-align: left;
    }

    caption {
      font-size: 22px;
      font-weight: bold;
      color: #1769aa;
      padding: 12px;
    }
  </style>
</head>
<body>

  <table>
    <caption>Employee Details</caption>
    <tr>
      <th>Name</th>
      <th>Department</th>
      <th>Salary</th>
    </tr>
    <tr>
      <td>Arun</td>
      <td>Development</td>
      <td>₹35,000</td>
    </tr>
    <tr>
      <td>Meena</td>
      <td>Marketing</td>
      <td>₹30,000</td>
    </tr>
  </table>

</body>
</html>

In this example:

• font-size changes the caption’s text size.
• font-weight makes the caption bold.
• color changes the caption’s text color.
• padding adds space around the caption.
• border-collapse: collapse combines adjacent table borders into a single border.

Positioning an HTML Table Caption

By default, browsers display a table caption above the table. You can use the CSS caption-side property to position it above or below the table.

Caption Above the Table

Use caption-side: top to display the caption above the table. This is also the default behavior.

<style>
  caption {
    caption-side: top;
    font-weight: bold;
  }
</style>

<table>
  <caption>Monthly Sales</caption>
  <tr>
    <th>Month</th>
    <th>Sales</th>
  </tr>
  <tr>
    <td>January</td>
    <td>₹25,000</td>
  </tr>
</table>

Caption Below the Table

Use caption-side: bottom to display the caption below the table.

<style>
  caption {
    caption-side: bottom;
    color: #1769aa;
    padding: 10px;
  }
</style>

<table>
  <caption>Sales figures for January</caption>
  <tr>
    <th>Month</th>
    <th>Sales</th>
  </tr>
  <tr>
    <td>January</td>
    <td>₹25,000</td>
  </tr>
</table>

The caption’s position changes, but the table’s rows and columns remain the same.

HTML Table Caption with Text Formatting

You can use inline HTML elements inside a caption to emphasize particular words or phrases.

<table>
  <caption>
    <strong>2026</strong> Examination Results
  </caption>
  <tr>
    <th>Student</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>92</td>
  </tr>
  <tr>
    <td>Priya</td>
    <td>88</td>
  </tr>
</table>

Here, the <strong> element emphasizes the year in the caption. You can also use CSS to style the entire caption consistently.

HTML Table Caption vs. Table Header

The <caption> and <th> elements serve different purposes. A caption describes the entire table, while a header identifies the information in an individual column or row.

Element	Purpose	Example
<caption>	Describes the entire table	Student Details
<th>	Identifies a row or column	Name, Age, Grade
<td>	Contains ordinary table data	Rahul, 20, A

Consider this example:

<table>
  <caption>Student Information</caption>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>20</td>
  </tr>
</table>

In this table, Student Information is the caption, while Name and Age are column headers.

HTML Table Caption Accessibility

Captions can improve accessibility because they provide context before users explore the table’s contents. Screen readers can use the caption to help users understand the purpose of a table.

Follow these accessibility practices:

• Use a clear, meaningful caption for tables that need one.
• Place the <caption> element directly inside the <table> element.
• Write a short description that explains the table’s purpose.
• Use <th> for row and column headers rather than using bold text inside ordinary cells.
• Use the scope attribute on table headers when appropriate to clarify which cells they describe.

Example:

<table>
  <caption>Quarterly Revenue Report</caption>
  <tr>
    <th scope="col">Quarter</th>
    <th scope="col">Revenue</th>
  </tr>
  <tr>
    <td>Q1</td>
    <td>₹50,000</td>
  </tr>
  <tr>
    <td>Q2</td>
    <td>₹65,000</td>
  </tr>
</table>

The scope="col" attribute identifies each header as a column header. It complements the caption by describing the table’s structure.

Common HTML Table Caption Mistakes

Avoid these common mistakes when using table captions.

Placing the caption outside the table

Incorrect:

<caption>Student Details</caption>
<table>
  <!-- Table content -->
</table>

Correct:

<table>
  <caption>Student Details</caption>
  <!-- Table content -->
</table>

The <caption> element must be a child of the <table> element.

Using a caption for every column

A caption describes the entire table. Use <th> elements to identify individual columns.

Using a vague caption

Captions such as Table 1 or Data may not provide enough information. Prefer descriptive text such as Monthly Attendance Report.

Using CSS instead of semantic HTML

A styled paragraph placed above a table may look like a caption, but it does not provide the same semantic relationship as the <caption> element. Use <caption> when the text is intended to describe the table.

HTML Table Caption Best Practices

Follow these practices to create clear and accessible table captions:

• Add a caption that briefly explains the table’s purpose.
• Place the caption immediately after the opening <table> tag.
• Keep the caption concise and meaningful.
• Use CSS to control the caption’s appearance instead of adding unnecessary formatting elements.
• Use <th> and <td> correctly to distinguish headers from data.
• Keep captions consistent across tables on the same website.
• Avoid repeating the same information in the caption and surrounding text unless it helps users understand the content.

HTML Table Caption Exercises

Practice using the <caption> element with the following exercises.

Exercise: Create a student table

Create a table with the caption Student Marks. Include three columns: Name, Subject, and Marks. Add at least two student records.

Exercise: Style a caption

Create a table with the caption Available Courses. Use CSS to make the caption blue, bold, and 20 pixels in size.

Exercise: Position a caption

Create a product table and use caption-side: bottom to display its caption below the table.

Exercise: Improve accessibility

Create an employee table with a meaningful caption and column headers that use scope="col".

These exercises will help you understand how captions describe tables and how CSS can customize their appearance.