एचटीएमएल टेबल हेडर
HTML तालिकाओं में प्रत्येक स्तंभ या पंक्ति के लिए, या कई स्तंभों/पंक्तियों के लिए शीर्षलेख हो सकते हैं।
एमिल | टोबियासी | लीनुस |
---|---|---|
8:00 | ||
---|---|---|
9:00 | ||
10:00 | ||
11:00 | ||
12:00 | ||
13:00 |
सोमवार | मंगल | बुध | इकट्ठा | शुक्र | |
---|---|---|---|---|---|
8:00 | |||||
9:00 | |||||
10:00 | |||||
11:00 | |||||
12:00 |
दिसंबर | ||
---|---|---|
एचटीएमएल टेबल हेडर
टेबल हेडर को th
तत्वों के साथ परिभाषित किया गया है, प्रत्येक th
तत्व एक टेबल सेल का प्रतिनिधित्व करता है।
उदाहरण
<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>
लंबवत तालिका शीर्षलेख
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>
तालिका शीर्षलेख संरेखित करें
डिफ़ॉल्ट रूप से, टेबल हेडर बोल्ड और केंद्रित होते हैं:
पहला नाम | अंतिम नाम | उम्र |
---|---|---|
जील | लोहार | 50 |
पूर्व संध्या | जैक्सन | 94 |
तालिका शीर्षलेखों को बाएँ-संरेखित करने के लिए, CSS text-align
गुण का उपयोग करें:
उदाहरण
th {
text-align: left;
}
एकाधिक कॉलम के लिए हैडर
आपके पास एक हेडर हो सकता है जो दो या दो से अधिक कॉलम तक फैला हो।
नाम | उम्र | |
---|---|---|
जील | लोहार | 50 |
पूर्व संध्या | जैक्सन | 94 |
ऐसा करने के लिए, तत्व colspan
पर विशेषता
का उपयोग करें:<th>
उदाहरण
<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>
आप कोलस्पैन और रोस्पैन के बारे में टेबल कोलस्पैन और रोस्पेन चैप्टर में जानेंगे ।
सारणी का शीर्षक
आप एक कैप्शन जोड़ सकते हैं जो संपूर्ण तालिका के लिए शीर्षक के रूप में कार्य करता है।
महीना | बचत |
---|---|
जनवरी | $100 |
फ़रवरी | $50 |
तालिका में कैप्शन जोड़ने के लिए, <caption>
टैग का उपयोग करें:
उदाहरण
<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>
।