HTML Table Headers

HTML Table Headers का उपयोग table के columns या rows को label देने के लिए किया जाता है।
Headers table के data को समझने में आसान बनाते हैं और accessibility व SEO के लिए भी बहुत important होते हैं।

HTML Table Header क्या होता है

Table header वह cell होता है जो यह बताता है कि उसके नीचे या सामने वाला data किस बारे में है।
HTML में table header के लिए <th> tag का उपयोग किया जाता है।

<th> Tag का उपयोग

<th> tag table header cell बनाता है।

<th>Username</th>

By default <th>: Bold होता है
Center aligned होता है

Basic Table Header Example

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Rohit</td>
    <td>22</td>
  </tr>
</table>

यहाँ पहली row पूरी header row है।

Column Headers

जब headers columns के लिए होते हैं, तब <th> top row में use किया जाता है।

<tr>
  <th>Course</th>
  <th>Duration</th>
  <th>Fees</th>
</tr>

यह सबसे common use case है।

Row Headers

जब headers rows के लिए होते हैं, तब <th> first column में use किया जाता है।

<table>
  <tr>
    <th>Student</th>
    <td>Amit</td>
  </tr>
  <tr>
    <th>Marks</th>
    <td>85</td>
  </tr>
</table>

यह comparison या profile-style tables में उपयोगी होता है।

scope Attribute

scope attribute screen readers को बताता है कि header किस data से related है।

Values: col
row

Example:

<th scope="col">Name</th>
<th scope="row">Amit</th>

यह accessibility के लिए बहुत important है।

Complete Accessible Table Header Example

<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">City</th>
  </tr>
  <tr>
    <th scope="row">Ravi</th>
    <td>Mumbai</td>
  </tr>
</table>

Screen readers इस structure को आसानी से समझ पाते हैं।

<thead> में Table Headers

Large tables में headers को अलग section में रखा जाता है।

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mobile</td>
      <td>₹10000</td>
    </tr>
  </tbody>
</table>

<thead> table structure को clear और maintainable बनाता है।

Multiple Header Rows

Tables में एक से ज्यादा header rows भी हो सकती हैं।

<table>
  <tr>
    <th rowspan="2">Name</th>
    <th colspan="2">Marks</th>
  </tr>
  <tr>
    <th>Math</th>
    <th>Science</th>
  </tr>
</table>

यह complex data representation के लिए useful होता है।

Table Header Styling

Headers को visually highlight करने के लिए CSS का उपयोग किया जाता है।

<style>
th {
  background-color: #333;
  color: white;
  padding: 10px;
}
</style>

Header styling readability बढ़ाती है।

Sticky Table Headers

Long tables में header को scroll करते समय visible रखा जा सकता है।

<style>
th {
  position: sticky;
  top: 0;
  background-color: #444;
}
</style>

यह reports और dashboards में बहुत उपयोगी होता है।

Table Headers और SEO

Search engines table structure को समझने के लिए headers का उपयोग करते हैं।
Proper <th> usage से data context clear होता है।

Common Mistakes

Headers के लिए <td> use करना
scope attribute ignore करना
Headers को style न करना
Complex tables में proper structure न रखना

Best Practices

Headers के लिए हमेशा <th> use करें
Accessibility के लिए scope add करें
Headers को visually distinct बनाएं
Data tables में logical structure रखें

Summary

HTML Table Headers data को समझने और explain करने के लिए जरूरी होते हैं।
<th> tag और scope attribute accessibility और clarity बढ़ाते हैं।
Properly structured headers professional और user-friendly tables का base होते हैं।