Tag caption

The caption tag is used to add a title or description to a table. It is placed directly after the <table> tag and provides a semantic label for the table, which can improve accessibility and provide clarity on the table’s content.

---

✅ Basic Syntax

<table>
  <caption>Student Scores</caption>
  <tr>
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>85</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>92</td>
  </tr>
</table>

📍 Result:
The table will display with the caption “Student Scores” above it.

---

🎨 Styling with CSS

The <caption> tag can be styled like any other HTML element. You can change the font, alignment, and position, for example:

<style>
  caption {
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
  }
</style>

This will center the caption, make it larger, and give it some space below.

---

📌 Placement and Behavior

• The <caption> is placed at the top of the table by default, but you can adjust its position with CSS using caption-side.

caption {
  caption-side: bottom;  /* Places the caption at the bottom */
}

---

🧠 Best Practices

• Use the <caption> tag to describe the table’s content in a concise and clear manner.
• Avoid using it for decorative or superficial labels.
• A well-named caption helps with accessibility, as screen readers will announce the caption first when reading the table content.

---

✅ Summary

Feature	Description
Tag	<caption>
Usage	Adds a descriptive title or label to a table
Position	By default, appears above the table (can be changed with CSS)
Accessibility	Improves the semantic meaning of the table, especially for screen readers

---