HTML DOM टेबल createTFoot() मेथड: टेबल फुटर बनाना

HTML DOM टेबल createTFoot() मेथड एक खाली <tfoot> एलिमेंट जनरेट करता है और इसे HTML दस्तावेज़ में टेबल में जोड़ता है। यदि टेबल में पहले से <tfoot> है, तो यह मौजूदा को लौटाता है।

सिंटैक्स

object.createTFoot()

उदाहरण: टेबल फुटर बनाना

<!DOCTYPE html>
<html>
<style>
  body { color: #000; background: lightblue; height: 100vh; text-align: center; }
  table { margin: 2rem auto; }
  caption { color: #db133a; }
  .btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; margin: 1rem auto; }
  .show { font-size: 1.2rem; }
</style>
<body>
  <h1>DOM टेबल createTFoot() मेथड डेमो</h1>
  <table border="2">
    <tr> <td>नाम</td> <td>रोल नं.</td> </tr>
    <tr> <td>जॉन</td> <td>071717</td> </tr>
    <tr> <td>जेन</td> <td>031717</td> </tr>
  </table>
  <button onclick="create()" class="btn">फुटर बनाएं</button>
  <script>
    function create() {
      var tableFooter = document.querySelector('table').createTFoot();
      tableFooter.innerHTML = "यह टेबल फुटर है";
    }
  </script>
</body>
</html>

आउटपुट

1. प्रारंभ में: टेबल बिना tfoot के
2. "फुटर बनाएं" क्लिक: <tfoot> बनाया जाता है टेबल के अंत में
3. परिणाम: "यह टेबल फुटर है" टेक्स्ट वाला फुटर सेक्शन

tfoot के विशेष व्यवहार

• HTML पोजीशन: HTML में <tbody> के पहले या बाद में लिखा जा सकता है
• दृश्य पोजीशन: ब्राउज़र हमेशा इसे टेबल के अंत में रेंडर करता है
• प्रिंटिंग: प्रिंट में प्रत्येक पेज के नीचे दोहराया जा सकता है
• स्क्रॉलिंग: कुछ लाइब्रेरीज फिक्स्ड फुटर के लिए इसका उपयोग करती हैं

उचित फुटर स्ट्रक्चर बनाना

function createProperFooter(table, cols, text) {
  var tfoot = table.createTFoot();
  var row = tfoot.insertRow();
  var cell = row.insertCell();
  cell.colSpan = cols;
  cell.textContent = text;
  cell.style.fontWeight = 'bold';
  cell.style.background = '#f0f0f0';
  return tfoot;
}

// उपयोग: 2 कॉलम वाली टेबल के लिए फुटर
createProperFooter(document.querySelector('table'), 2, 'कुल: 2 रिकॉर्ड्स');

संबंधित मेथड्स