HTML Tags

HTML <caption> Tag

The <caption> tag defines a title or description for a table.
It helps users understand the purpose or content of the table and is usually displayed above the table by default.

Syntax

html

<table>
  <caption>Table Title</caption>
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

Attributes

Attribute	Description
align	Specifies the alignment of the caption - values can be top, bottom, left, or right. (Deprecated - use CSS instead)

Example

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Caption Tag Example</title>
  <style>
    table {
      border-collapse: collapse;
      width: 60%;
      margin: 20px auto;
    }
    th, td {
      border: 1px solid #444;
      padding: 10px;
      text-align: center;
    }
    caption {
      caption-side: top;
      font-weight: bold;
      font-size: 1.2em;
      color: #29AB87;
      margin-bottom: 8px;
    }
  </style>
</head>
<body>

  <table>
    <caption>World Programming Languages Overview</caption>
    <tr>
      <th>Language</th>
      <th>Creator</th>
      <th>Release Year</th>
    </tr>
    <tr>
      <td>Python</td>
      <td>Guido van Rossum</td>
      <td>1991</td>
    </tr>
    <tr>
      <td>Java</td>
      <td>James Gosling</td>
      <td>1995</td>
    </tr>
    <tr>
      <td>HTML</td>
      <td>Tim Berners-Lee</td>
      <td>1993</td>
    </tr>
  </table>

</body>
</html>

Output

Browser Output

html

Displays a table with a caption (“World Programming Languages Overview”) positioned above it.
Please use our TryIt editor to see the actual output.

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE9+
Yes	Yes	Yes	Yes	Yes	Yes

All modern browsers fully support the <caption> element.

Notes

Only one <caption> is allowed per table.
The default position is above the table, but you can reposition it using CSS:

css

caption { caption-side: bottom; }

Helps with accessibility, providing screen readers with context about the table’s data.

Conclusion

The <caption> tag is a simple yet powerful way to make your tables more understandable and accessible.
It enhances both usability and semantic meaning, especially when working with data-heavy layouts.

PreviousHTML <table> Tag NextHTML <thead> Tag