सारणी से संबंधित टैग

इस लेख में, हम सारणी से संबंधित टैग को समझाते हैं।

यह उदाहरणों के साथ HTML में तालिकाओं और तालिका कैप्शन का वर्णन कैसे करें, इसकी व्याख्या करता है।

YouTube Video

सारणी से संबंधित टैग

<table> टैग

 1<table>
 2    <tr>
 3        <th>Header 1</th>
 4        <th>Header 2</th>
 5    </tr>
 6    <tr>
 7        <td>Data 1</td>
 8        <td>Data 2</td>
 9    </tr>
10</table>

• <table> टैग का उपयोग एक तालिका बनाने के लिए किया जाता है जो पंक्तियों और स्तंभों में डेटा को व्यवस्थित और प्रदर्शित करता है।

  <table> टैग डेटा को दृष्टिगत रूप से व्यवस्थित करता है और कई पंक्तियों और स्तंभों के साथ तालिकाएँ बनाता है। पंक्तियाँ <tr> टैग से परिभाषित की जाती हैं, हेडर कोशिकाएँ <th> टैग से, और डेटा कोशिकाएँ <td> टैग से परिभाषित की जाती हैं।

• आप CSS का उपयोग करके टेबल की शैली और लेआउट को अनुकूलित कर सकते हैं।

<tr> टैग

1<tr>
2    <td>Row 1, Cell 1</td>
3    <td>Row 1, Cell 2</td>
4</tr>

• <tr> टैग का उपयोग तालिका में पंक्तियों को परिभाषित करने के लिए किया जाता है।

  <tr> टैग का उपयोग तालिका की प्रत्येक पंक्ति बनाने के लिए किया जाता है, जिसमें कोशिकाएँ (<td> या <th>) होती हैं।

• प्रत्येक पंक्ति में कई सेल्स हो सकते हैं, जो तालिका की संपूर्ण संरचना बनाते हैं।

<th> और <td> टैग

1<th>Header 1</th>
2<td>Data 1</td>

• <th> टैग तालिका की हेडर कोशिका को परिभाषित करता है। आमतौर पर हेडर पंक्तियों में उपयोग किया जाता है, कोशिकाओं की सामग्री बोल्ड और सेंटर में होती है।
• <td> टैग एक सामान्य तालिका डेटा कोशिका को परिभाषित करता है, जो नियमित तालिका डेटा प्रदर्शित करता है।

colspan और rowspan एट्रिब्यूट्स

 1<table>
 2    <thead>
 3        <tr>
 4            <th>Header 1</th>
 5            <th>Header 2</th>
 6        </tr>
 7    </thead>
 8    <tbody>
 9        <tr>
10            <td colspan="2">Spanning Cell</td>
11        </tr>
12        <tr>
13            <td rowspan="2">Spanning Cell</td>
14            <td>Data 1</td>
15        </tr>
16        <tr>
17            <td>Data 2</td>
18        </tr>
19    </tbody>
20</table>

colspan और rowspan वे विशेषताएँ हैं जो तब उपयोग की जाती हैं जब टेबल सेल एक से अधिक स्तंभों या पंक्तियों में फैली होती हैं।

• colspan विशेषता एक सेल को कई स्तंभों में फैलने की अनुमति देती है।
• rowspan एट्रिब्यूट एक सेल को कई पंक्तियों पर फैले होने की अनुमति देता है।

<thead>, <tbody>, <tfoot> टैग

 1<table>
 2    <thead>
 3        <tr>
 4            <th>Header 1</th>
 5            <th>Header 2</th>
 6        </tr>
 7    </thead>
 8    <tbody>
 9        <tr>
10            <td>Data 1</td>
11            <td>Data 2</td>
12        </tr>
13        <tr>
14            <td>Data 3</td>
15            <td>Data 4</td>
16        </tr>
17    </tbody>
18    <tfoot>
19        <tr>
20            <td>Footer 1</td>
21            <td>Footer 2</td>
22        </tr>
23    </tfoot>
24</table>

• <thead> टैग का उपयोग टेबल के हैडर खंड को परिभाषित करने के लिए किया जाता है। यह आमतौर पर स्तंभ शीर्षकों को समेटे रहता है।

  <thead> टैग को टेबल के शीर्ष पर रखा जाता है, जो स्तंभ शीर्षकों या हेडर को परिभाषित करता है। यह डेटा के खंडों को स्पष्ट रूप से अलग करने में मदद करता है।

