Learn HTML – Part 36 – caption Tag – Table Title

Learn HTML – Part 36 – caption Tag – Table Title

The HTML caption tag is used to define a title or heading for an HTML table.

It provides a brief description of the table’s content, helping users understand the purpose of the data.


What is the caption Tag?

The caption tag is used inside the table element to define the table title.

The caption is usually displayed above the table.


Basic Syntax

<table>

   <caption>Student Information</caption>

   <tr>
      <th>Name</th>
      <th>Age</th>
   </tr>

</table>

Example – Table with Caption

<table border="1">

   <caption>Student Details</caption>

   <tr>
      <th>Name</th>
      <th>Age</th>
   </tr>

   <tr>
      <td>Alice</td>
      <td>23</td>
   </tr>

   <tr>
      <td>Bob</td>
      <td>28</td>
   </tr>

</table>

Output:

Student Details
NameAge
Alice23
Bob28

Important Rules for caption

  • The caption element must be placed immediately after the opening table tag.
  • A table should have only one caption.
  • It describes the purpose of the table.

Why Use the caption Tag?

  • Provides a clear title for the table
  • Improves accessibility for screen readers
  • Helps users understand the table content quickly
  • Improves semantic HTML structure

The caption tag helps describe the data displayed in a table.


Common Mistakes Beginners Make

  • Placing the caption outside the table
  • Using multiple captions in a table
  • Not providing meaningful titles

Conclusion

The HTML caption tag is used to define a title for an HTML table.

It helps users quickly understand the purpose of the table and improves accessibility.

What’s Next?

Now that you understand the caption tag, the next step is learning about the form tag, which is used to create forms for collecting user input.

Next: Learn HTML – Part 37 – form Tag – Creating HTML Forms →


Series: Learn HTML Series

Facebook
WhatsApp
Twitter
LinkedIn
Pinterest

Leave a Comment

Your email address will not be published. Required fields are marked *

Related Articles from the Series

learn-html-part-63-complete-html-project-thumbnail
Learn HTML – Part 63 – Complete HTML Project (Build a Web Page)
Learn HTML – Part 63 – Complete HTML Project In this final lesson, we will build a complete HTML webpage...
learn-html-part-62-time-tag-date-time-thumbnail
Learn HTML – Part 62 – time Tag – Date & Time
Learn HTML – Part 62 – time Tag – Date & Time The HTML time tag is used to represent dates and times...
learn-html-part-61-mark-tag-highlight-text-thumbnail
Learn HTML – Part 61 – mark Tag – Highlight Text
Learn HTML – Part 61 – mark Tag – Highlight Text The HTML mark tag is used to highlight text that is...
learn-html-part-60-figcaption-tag-figure-caption-thumbnail
Learn HTML – Part 60 – figcaption Tag – Figure Caption
Learn HTML – Part 60 – figcaption Tag – Figure Caption The HTML figcaption tag is used to define a caption...
learn-html-part-59-figure-tag-media-content-thumbnail
Learn HTML – Part 59 – figure Tag – Media Content
Learn HTML – Part 59 – figure Tag – Media Content The HTML figure tag is used to group media content...
learn-html-part-58-track-tag-video-subtitles-thumbnail
Learn HTML – Part 58 – track Tag – Video Subtitles
Learn HTML – Part 58 – track Tag – Video Subtitles The HTML track tag is used to add subtitles, captions,...
learn-html-part-57-source-tag-media-sources-thumbnail
Learn HTML – Part 57 – source Tag – Media Sources
Learn HTML – Part 57 – source Tag – Media Sources The HTML source tag is used to define multiple media...
learn-html-part-56-picture-tag-responsive-images-thumbnail
Learn HTML – Part 56 – picture Tag – Responsive Images
Learn HTML – Part 56 – picture Tag – Responsive Images The HTML picture tag is used to display responsive...
learn-html-part-55-dialog-tag-modal-dialog-thumbnail
Learn HTML – Part 55 – dialog Tag – Modal Dialog
Learn HTML – Part 55 – dialog Tag – Modal Dialog The HTML dialog tag is used to create modal or popup...
learn-html-part-54-summary-tag-details-caption-thumbnail
Learn HTML – Part 54 – summary Tag – Details Caption
Learn HTML – Part 54 – summary Tag – Details Caption The HTML summary tag is used to define a visible...
Scroll to Top