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

<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

AttributeDescription
alignSpecifies the alignment of the caption — values can be top, bottom, left, or right. (Deprecated — use CSS instead)

Example

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

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
Chrome
Firefox
Firefox
Edge
Edge
Safari
Safari
Opera
Opera
IE
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:
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.

Sign In Form

User your email and password to singn in

Don’t have an account, signup here : 

HTML5 & CSS3

Tools and Tutorials

Want a Website

Want a website for your business ?

Please fill out the details below, so we can reach out to you.

Registration Form

Signup to track your record and much more.

We have sent you an email with a registration link. Please click the link to verify your email address, or enter the 6-digit OTP provided in the email.

Didn't receive the OTP. Regenerate OTP Resend