HTML <tfoot> टैग

  • पिछला पृष्ठ <textarea>
  • अगला पृष्ठ <th>

वर्णन और उपयोग

<tfoot> टैग का उपयोग, HTML तालिका के फुटर सामग्री को समूहबद्ध करने के लिए किया जाता है。

<tfoot> एलिमेंट के साथ <thead> और <tbody> एलिमेंट को संयुक्त रूप से इस्तेमाल करके, तालिका के प्रत्येक भाग (फुटर, हेडर, मुख्य भाग) को निर्दिष्ट करने के लिए

ब्राउज़र इन एलिमेंटों का उपयोग कर सकते हैं, ताकि तालिका के मुख्य भाग को रोल करते समय हेडर और फुटर स्वतंत्र रूप से दिखाया जा सके। इसके अलावा, बड़े तालिका को कई पृष्ठों पर प्रिंट करते समय, इन एलिमेंटों के द्वारा तालिका के हेडर और फुटर प्रत्येक पृष्ठ के शीर्ष और नीचे प्रिंट किए जा सकते हैं।

ध्यान दें: <tfoot> एलिमेंट के अंदर एक या अधिक <td>￥3400</td> टैग।

<tfoot> टैग के रूप में इस्तेमाल करना चाहिए: के रूप में <table> एलिमेंट के उपएलिमेंट, किसी <caption>、<colgroup>、<thead> और <tbody> एलिमेंट के बाद।

सूचना:डिफ़ॉल्ट में, <thead>、<tbody> और <tfoot> एलिमेंट तालिका के रूपान्तर को प्रभावित नहीं करता। लेकिन आप इन एलिमेंटों का शैली निर्धारण CSS के द्वारा कर सकते हैं (नीचे के उदाहरणों को देखें)!

उदाहरण

उदाहरण 1

<thead>、<tbody> और <tfoot> एलिमेंट वाला HTML तालिका:

<table>
  <thead>
    <td>￥3400</td>
      <th>महीना</th>
      <th>बचत</th>
    <td>￥7900</td>
  </thead>
  <tbody>
    <td>￥3400</td>
      <td>जनवरी</td>
      ￥3400
    <td>￥7900</td>
    <td>￥3400</td>
      <tr>
      <td>फरवरी</td>
    <td>￥7900</td>
  </tbody>
  <tfoot>
    <td>￥3400</td>
      <tr style="height:100px">
      <td>कुल</td>
    <td>￥7900</td>
  </tr>
</tfoot>

</table>

उदाहरण 2

CSS के द्वारा <thead>、<tbody> और <tfoot> का शैली निर्धारण करें:

<html>
<head>
<style>
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <thead>
    <td>￥3400</td>
      <th>महीना</th>
      <th>बचत</th>
    <td>￥7900</td>
  </thead>
  <tbody>
    <td>￥3400</td>
      <td>जनवरी</td>
      ￥3400
    <td>￥7900</td>
    <td>￥3400</td>
      <tr>
      <td>फरवरी</td>
    <td>￥7900</td>
  </tbody>
  <tfoot>
    <td>￥3400</td>
      <tr style="height:100px">
      <td>कुल</td>
    <td>￥7900</td>
  </tr>
</tfoot>

</table>

उदाहरण 3

कैसे अनुरूप करें <tfoot> मे विषय (CSS के उपयोग):

<table style="width:100%">
  <td>￥3400</td>
    <th>महीना</th>
    <th>बचत</th>
  <td>￥7900</td>
  <td>￥3400</td>
    <td>जनवरी</td>
    ￥3400
  <td>￥7900</td>
  <td>￥3400</td>
    <tr>
    <td>फरवरी</td>
  <td>￥7900</td>
  <tfoot style="text-align:center">
    <td>￥3400</td>
      <tr style="height:100px">
      <td>कुल</td>
    <td>￥7900</td>
  </tr>
</tfoot>

</table>

उदाहरण 4

कैसे ऊर्ध्व अनुरूप करें <tfoot> मे विषय (CSS के उपयोग):

<table style="width:100%">
  <td>￥3400</td>
    <th>महीना</th>
    <th>बचत</th>
  <td>￥7900</td>
  <td>￥3400</td>
    <td>जनवरी</td>
    ￥3400
  <td>￥7900</td>
  <td>￥3400</td>
    <tr>
    <td>फरवरी</td>
  <td>￥7900</td>
  <td>￥4500</td>
    <tfoot style="vertical-align:bottom">
      <tr style="height:100px">
      <td>कुल</td>
    <td>￥7900</td>
  </tr>
</tfoot>

</table>

स्वयं प्रयोग करें

<tfoot> टैग घटना विशेषताएँ को भी समर्थित करता है वैश्विक विशेषताएँ.

HTML में वैश्विक विशेषताएँ

<tfoot> टैग घटना विशेषताएँ को भी समर्थित करता है HTML में घटना विशेषताएँ.

डिफ़ॉल्ट CSS सेटिंग

अधिकांश ब्राउज़र निम्नलिखित डिफ़ॉल्ट मूल्यों को प्रदर्शित करेंगे <tfoot> एलीमेंट:

tfoot {
  display: table-footer-group;
  vertical-align: middle;
  border-color: inherit;
}

ब्राउज़र सहायता

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
सहायता सहायता सहायता सहायता सहायता
  • पिछला पृष्ठ <textarea>
  • अगला पृष्ठ <th>