HTML में टेबल्स (Tables)

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

1. टेबल के मूल टैग्स

• <table> — टेबल का मुख्य टैग
• <tr> — एक पंक्ति (row) को दर्शाता है
• <td> — टेबल डेटा (एक सेल)
• <th> — हेडर सेल (bold और centered)

<table>
  <tr>
    <th>नाम</th>
    <th>पद</th>
  </tr>
  <tr>
    <td>राहुल</td>
    <td>प्रबंधक</td>
  </tr>
</table>

नाम	पद
राहुल	प्रबंधक

2. <caption> — टेबल शीर्षक

इस टैग का प्रयोग टेबल का शीर्षक देने के लिए होता है। यह <table> टैग के तुरंत बाद लिखा जाता है।

<table>
  <caption>कर्मचारी जानकारी</caption>
  ...
</table>

कर्मचारी जानकारी

नाम	पद
राहुल	प्रबंधक

3. <thead>, <tbody>, <tfoot>

HTML टेबल को तीन भागों में बाँट सकते हैं:

• <thead> — हेडर सेक्शन
• <tbody> — मुख्य डेटा
• <tfoot> — फूटर डेटा

<table>
  <thead>
    <tr><th>वर्ष</th><th>बिक्री</th></tr>
  </thead>
  <tbody>
    <tr><td>2024</td><td>₹1,00,000</td></tr>
  </tbody>
  <tfoot>
    <tr><td>कुल</td><td>₹1,00,000</td></tr>
  </tfoot>
</table>

वर्ष	बिक्री
2024	₹1,00,000
कुल	₹1,00,000

4. colspan और rowspan

कभी-कभी एक सेल को एक से अधिक कॉलम या रो में फैलाना होता है:

• colspan: एक सेल को कई कॉलम में फैलाता है
• rowspan: एक सेल को कई रो में फैलाता है

<table>
  <tr>
    <th colspan="2">विवरण</th>
  </tr>
  <tr>
    <td>नाम</td><td>सुमित</td>
  </tr>
</table>

विवरण
नाम	सुमित

5. टेबल को स्टाइल देना

CSS का प्रयोग करके टेबल को सुंदर और पठनीय बनाया जा सकता है:

• Border, Padding, Background Colors
• Hover Effect, Text Alignments

उदाहरण ऊपर के इस पेज में टेबल पर लागू है।

निष्कर्ष

HTML टेबल्स एक आवश्यक टूल हैं जब आपको व्यवस्थित डेटा दिखाना हो। उचित स्ट्रक्चरिंग और CSS के साथ इन्हें यूजर-फ्रेंडली और प्रोफेशनल लुक में प्रस्तुत किया जा सकता है।