HTML <tfoot> κείμενο

  • Προηγούμενη σελίδα <textarea>
  • Επόμενη σελίδα <th>

Ορισμός και χρήση

<tfoot> ετικέτα χρησιμοποιείται για να ομαδοποιήσει το περιεχόμενο του πέλτου ενός HTML πίνακα.

<tfoot> Το στοιχείο <thead> και <tbody> Τα στοιχεία συνδυάζονται για να καθορίσουν κάθε τμήμα του πίνακα (πέλτα, κεφαλίδες, κείμενο).

Οι περιηγητές μπορούν να χρησιμοποιήσουν αυτά τα στοιχεία ώστε να εμφανίζονται ανεξάρτητα οι κεφαλίδες και τα πέλτα κατά τη διάρκεια της σάρωσης του κειμένου του πίνακα. Επιπλέον, όταν εκτυπώνεται μεγάλος πίνακας που διατρέχει πολλές σελίδες, αυτά τα στοιχεία επιτρέπουν την εκτύπωση των κεφαλίδων και των πέλτων στην κορυφή και στο κάτω μέρος κάθε σελίδας.

Σημείωση: Το στοιχείο <tfoot> πρέπει να περιέχει τουλάχιστον ένα από τα στοιχεία <tr> ετικέτα.

<tfoot> Η ετικέτα πρέπει να χρησιμοποιείται στο εξής πλαίσιο: ως <table> υποστοιχεία του στοιχείου, σε οποιαδήποτε <caption>、<colgroup>、<thead> και <tbody> στοιχεία μετά από

Συμβουλή:Προεπιλεγμένα, τα <thead>, <tbody> και <tfoot> Οι στοιχεία δεν επηρεάζουν τη διάταξη του πίνακα. Αλλά μπορείτε να χρησιμοποιήσετε το CSS για να ρυθμίσετε τα στυλ αυτών των στοιχείων (βλέπε παρακάτω τα παραδείγματα)!

Παράδειγμα

Παράδειγμα 1

HTML πίνακας που περιέχει τα στοιχεία <thead>, <tbody> και <tfoot>:

<table>
  <thead>
    <tr>
      <th>Μήνας</th>
      <th>Αποταμίευση</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ιανουάριος</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Φεβρουάριος</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Σύνολο</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Προσπαθήστε το προσωπικά

Παράδειγμα 2

Ρυθμίστε τα στυλ του <thead>, <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>Μήνας</th>
      <th>Αποταμίευση</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ιανουάριος</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Φεβρουάριος</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Σύνολο</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Προσπαθήστε το προσωπικά

Παράδειγμα 3

Πώς να εξομαλύνετε <tfoot> Το περιεχόμενο (χρησιμοποιώντας το CSS):

<table style="width:100%">
  <tr>
    <th>Μήνας</th>
    <th>Αποταμίευση</th>
  </tr>
  <tr>
    <td>Ιανουάριος</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Φεβρουάριος</td>
    <td>￥4500</td>
  </tr>
  <tfoot style="text-align:center">
    <tr>
      <td>Σύνολο</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Προσπαθήστε το προσωπικά

Παράδειγμα 4

Πώς να εξομαλύνετε οριζόντια <tfoot> Το περιεχόμενο (χρησιμοποιώντας το CSS):

<table style="width:100%">
  <tr>
    <th>Μήνας</th>
    <th>Αποταμίευση</th>
  </tr>
  <tr>
    <td>Ιανουάριος</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Φεβρουάριος</td>
    <td>￥4500</td>
  </tr>
  <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>