HTML Table Headers

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:

बुनियादी th Element
scope Attribute से Direction स्पष्ट करना
thead से Grouping
tbody और tfoot से Grouping
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

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

HTML Table Headers

बुनियादी th Element

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

thead से Grouping

tbody और tfoot से Grouping

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

Chapter Quiz — Complete all 26 topics to unlock

Login to run this code