HTML <caption> टैग

HTML <caption> टैग क्या है?

HTML में <caption> टैग का उपयोग टेबल के लिए एक कैप्शन (शीर्षक/विवरण) बनाने के लिए किया जाता है। एक टेबल के लिए केवल एक कैप्शन परिभाषित किया जा सकता है। डिफ़ॉल्ट रूप से कैप्शन टेबल के ऊपर सेंटर-अलाइन होकर दिखाई देता है।

यह टैग टेबल के तुरंत बाद, <table> टैग के अंदर रखा जाता है।

उदाहरण

नीचे एक टेबल है जिसमें खर्चों का विवरण है और <caption> का उपयोग करके शीर्षक "Expenses" दिया गया है:

<!DOCTYPE html>
<html>
<head>
<style>
  table, th, td {
    border: 2px solid blue;
  }
</style>
</head>
<body>
<table>
  <caption>Expenses</caption>
  <tr>
    <th>Domains</th>
    <th>Cost</th>
  </tr>
  <tr>
    <td>Product Development</td>
    <td>500000</td>
  </tr>
  <tr>
    <td>Marketing</td>
    <td>500000</td>
  </tr>
  <tr>
    <td>Services</td>
    <td>100000</td>
  </tr>
  <tr>
    <td>Support</td>
    <td>100000</td>
  </tr>
  <tr>
    <td>Maintenance</td>
    <td>100000</td>
  </tr>
  <tr>
    <td colspan="2">Total Budget = INR 1300000</td>
  </tr>
</table>
</body>
</html>

आउटपुट

टेबल कैप्शन के साथ प्रदर्शित होगी:

HTML <caption> टैग

कोड विश्लेषण

उपरोक्त उदाहरण में हमने कॉलम के साथ एक टेबल बनाई है। कैप्शन <caption> टैग का उपयोग करके सेट किया गया है:

<caption>Expenses</caption>

महत्वपूर्ण बिंदु

<caption> टैग <table> का पहला चाइल्ड होना चाहिए।
CSS का उपयोग करके कैप्शन की स्थिति (top, bottom) और अलाइनमेंट बदला जा सकता है: caption-side: bottom; text-align: left;
यह टेबल की एक्सेसिबिलिटी में सुधार करता है क्योंकि स्क्रीन रीडर टेबल के उद्देश्य की घोषणा करते हैं।