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
| Attribute | Description |
|---|---|
| align | Specifies 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 | Firefox | Edge | 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:
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.