The <caption> element provides a title or description for your table. It helps users understand what the table contains before they start reading the data, improving both accessibility and usability.
What is a Table Caption?
A table caption is a brief description that appears above or below a table. It acts like a headline for your table, telling readers what information they'll find in it. The caption is especially important for users of screen readers who need context before navigating through table cells.
Basic Caption Syntax
The <caption> element must be placed immediately after the opening <table> tag, before any other table elements.
<table>
<caption>Monthly Sales Report</caption>
<tr>
<th>Month</th>
<th>Revenue</th>
</tr>
<tr>
<td>January</td>
<td>$45,000</td>
</tr>
<tr>
<td>February</td>
<td>$52,000</td>
</tr>
</table>Why Use Table Captions?
Table captions serve several important purposes:
- Accessibility: Screen readers announce the caption first, giving visually impaired users context about the table's content.
- Clarity: Captions help all users quickly understand what data the table presents.
- SEO: Search engines use captions to understand table content, potentially improving search rankings.
- Documentation: When tables are printed or saved, captions ensure the context is preserved.
Practical Examples
Student Grade Table
<table>
<caption>Spring 2024 Final Grades - Computer Science 101</caption>
<thead>
<tr>
<th>Student Name</th>
<th>Assignment</th>
<th>Midterm</th>
<th>Final</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sarah Johnson</td>
<td>95%</td>
<td>88%</td>
<td>92%</td>
<td>A</td>
</tr>
<tr>
<td>Mike Chen</td>
<td>87%</td>
<td>91%</td>
<td>85%</td>
<td>B+</td>
</tr>
</tbody>
</table>Product Comparison Table
<table>
<caption>Smartphone Feature Comparison (2024)</caption>
<tr>
<th>Feature</th>
<th>Model A</th>
<th>Model B</th>
<th>Model C</th>
</tr>
<tr>
<td>Price</td>
<td>$699</td>
<td>$899</td>
<td>$1,099</td>
</tr>
<tr>
<td>Battery Life</td>
<td>12 hours</td>
<td>15 hours</td>
<td>18 hours</td>
</tr>
</table>Styling Captions
By default, captions appear above the table and are centered. You can style them using CSS to match your design needs.
<style>
caption {
font-size: 1.5em;
font-weight: bold;
margin-bottom: 10px;
color: #2c3e50;
text-align: left;
}
</style>
<table>
<caption>Quarterly Revenue Growth</caption>
<tr>
<th>Quarter</th>
<th>Revenue</th>
</tr>
<tr>
<td>Q1</td>
<td>$120,000</td>
</tr>
<tr>
<td>Q2</td>
<td>$145,000</td>
</tr>
</table>Best Practices
Be Descriptive but Concise
Your caption should clearly describe the table's content without being too wordy. Include key details like time periods, categories, or specific data being presented.
<!-- Good: Specific and informative -->
<caption>Employee Attendance - January 2024</caption>
<!-- Too vague -->
<caption>Data</caption>
<!-- Too long -->
<caption>
This table shows the attendance records for all employees
in the company during the month of January 2024, including
days present, absent, and late arrivals
</caption>One Caption Per Table
Each table should have only one caption. If you need to provide additional context, consider using a paragraph above the table or adding a summary attribute.
Place Caption Correctly
Always place the caption as the first child of the table element, immediately after the opening <table> tag.
<!-- Correct placement -->
<table>
<caption>Product Inventory</caption>
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<!-- table data -->
</tbody>
</table>
<!-- Incorrect - caption outside table -->
<caption>Product Inventory</caption>
<table>
<!-- table content -->
</table>Accessibility Considerations
Screen readers announce captions before reading table content, which helps users decide whether to navigate through the table or skip it. A good caption makes your tables more accessible to all users.
♿ Accessibility Tips:
- Use clear, plain language in captions
- Avoid using only decorative or marketing language
- Include relevant context like date ranges or categories
- Don't duplicate information that's already in nearby headings
Key Takeaways
- The
<caption>element provides a title for tables - Captions must be the first element inside a table
- Captions improve accessibility for screen reader users
- Keep captions descriptive but concise
- Each table should have only one caption
- Captions can be styled with CSS to match your design
- Good captions include relevant context like time periods
What's Next?
Now that you know how to add descriptive captions to your tables, the next lesson will cover best practices for styling tables and making them look professional and readable.