Η ετικέτα tfoot

Η ετικέτα tfoot ορίζει το κάτω μέρος ενός πίνακα. Χρησιμοποιείται για την ομαδοποίηση σειρών με τέτοιο τρόπο, ώστε να μπορούν να εφαρμοστούν αμέσως στυλ CSS σε μια συγκεκριμένη ομάδα. Σε έναν πίνακα μπορεί να υπάρχει μόνο μία ετικέτα tfoot.

Η ετικέτα tfoot χρησιμοποιείται συχνά μαζί με την thead και την tbody για τον ορισμό του επάνω μέρους, του κύριου μέρους και του κάτω μέρους ενός πίνακα HTML. Από προεπιλογή, το πρόγραμμα περιήγησης θα τοποθετήσει το περιεχόμενο της tfoot στο κάτω μέρος του πίνακα, και της thead - στο επάνω μέρος.

Παράδειγμα

Ας ορίσουμε κόκκινο χρώμα κειμένου για την ομάδα σειρών που ομαδοποιούνται από την ετικέτα tfoot, χρησιμοποιώντας την ιδιότητα color:

html<table>
  <thead>
    <tr>
      <th>Όνομα</th>
      <th>Επώνυμο</th>
      <th>Μισθός</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>όνομα1</td>
      <td>επώνυμο1</td>
      <td>200$</td>
    </tr>
    <tr>
      <td>όνομα2</td>
      <td>επώνυμο2</td>
      <td>1000$</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>πλήθος: 2</td>
      <td>-</td>
      <td>σύνολο: 1200$</td>
    </tr>
  </tfoot>
</table>

csstfoot {
  color: red;
}

table, td, th {
  border: 1px solid black;
}

Результат:

Παράδειγμα

Εδώ, ας δούμε ότι η thead δεν βρίσκεται στην κορυφή, και η tfoot δεν βρίσκεται στο κάτω μέρος, ωστόσο το πρόγραμμα περιήγησης τις τοποθετεί στις σωστές θέσεις τους:

html<table>
  <tfoot>
    <tr>
      <td>πλήθος: 2</td>
      <td>-</td>
      <td>σύνολο: 1200$</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>όνομα1</td>
      <td>επώνυμο1</td>
      <td>200$</td>
    </tr>
    <tr>
      <td>όνομα2</td>
      <td>επώνυμο2</td>
      <td>1000$</td>
    </tr>
  </tbody>
  <thead>
    <tr>
      <th>Όνομα</th>
      <th>Επώνυμο</th>
      <th>Μισθός</th>
    </tr>
  </thead>
</table>

csstfoot {
  color: red;
}

table, td, th {
  border: 1px solid black;
}

Результат:

Δείτε επίσης