HTML <caption> Tag
The <caption> tag is used to define a title or description for a table. It is not a column header (use <th> for that). The tag itself must be inside the <table> element immediately after the opening tag, and it must be the first child of its parent <table> element. Only one caption is allowed per table.
When the <table> element containing <caption> is the only descendant of the <figure> element, you must use the <figcaption> element instead of <caption>.
By default, a table caption is center-aligned above the table. You can use the text-align and caption-side properties to align and position it.
Syntax
The <caption> tag comes in pairs. The content is written between the opening (<caption>) and closing (<​/caption>) tags.
Example of the HTML <caption> tag:
HTML <caption> Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table { width: 400px; border-collapse: collapse; }
th, td { border: 1px solid #000; padding: 4px; }
</style>
</head>
<body>
<table>
<caption>Evaluation paper</caption>
<thead>
<tr>
<th>Student</th>
<th>1st exam</th>
<th>2nd exam</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Johnson</td>
<td>75</td>
<td>65</td>
</tr>
<tr>
<td>Mary Nicolson</td>
<td>55</td>
<td>80</td>
</tr>
<tr>
<td>Max Thomson</td>
<td>60</td>
<td>47</td>
</tr>
</tbody>
</table>
</body>
</html>Result
| Student | 1st exam | 2nd exam |
|---|---|---|
| John Johnson | 75 | 65 |
| Mary Nicolson | 55 | 80 |
| Max Thomson | 60 | 47 |
Example of the HTML <caption> tag with the CSS caption-side property:
Example of the HTML <caption> tag with the CSS caption-side property
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
caption {
background: #1c87c9;
color: #fff;
caption-side: bottom;
}
table,
th,
td {
border: 1px solid #1c87c9;
padding: 3px;
}
td {
background-color: #cccccc;
color: #666666;
}
</style>
</head>
<body>
<h2>Caption-side property example</h2>
<p>Here the caption-side is set to "bottom":</p>
<table>
<caption>Some title here</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
</tbody>
</table>
</body>
</html>Attributes
| Attribute | Value | Description |
|---|---|---|
| align | left, right, center, top, bottom | Aligns the caption horizontally or vertically. Not used in HTML5. Use CSS caption-side instead. |
The <caption> tag supports the Global Attributes and the Event Attributes.
For better accessibility, ensure the caption is programmatically associated with the table so screen readers can announce it correctly. The <caption> element is automatically linked to its parent <table>.
How to style an HTML <caption> Tag
{
"tag_name": "caption"
}Practice
Which of the following statements about the HTML <caption> tag is correct according to the article on w3docs.com?