अध्याय 7: HTML टेबल्स

HTML में टेबल्स का उपयोग डेटा को व्यवस्थित और संरचित तरीके से प्रदर्शित करने के लिए किया जाता है। टेबल्स का उपयोग विशेष रूप से उन जानकारियों को प्रस्तुत करने के लिए किया जाता है जो पंक्तियों और स्तंभों में व्यवस्थित होती हैं। इस अध्याय में हम टेबल्स, टेबल रो, टेबल डेटा, टेबल हेडिंग्स और टेबल एट्रिब्यूट्स के बारे में जानेंगे।

टेबल्स का परिचय (<table>)

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

उदाहरण:

<table>
<tr>
<th>हेडिंग 1</th>
<th>हेडिंग 2</th>
</tr>
<tr>
<td>डेटा 1</td>
<td>डेटा 2</td>
</tr>
<tr>
<td>डेटा 3</td>
<td>डेटा 4</td>
</tr>
</table>

Output

टेबल रो (<tr>)

<table> टैग के भीतर <tr> टैग का उपयोग टेबल में पंक्तियों को परिभाषित करने के लिए किया जाता है। प्रत्येक <tr> टैग के अंदर, आप <th> या <td> टैग का उपयोग करके सेल्स को परिभाषित कर सकते हैं।

उदाहरण:

<tr>
<td>डेटा 1</td>
<td>डेटा 2</td>
</tr>

टेबल डेटा (<td>)

<table> टैग के भीतर <td> (टेबल डेटा) टैग का उपयोग टेबल में डेटा सेल्स को परिभाषित करने के लिए किया जाता है। <td> टैग का उपयोग <tr> टैग के अंदर किया जाता है।

उदाहरण:

<tr>
<td>डेटा 1</td>
<td>डेटा 2</td>
</tr>

टेबल हेडिंग्स (<th>)

<table> टैग के भीतर <th> (टेबल हेडिंग) टैग का उपयोग टेबल में हेडिंग सेल्स को परिभाषित करने के लिए किया जाता है। <th> टैग का उपयोग <tr> टैग के अंदर किया जाता है और यह सामान्यत: बोल्ड और सेंटर-अलाइंड होता है।

उदाहरण:

<tr>
<th>हेडिंग 1</th>
<th>हेडिंग 2</th>
</tr>

टेबल एट्रिब्यूट्स (बॉर्डर, स्पैन, आदि)

1. बॉर्डर (border):
   • विवरण: यह एट्रिब्यूट टेबल के चारों ओर एक बॉर्डर जोड़ता है। आप बॉर्डर की मोटाई को निर्दिष्ट कर सकते हैं।
   • उदाहरण:
     <table border="1">
<tr>
<th>हेडिंग 1</th>
<th>हेडिंग 2</th>
</tr>
<tr>
<td>डेटा 1</td>
<td>डेटा 2</td>
</tr>
</table>

2. कोलस्पैन (colspan):
   • विवरण: यह एट्रिब्यूट एक सेल को एक से अधिक कॉलम में फैलाने की अनुमति देता है।
   • उदाहरण:
     <tr>
<td colspan="2">यह सेल दो कॉलम में फैला हुआ है</td>
</tr>

3. रोस्पैन (rowspan):
   • विवरण: यह एट्रिब्यूट एक सेल को एक से अधिक पंक्तियों में फैलाने की अनुमति देता है।
   • उदाहरण:
     <tr>
<td rowspan="2">यह सेल दो पंक्तियों में फैला हुआ है</td>
<td>डेटा 2</td>
</tr>
<tr>
<td>डेटा 3</td>
</tr>

4. सेलपैडिंग (cellpadding):
   • विवरण: यह एट्रिब्यूट प्रत्येक सेल के अंदर स्पेस जोड़ता है।
   • उदाहरण:<table cellpadding=”10″>
     <tr>
<th>हेडिंग 1</th>
<th>हेडिंग 2</th>
</tr>
<tr>
<td>डेटा 1</td>
<td>डेटा 2</td>
</tr>
</table>

1. सेलस्पेसिंग (cellspacing):
   • विवरण: यह एट्रिब्यूट टेबल सेल्स के बीच स्पेस जोड़ता है।
   • उदाहरण:
     <table cellspacing="10">
<tr>
<th>हेडिंग 1</th>
<th>हेडिंग 2</th>
</tr>
<tr>
<td>डेटा 1</td>
<td>डेटा 2</td>
</tr>
</table>

टेबल के अतिरिक्त टैग्स

<thead>, <tbody>, और <tfoot>

• thead: यह टैग टेबल के हेडर सेक्शन को परिभाषित करता है।
• tbody: यह टैग टेबल के मुख्य डेटा सेक्शन को परिभाषित करता है।
• tfoot: यह टैग टेबल के फुटर सेक्शन को परिभाषित करता है।

उदाहरण:

<table border="1">
<caption>यह एक टेबल कैप्शन है</caption>
<thead>
<tr>
<th>हेडिंग 1</th>
<th>हेडिंग 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>डेटा 1</td>
<td>डेटा 2</td>
</tr>
<tr>
<td>डेटा 3</td>
<td>डेटा 4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>फुटर 1</td>
<td>फुटर 2</td>
</tr>
</tfoot>
</table>

<col> और <colgroup>

• colgroup: यह टैग कॉलम्स के समूह को परिभाषित करता है और एक या अधिक <col> टैग्स को शामिल करता है।
• col: यह टैग एक कॉलम के गुणों को परिभाषित करता है।

उदाहरण:
<table border="1">
<colgroup>
<col span="2" style="background-color:lightgrey">
</colgroup>
<thead>
<tr>
<th>हेडिंग 1</th>
<th>हेडिंग 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>डेटा 1</td>
<td>डेटा 2</td>
</tr>
<tr>
<td>डेटा 3</td>
<td>डेटा 4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>फुटर 1</td>
<td>फुटर 2</td>
</tr>
</tfoot>
</table>

<caption>

• caption: यह टैग टेबल का शीर्षक या कैप्शन जोड़ने के लिए उपयोग किया जाता है।

उदाहरण:

<table border="1">
<caption>यह एक टेबल कैप्शन है</caption>
<thead>
<tr>
<th>हेडिंग 1</th>
<th>हेडिंग 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>डेटा 1</td>
<td>डेटा 2</td>
</tr>
<tr>
<td>डेटा 3</td>
<td>डेटा 4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>फुटर 1</td>
<td>फुटर 2</td>
</tr>
</tfoot>
</table>

HTML टेबल्स का उपयोग डेटा को व्यवस्थित और संरचित तरीके से प्रस्तुत करने के लिए किया जाता है। <table> टैग का उपयोग टेबल को परिभाषित करने के लिए, <tr> टैग का उपयोग पंक्तियों को परिभाषित करने के लिए, <td> टैग का उपयोग डेटा सेल्स को परिभाषित करने के लिए, और <th> टैग का उपयोग हेडिंग सेल्स को परिभाषित करने के लिए किया जाता है। बॉर्डर, कोलस्पैन, रोस्पैन, सेलपैडिंग, और सेलस्पेसिंग जैसे एट्रिब्यूट्स का उपयोग करके आप अपनी टेबल्स को और अधिक आकर्षक और उपयोगकर्ता-अनुकूल बना सकते हैं। अगले अध्याय में हम और अधिक HTML टैग्स और उनके उपयोगों के बारे में जानेंगे।