HTML <caption> Tag – Table Title
📌 Introduction
The <caption> tag is used to add a title or description to a table.
It helps users understand what the table is about before reading the data.
👉 It is always placed directly after the <table> tag.
🧱 Syntax
<table>
<caption>
Table Title
</caption>
<tr>
<td>Data</td>
</tr>
</table>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>Caption Example</title>
</head>
<body>
<table border="1">
<caption>
Students Information
</caption>
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td>Ahmed</td>
<td>20</td>
<td>Algeria</td>
</tr>
<tr>
<td>Sara</td>
<td>22</td>
<td>Morocco</td>
</tr>
</table>
</body>
</html>
🖥️ Output Explanation
- The caption appears above the table
- It describes the purpose of the table
- Helps users understand data faster
🎯 Why <caption> is Important
1. 🧠 Improves Clarity
Users immediately know what the table represents.
2. 📊 Professional Tables
Used in:
- Reports
- Dashboards
- Data analysis
3. ♿ Accessibility
Screen readers announce the table title first.
🧱 Correct Position
✔ Correct:
<table>
<caption>
My Table
</caption>
</table>
❌ Wrong:
<caption>
My Table
</caption>
<table></table>
🎨 Styling Example
<caption style="font-weight:bold; font-size:18px;">
Students List
</caption>
⚖️ <caption> vs <h2>
| Tag | Use |
|---|---|
<caption> |
Table title (inside table) |
<h2> |
Page section title |
🚫 Common Mistakes
- Placing
<caption>outside<table>❌ - Using multiple captions ❌
- Forgetting it in large tables ❌
🧪 Mini Exercise
Create a table with:
- A
<caption>titled “Employee List” - 3 columns (Name, Job, Salary)
- At least 3 rows of data
- Style the caption