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