एचटीएमएल <थेड> टैग
उदाहरण
<थेड>, <tbody>, और <tfoot> तत्व के साथ एक HTML तालिका:
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
नीचे और अधिक "इसे स्वयं आज़माएं" उदाहरण।
परिभाषा और उपयोग
<thead>
टैग का उपयोग HTML तालिका में शीर्षलेख सामग्री को समूहीकृत करने के लिए किया जाता है ।
<thead>
तत्व का उपयोग <tbody> और <tfoot> तत्वों के संयोजन में तालिका के प्रत्येक भाग (हेडर, बॉडी, फ़ुटर) को निर्दिष्ट करने के लिए किया जाता है।
ब्राउजर इन तत्वों का उपयोग हेडर और फुटर से स्वतंत्र रूप से टेबल बॉडी की स्क्रॉलिंग को सक्षम करने के लिए कर सकते हैं। साथ ही, एक से अधिक पृष्ठों वाली एक बड़ी तालिका को प्रिंट करते समय, ये तत्व तालिका शीर्षलेख और पादलेख को प्रत्येक पृष्ठ के ऊपर और नीचे मुद्रित करने में सक्षम कर सकते हैं।
नोट: तत्व के अंदर <thead>
एक या अधिक
<tr> टैग होने चाहिए।
टैग का <thead>
उपयोग निम्नलिखित संदर्भ में किया जाना चाहिए:
<तालिका> तत्व के बच्चे के रूप में, किसी भी
<कैप्शन> और <colgroup> तत्वों के बाद, और किसी भी
<tbody> , <tfoot> , और
<tr> तत्वों से पहले।
युक्ति: , <thead>
<tbody>, और <tfoot> तत्व डिफ़ॉल्ट रूप से तालिका के लेआउट को प्रभावित नहीं करेंगे। हालाँकि, आप इन तत्वों को स्टाइल करने के लिए CSS का उपयोग कर सकते हैं (नीचे उदाहरण देखें)!
ब्राउज़र समर्थन
Element | |||||
---|---|---|---|---|---|
<thead> | Yes | Yes | Yes | Yes | Yes |
वैश्विक गुण
<thead>
टैग HTML में वैश्विक विशेषताओं का भी समर्थन करता है ।
घटना गुण
<thead>
टैग HTML में ईवेंट विशेषताओं का भी समर्थन करता है ।
और ज्यादा उदाहरण
उदाहरण
स्टाइल <थेड>, <tbody>, और <tfoot> CSS के साथ:
<html>
<head>
<style>
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
उदाहरण
<थेड> (सीएसएस के साथ) के अंदर सामग्री को कैसे संरेखित करें:
<table style="width:100%">
<thead
style="text-align:left">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
उदाहरण
<थेड> (सीएसएस के साथ) के अंदर सामग्री को लंबवत कैसे संरेखित करें:
<table style="width:50%;">
<thead
style="vertical-align:bottom">
<tr
style="height:100px">
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
डिफ़ॉल्ट सीएसएस सेटिंग्स
अधिकांश ब्राउज़र <thead>
निम्न डिफ़ॉल्ट मानों के साथ तत्व प्रदर्शित करेंगे:
thead {
display: table-header-group;
vertical-align: middle;
border-color: inherit;
}