HTML में टेबल हेडर कैसे बनाएं?

परिचय

HTML में टेबल हेडर बनाने के लिए, <th>...</th> टैग का उपयोग करें। एक टेबल हेडर टैग टेबल रो <tr>...</tr> से घिरा होता है। <tr> टैग <table> टैग से घिरा होता है। एक टेबल में रो और कॉलम होते हैं, जिन्हें एक या अधिक <tr>, <th>, और <td> एलिमेंट्स का उपयोग करके सेट किया जा सकता है। टेबल पर बॉर्डर जोड़ने के लिए CSS प्रॉपर्टीज जोड़ने के लिए style एट्रिब्यूट का उपयोग करें।

महत्वपूर्ण नोट

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

उदाहरण

<!DOCTYPE html> <html> 
    <head> 
        <style> 
            table, th, td { 
                border: 1px solid black; 
            } 
        </style> 
    </head> 
    <body> 
        <h1>डेटाबेस</h1> 
        <table> 
            <tr> 
                <th>डेटाबेस</th> 
                <th>रिलीज़ वर्ष</th> 
            </tr> 
            <tr> 
                <td>MySQL</td> 
                <td>1995</td> 
            </tr> 
        </table> 
    </body> 
</html>

आउटपुट

सही टेबल हेडर स्ट्रक्चर

<table>
    <caption>डेटाबेस तुलना</caption>
    <thead>
        <tr>
            <th scope="col">डेटाबेस</th>
            <th scope="col">रिलीज़ वर्ष</th>
            <th scope="col">प्रकार</th>
            <th scope="col">लाइसेंस</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>MySQL</td>
            <td>1995</td>
            <td>RDBMS</td>
            <td>GPL</td>
        </tr>
        <tr>
            <td>PostgreSQL</td>
            <td>1996</td>
            <td>ORDBMS</td>
            <td>PostgreSQL License</td>
        </tr>
        <tr>
            <td>MongoDB</td>
            <td>2009</td>
            <td>Document Store</td>
            <td>SSPL</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">कुल डेटाबेस</td>
            <td>3</td>
        </tr>
    </tfoot>
</table>

scope एट्रिब्यूट: एक्सेसिबिलिटी के लिए महत्वपूर्ण

कॉम्प्लेक्स हेडर्स: headers एट्रिब्यूट

<table>
    <thead>
        <tr>
            <th id="h-name" scope="col">नाम</th>
            <th id="h-q1" scope="colgroup" colspan="2">Q1</th>
            <th id="h-q2" scope="colgroup" colspan="2">Q2</th>
        </tr>
        <tr>
            <th scope="col"></th>
            <th id="h-jan" scope="col">जनवरी</th>
            <th id="h-feb" scope="col">फरवरी</th>
            <th id="h-mar" scope="col">मार्च</th>
            <th id="h-apr" scope="col">अप्रैल</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th id="r-prod1" scope="row">उत्पाद 1</th>
            <td headers="h-q1 h-jan r-prod1">100</td>
            <td headers="h-q1 h-feb r-prod1">120</td>
            <td headers="h-q2 h-mar r-prod1">130</td>
            <td headers="h-q2 h-apr r-prod1">140</td>
        </tr>
    </tbody>
</table>

CSS स्टाइलिंग

<style>
    table { border-collapse: collapse; width: 100%; }
    
    th, td { 
        border: 1px solid #dee2e6; 
        padding: 12px 16px; 
        text-align: left; 
    }
    
    thead th {
        background: #f8f9fa;
        font-weight: 600;
        white-space: nowrap;
        position: sticky;
        top: 0;
        z-index: 1;
    }
    
    thead th[scope="colgroup"] {
        background: #e9ecef;
        text-align: center;
    }
    
    tbody tr:nth-child(even) { background: #f8f9fa; }
    tbody tr:hover { background: #e9ecef; }
</style>

Colspan/Rowspan के साथ हेडर्स

<table>
    <thead>
        <tr>
            <th rowspan="2" scope="col">छात्र</th>
            <th colspan="3" scope="colgroup">सेमेस्टर 1</th>
            <th colspan="3" scope="colgroup">सेमेस्टर 2</th>
        </tr>
        <tr>
            <th scope="col">गणित</th>
            <th scope="col">विज्ञान</th>
            <th scope="col">अंग्रेजी</th>
            <th scope="col">गणित</th>
            <th scope="col">विज्ञान</th>
            <th scope="col">अंग्रेजी</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">राहुल</th>
            <td>85</td><td>90</td><td>88</td>
            <td>92</td><td>87</td><td>91</td>
        </tr>
    </tbody>
</table>

सर्वोत्तम अभ्यास

1. हमेशा <thead> में <th> उपयोग करें
2. scope एट्रिब्यूट जोड़ें - हर <th> पर
3. <caption> जोड़ें - टेबल का विवरण
4. कॉलम हेडर्स के लिए scope="col", रो हेडर्स के लिए scope="row"
5. कॉम्प्लेक्स टेबल्स के लिए headers/id उपयोग करें
6. स्टिकी हेडर्स लंबे टेबल्स के लिए

सामान्य गलतियाँ

• <td> का उपयोग हेडर के लिए करना
• scope एट्रिब्यूट भूल जाना
• एकाधिक <thead> सेक्शन्स बिना कारण
• हेडर सेल्स में कंटेंट न होना