• <tbody> टैग टेबल के मुख्य भाग को परिभाषित करता है। यह डेटा पंक्तियों को समेटे होता है।

  <tbody> टैग टेबल के मुख्य डेटा भाग को समेटे होता है। यह <thead> और <tfoot> टैग्स से संलग्न पंक्तियों के बीच स्थित होता है।

• <tfoot> टैग टेबल के फुटर भाग को परिभाषित करता है, जिसमें कुल या नोट्स शामिल होते हैं।

  <tfoot> टैग टेबल के अंत में स्थित होता है और इसे कुल या अन्य व्याख्यान दिखाने के लिए उपयोग किया जाता है। यह विशेष रूप से तब उपयोगी होता है जब बड़े डेटा सेट के लिए सारांश बनाने या कुल दिखाने की बात होती है।

<caption> और <colgroup> टैग

 1<table>
 2    <caption>Sample Table Caption</caption>
 3    <colgroup>
 4        <col style="background-color: #f2f2f2">
 5        <col style="background-color: #e6e6e6">
 6    </colgroup>
 7    <thead>
 8        <tr>
 9            <th>Header 1</th>
10            <th>Header 2</th>
11        </tr>
12    </thead>
13    <tbody>
14        <tr>
15            <td>Data 1</td>
16            <td>Data 2</td>
17        </tr>
18        <tr>
19            <td>Data 3</td>
20            <td>Data 4</td>
21        </tr>
22    </tbody>
23</table>

• <caption> टैग एक कैप्शन (शीर्षक) जोड़कर टेबल की सामग्री को अधिक स्पष्ट बनाता है। इसे आम तौर पर टेबल के शीर्ष पर रखा जाता है और यह टेबल की समग्र सामग्री का सारांश प्रस्तुत करता है।

• <colgroup> टैग टेबल के स्तंभों को समूहीकृत करता है और यह स्टाइल्स या लेआउट लागू करने के लिए उपयोग किया जाता है। आप विशिष्ट स्तंभों के लिए <col> टैग शामिल करके बैकग्राउंड रंग या चौड़ाई निर्दिष्ट कर सकते हैं।

तालिका उदाहरण

 1<table>
 2    <caption>Table Title</caption>
 3    <colgroup>
 4        <col span="2" style="background-color: lightblue;">
 5    </colgroup>
 6    <thead>
 7        <tr>
 8            <th>Header 1</th>
 9            <th>Header 2</th>
10            <th>Header 3</th>
11            <th>Header 4</th>
12        </tr>
13    </thead>
14    <tbody>
15        <tr>
16            <td>Data 11</td>
17            <td>Data 12</td>
18            <td>Data 13</td>
19            <td>Data 14</td>
20        </tr>
21        <tr>
22            <td>Data 21</td>
23            <td>Data 22</td>
24            <td>Data 23</td>
25            <td>Data 24</td>
26        </tr>
27    </tbody>
28    <tfoot>
29        <tr>
30            <td colspan="3">Table Footer Title</td>
31            <td>Table Footer Summary</td>
32        </tr>
33    </tfoot>
34</table>

• <table> टैग का उपयोग एक तालिका बनाने के लिए किया जाता है जो डेटा को पंक्तियों और कॉलमों में प्रदर्शित करता है।

• <thead> टैग तालिका की हेडर पंक्तियों को समूहित करता है। यह आमतौर पर <th> टैग्स को शामिल करता है, जो हेडर के रूप में काम करते हैं।

• <tbody> टैग तालिका की मुख्य सामग्री को समूहित करता है। यह आमतौर पर <td> टैग्स से बनी डेटा पंक्तियाँ शामिल करता है।

• <tfoot> टैग तालिका की फ़ुटर पंक्तियों को समूहित करता है। यह कुल योग या टिप्पणियों को प्रदर्शित करने के लिए उपयुक्त है।

• <colgroup> टैग तालिका के कॉलमों को समूहित करता है और उन पर समग्र रूप से स्टाइल लागू करने के लिए उपयोग किया जाता है।

• <caption> टैग तालिका में कैप्शन या हेडिंग जोड़ता है, जिससे उपयोगकर्ताओं के लिए तालिका की सामग्री को समझना आसान हो जाता है।

• colspan विशेषता एक सेल को कई स्तंभों में फैलने की अनुमति देती है।

• rowspan एट्रिब्यूट एक सेल को कई पंक्तियों पर फैले होने की अनुमति देता है।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video