HTML Free Codes<caption>
Provides table title captions
Standard HTMLDefinition and Usage
The <caption> element establishes a caption (title or description) for an HTML table. It provides a brief description of what the table contains or represents.
The <caption> element must be inserted immediately after the opening <table> tag as its first child. By default, the caption appears centered above the table, but this can be changed using CSS.
Tip: The
<caption> tag must be the first child of the <table> element, placed immediately after the opening <table> tag.
Best Practice: Always include a caption for data tables to improve accessibility and help users understand the table's purpose at a glance.
Browser Support
The <caption> tag is supported in all major browsers:
Chrome
Yes
Firefox
Yes
Safari
Yes
Edge
Yes
Opera
Yes
Attributes
The <caption> tag only supports HTML global attributes and event attributes.
Note: The
align attribute was used in older HTML versions to position the caption but is now deprecated. Use the CSS caption-side property instead.
Examples
Basic Table Caption
Simple table with a caption:
Example
<table>
<caption>Monthly Sales Report</caption>
<tr>
<th>Month</th>
<th>Sales</th>
</tr>
<tr>
<td>January</td>
<td>$5,000</td>
</tr>
<tr>
<td>February</td>
<td>$6,200</td>
</tr>
</table>Styled Caption
Adding custom styles to the caption:
Example
<style>
caption {
font-size: 20px;
font-weight: bold;
color: #745af2;
padding: 12px;
background-color: #f5f5f5;
border-radius: 8px 8px 0 0;
}
</style>
<table>
<caption>Employee Directory</caption>
<tr>
<th>Name</th>
<th>Department</th>
</tr>
<tr>
<td>John Smith</td>
<td>Marketing</td>
</tr>
<tr>
<td>Sarah Johnson</td>
<td>Engineering</td>
</tr>
</table>Multiple Tables with Captions
Using captions to distinguish between multiple tables:
Example
<table>
<caption>Q1 Sales</caption>
<tr>
<th>Product</th>
<th>Units Sold</th>
</tr>
<tr>
<td>Widget A</td>
<td>150</td>
</tr>
</table>
<table>
<caption>Q2 Sales</caption>
<tr>
<th>Product</th>
<th>Units Sold</th>
</tr>
<tr>
<td>Widget A</td>
<td>200</td>
</tr>
</table>Long Descriptive Caption
Using caption for detailed table description:
Example
<table>
<caption>
2024 Annual Revenue by Region
<br>
<small>Figures shown in millions of USD</small>
</caption>
<tr>
<th>Region</th>
<th>Revenue</th>
</tr>
<tr>
<td>North America</td>
<td>$25.3M</td>
</tr>
<tr>
<td>Europe</td>
<td>$18.7M</td>
</tr>
</table>Caption Position - Top (Default)
Caption appears above the table by default:
Example
<style>
table {
caption-side: top; /* Default position */
}
</style>
<table>
<caption>Student Grades - Spring 2024</caption>
<tr>
<th>Student</th>
<th>Grade</th>
</tr>
<tr>
<td>Alice</td>
<td>A</td>
</tr>
<tr>
<td>Bob</td>
<td>B+</td>
</tr>
</table>Caption Position - Bottom
Using CSS to place caption below the table:
Example
<style>
.bottom-caption {
caption-side: bottom;
}
</style>
<table class="bottom-caption">
<caption>Table 1: Survey Results Summary</caption>
<tr>
<th>Response</th>
<th>Count</th>
</tr>
<tr>
<td>Satisfied</td>
<td>85%</td>
</tr>
<tr>
<td>Neutral</td>
<td>10%</td>
</tr>
<tr>
<td>Unsatisfied</td>
<td>5%</td>
</tr>
</table>Caption with Custom Styling and Alignment
Advanced caption styling:
Example
<style>
.styled-caption {
font-family: 'Arial', sans-serif;
font-size: 24px;
font-weight: bold;
text-align: left;
padding: 16px;
background: linear-gradient(135deg, #745af2, #667eea);
color: white;
border-radius: 8px;
margin-bottom: 8px;
}
</style>
<table>
<caption class="styled-caption">Product Inventory</caption>
<tr>
<th>Item</th>
<th>Stock</th>
</tr>
<tr>
<td>Laptop</td>
<td>45</td>
</tr>
<tr>
<td>Mouse</td>
<td>120</td>
</tr>
</table>Try it Yourself
Interactive Example
See how captions enhance table clarity:
| Day | Activity | Time |
|---|---|---|
| Monday | Team Meeting | 9:00 AM |
| Wednesday | Training Session | 2:00 PM |
| Friday | Project Review | 3:00 PM |
CSS Caption Styling
Common CSS properties for styling captions:
| CSS Property | Example Value | Effect |
|---|---|---|
| caption-side | top | bottom | Positions caption above or below the table |
| text-align | left | center | right | Aligns caption text horizontally |
| font-weight | bold | 600 | Makes caption text bold |
| font-size | 20px | 1.2em | Sets the caption font size |
| color | #745af2 | Sets caption text color |
| padding | 12px | Adds spacing around caption text |
| background | #f5f5f5 | Sets background color for caption |
Accessibility Considerations
- Screen readers: Captions are announced before table content, helping users understand the table's purpose
- Context: Provides immediate context for what the table contains
- Navigation: Makes it easier for users with assistive technologies to navigate between multiple tables
- Clear descriptions: Use concise, descriptive captions that explain the table's content
- Required for data tables: WCAG guidelines recommend captions for all data tables
- Avoid redundancy: Don't repeat information that's already in nearby headings
- Semantic structure: Always use
<caption>instead of positioning text with CSS alone
Best Practices for Table Captions
- First child: Always place
<caption>immediately after the opening<table>tag - Be concise: Keep captions brief but descriptive
- Use for data tables: All data tables should have captions for accessibility
- Avoid for layout: Don't use captions on tables used purely for layout (which should be avoided anyway)
- One caption per table: Each table should have only one caption element
- Provide context: Include relevant information like date ranges, units, or data sources
- Style appropriately: Make captions visually distinct from table data
- Consider numbering: For documents with multiple tables, use "Table 1:", "Table 2:", etc.
When to Use Captions
| Scenario | Use Caption? | Reason |
|---|---|---|
| Data tables with statistics | Yes | Helps users understand what the data represents |
| Pricing tables | Yes | Identifies the pricing plan or period |
| Multiple tables in a document | Yes | Distinguishes between different tables |
| Layout tables (deprecated) | No | Use CSS Grid or Flexbox instead of tables for layout |
| Simple calendars | Yes | Identifies the month/year being displayed |
| Form layouts | No | Use proper form elements instead of tables |