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

HTML टेबल के हेडर भाग को परिभाषित करने के लिए <thead> टैग का उपयोग किया जाता है। यह <tbody> (बॉडी) और <tfoot> (फूटर) के साथ मिलकर टेबल को संरचित करता है।

विशेषताएँ (सभी निरस्त)

विशेषता	मान	विवरण
align	right, left, center, justify, char	निरस्त - क्षैतिज संरेखण। CSS `text-align` का उपयोग करें।
char	character	निरस्त - संरेखण वर्ण। जब align="char" हो।
charoff	पिक्सेल या %	निरस्त - संरेखण ऑफसेट। जब align="char" हो।
valign	top, middle, bottom, baseline	निरस्त - लंबवत संरेखण। CSS `vertical-align` का उपयोग करें।

उदाहरण

निम्नलिखित कोड HTML में <thead> टैग का उपयोग करने का तरीका दर्शाता है:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML thead Tag</title>
    <style>
      table { border-collapse: collapse; width: 100%; }
      th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }
      thead { background-color: #2c3e50; color: white; }
      tfoot { background-color: #ecf0f1; font-weight: bold; }
      tbody tr:nth-child(even) { background-color: #f8f9fa; }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th colspan="4">छात्र अंक तालिका</th>
        </tr>
        <tr>
          <th>विषय</th>
          <th>प्राप्तांक</th>
          <th>कुल अंक</th>
          <th>प्रतिशत</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td colspan="4">कुल: 450/500 (90%)</td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>गणित</td>
          <td>95</td>
          <td>100</td>
          <td>95%</td>
        </tr>
        <tr>
          <td>विज्ञान</td>
          <td>90</td>
          <td>100</td>
          <td>90%</td>
        </tr>
        <tr>
          <td>अंग्रेजी</td>
          <td>85</td>
          <td>100</td>
          <td>85%</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

मुख्य बिंदु

<thead> में आमतौर पर <tr> होता है जिसमें <th> सेल होते हैं।
एक टेबल में केवल एक <thead> हो सकता है।
प्रिंटिंग के समय ब्राउज़र <thead> को हर पेज पर दोहरा सकता है।
स्क्रॉल करने योग्य टेबल बॉडी के लिए <thead> को फिक्स किया जा सकता है (CSS position: sticky के साथ)।