← Back to HTML Course | Chapter 2: Text, Formatting & Media | Lesson 19 of 26

HTML टेबल हेडर

raw numbers से भरी table उन labels के बिना बेमानी है जो बताएं कि हर row और column क्या represent करता है। <th> (table header) element किसी cell को plain data के बजाय header के रूप में चिन्हित करता है, जिसे browsers default रूप से bold और centered render करते हैं, और screen readers इसका उपयोग करके column और row labels को अपने आप announce करते हैं जैसे ही user data में navigate करता है।

In this page:

  1. बुनियादी th Element
  2. scope Attribute से Direction स्पष्ट करना
  3. thead से Grouping
  4. tbody और tfoot से Grouping
  5. headers और id के साथ Accessible Multi-Level Headers
Syntax
markup 
<table>
  <tr>
    <th>Column header</th>
  </tr>
  <tr>
    <td>Cell</td>
  </tr>
</table>

बुनियादी th Element

<th> structurally बिल्कुल <td> जैसा ही काम करता है -- यह एक table cell है -- लेकिन इसमें "यह cell एक label है" का semantic अर्थ होता है, जिसे ब्राउज़र default रूप से bold, centered text में render करते हैं, और जिसे assistive technology सामान्य data cells से अलग तरीके से announce करती है।

Note:
  • हर उस cell के लिए <th> का उपयोग करें जो किसी row या column को label करती है, और <td> को केवल असल data values के लिए बचाकर रखें।
  • Accepted attributes:
  • scope — row | col | rowgroup | colgroup | auto
  • colspan / rowspan — integers
  • abbr — छोटा label
  • headers — th ids की list
Warning: CSS से bold और centered दिखने के लिए style की गई एक <td> फिर भी उस semantic header meaning की कमी रखती है जो <th> screen readers को देता है।

उदाहरण: The Basic th Element

markup 
<table>
  <tr>
    <th>Name</th>
    <td>Alex</td>
  </tr>
</table>

scope Attribute से Direction स्पष्ट करना

किसी <th> element पर scope attribute स्पष्ट रूप से बताता है कि वह पूरे column को label करता है (scope="col") या पूरी row को (scope="row"), जिससे किसी ऐसी table को navigate करने वाले screen reader users के लिए कोई भी ambiguity नहीं बचती जिसमें दोनों axes पर headers हों।

Note:
  • किसी भी table में जहां header row और header column दोनों हों, हमेशा header cells में scope जोड़ें, क्योंकि तभी direction वाकई अस्पष्ट हो जाती है।
  • Accepted values:
  • row — row के लिए header
  • col — column के लिए header
  • rowgroup — row group के लिए header
  • colgroup — column group के लिए header
  • auto — default
Warning: two-directional headers वाली table पर scope को skip करना screen reader announcements को उन users के लिए confusing या ambiguous बना सकता है जो इन पर भरोसा करते हैं।

उदाहरण: Clarifying Direction with the scope Attribute

markup 
<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Age</th>
  </tr>
</table>

thead से Grouping

<thead> table की header row(s) को असल data rows से अलग एक distinct semantic section में लपेटता है।

यह grouping header को अलग style करने (जैसे अलग background color) और किसी लंबी table को कई pages में print होने पर header row को दोहराने को support करने वाले ब्राउज़रों, दोनों के लिए उपयोगी है।

Note: छोटी tables पर भी अपनी header row को <thead> में लपेटें, यह एक consistent आदत है जो table बड़ी होते ही फायदेमंद साबित होती है।
Warning: एक table technically <thead> के बिना ठीक से render हो सकती है, लेकिन इसे छोड़ने से बड़ी tables के लिए semantic और print-repeating फायदे खो जाते हैं।

उदाहरण: Grouping with thead

markup 
<table>
  <thead>
    <tr><th>Name</th></tr>
  </thead>
</table>

tbody और tfoot से Grouping

<tbody> table की main data rows को लपेटता है, जबकि <tfoot> एक footer row को लपेटता है, जो आमतौर पर totals या summary values के लिए उपयोग होता है।

<thead> के साथ मिलकर, ये तीनों sections किसी table को स्पष्ट रूप से labeled zones में बांटते हैं, जिनमें से हर एक को independently style किया जा सकता है, और कुछ layouts में independently scroll भी किया जा सकता है।

Note: visually नीचे दिखने के बावजूद totals row के लिए <tfoot> रखें, क्योंकि कुछ ब्राउज़र markup में इसकी position की परवाह किए बिना इसे table के नीचे ही render करते हैं।
Warning: बहुत सारी rows वाली लेकिन <tbody> wrapper के बिना table सिर्फ body rows को independently scroll या style करने की क्षमता खो देती है।

उदाहरण: Grouping with tbody and tfoot

markup 
<table>
  <tbody>
    <tr><td>Apple</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Total</td></tr>
  </tfoot>
</table>

headers और id के साथ Accessible Multi-Level Headers

complex tables के लिए जहां एक single data cell एक से ज़्यादा header से जुड़ी हो (जैसे row label और column label दोनों), हर <th> पर id attribute को किसी <td> पर headers attribute के साथ जोड़ने से एक explicit link बनता है, जिससे screen readers उस specific cell के लिए हर relevant header announce कर सकते हैं।

Note:
  • id/headers technique को सच में complex tables के लिए बचाकर रखें; simple tables आमतौर पर अकेले scope से भी काफी स्पष्ट होती हैं।
  • Accepted attributes:
  • th id — unique id
  • td headers — th ids की space-separated list
  • th scope — row | col | rowgroup | colgroup
Warning: किसी headers attribute value में typos जो किसी existing th id से मेल नहीं खाते, बिना कोई visible error दिए चुपचाप associate होने में fail हो जाएंगे।

उदाहरण: Accessible Multi-Level Headers with headers and id

markup 
<table>
  <tr>
    <th id="name">Name</th>
  </tr>
  <tr>
    <td headers="name">Alex</td>
  </tr>
</table>
Live Example
Related Topics

HTML टेबल आकार · HTML टेबल पैडिंग और स्पेसिंग · HTML टेबल बॉर्डर्स · HTML टेबल स्टाइलिंग

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. header cells के लिए असली <th> element के बजाय bold, styled <td> इस्तेमाल करना, जो visually तो same दिखता है पर screen readers जिस semantic meaning पर निर्भर करते हैं वह खो देता है।
  2. complex tables में header cells पर scope attribute भूल जाना, जिससे यह अस्पष्ट रह जाता है कि कोई header अपनी row पर लागू होता है या column पर।
  3. header cells को <thead> section के बाहर रखना, जिससे बहुत सारी data rows वाले बड़े tables के लिए semantic grouping का फायदा खो जाता है।
चैप्टर सारांश
  • <th> किसी cell को header के रूप में mark करता है, डिफ़ॉल्ट रूप से bold और centered दिखता है और screen readers के लिए semantic meaning रखता है।
  • scope attribute (scope="col" या scope="row") साफ करता है कि कोई header पूरे column को describe करता है या पूरी row को।
  • <thead>, <tbody>, और <tfoot> header rows, body rows, और footer rows को semantically group करते हैं और independent styling और scrolling को possible बनाते हैं।
ब्राउज़र सपोर्ट

<th>, <thead>, <tbody>, <tfoot>, और scope attribute हर browser में supported हैं और HTML4 से HTML का हिस्सा रहे हैं।

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson HTML Table Sizes Next Lesson → HTML Table Padding & Spacing

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.