HTML Table Headers

HTML तालिका शीर्षलेख

HTML तालिका शीर्षलेख

HTML तालिकाओं में प्रत्येक स्तंभ या पंक्ति, या एकाधिक स्तंभ/पंक्तियों के लिए शीर्षक हो सकते हैं।

EMIL TOBIAS LINUS
8:00
9:00
10:00
11:00
12:00
13:00
MON TUE WED THU FRI
8:00
9:00
10:00
11:00
12:00
DECEMBER

HTML तालिका शीर्षलेख

टेबल हेडर को वें तत्व द्वारा परिभाषित किया गया है। प्रत्येक वां तत्व एक तालिका सेल का प्रतिनिधित्व करता है।

उदाहरण

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
Firstname Lastname Age
Jill Smith 50
Eve Jackson 94

लंबवत तालिका शीर्षलेख

पहले कॉलम को टेबल हेडर के रूप में उपयोग करने के लिए, प्रत्येक पंक्ति में पहले सेल को <th> तत्व के रूप में परिभाषित करें:

उदाहरण

<table>
  <tr>
    <th>Firstname</th>
    <td>Jill</td>
    <td>Eve</td>
  </tr>
  <tr>
    <th>Lastname</th>
    <td>Smith</td>
    <td>Jackson</td>
  </tr>
  <tr>
    <th>Age</th>
    <td>94</td>
    <td>50</td>
  </tr>
</table>
Firstname Jill Eve
Lastname Smith Jackson
Age 94 50

टेबल हेडर को संरेखित करना

डिफ़ॉल्ट रूप से, तालिका शीर्षक बोल्ड और केन्द्रित होते हैं:

Firstname Lastname Age
Jill Smith 50
Eve Jackson 94

तालिका शीर्षकों को बाएँ-संरेखित करने के लिए, CSS टेक्स्ट-संरेखित गुण का उपयोग करें:

उदाहरण

th {
  text-align: left;
}

एकाधिक स्तंभों के लिए एक शीर्षलेख

आपके पास एक शीर्षक हो सकता है जो दो या दो से अधिक स्तंभों तक फैला हो।

Name Age
Jill Smith 50
Eve Jackson 94

ऐसा करने के लिए, <th> तत्व पर colspan विशेषता का उपयोग करें:

उदाहरण

<table>
  <tr>
    <th colspan="2">Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

📝नोट:

आप टेबल कोलस्पैन और रोस्पैन अध्याय में कोलस्पैन और रोस्पैन के बारे में अधिक जानेंगे।

टेबल हेडर

आप एक शीर्षक जोड़ सकते हैं जो संपूर्ण तालिका के लिए शीर्षक के रूप में कार्य करेगा।

Monthly savings
Month Savings
January $100
February $50

किसी तालिका में कैप्शन जोड़ने के लिए, <कैप्शन> टैग का उपयोग करें:

उदाहरण

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

📝नोट:

<caption> टैग को <table> टैग के तुरंत बाद डाला जाना चाहिए।

अभ्यास

❓HTML में टेबल-हेडिंग के लिए सही टैग नाम क्या है?

<table-header>
✗ ग़लत! <टेबल-हेडर> एक मान्य HTML टैग नहीं है
<td>
✗ ग़लत! <td> टेबल डेटा सेल के लिए एक टैग है
<th>
✓ ठीक है! <th> टेबल हेडर सेल के लिए टैग है