Η ετικέτα tfoot
Η ετικέτα tfoot ορίζει το κάτω μέρος ενός πίνακα.
Χρησιμοποιείται για την ομαδοποίηση σειρών με τέτοιο
τρόπο, ώστε να μπορούν να εφαρμοστούν αμέσως στυλ CSS
σε μια συγκεκριμένη ομάδα. Σε έναν πίνακα μπορεί
να υπάρχει μόνο μία ετικέτα tfoot.
Η ετικέτα tfoot χρησιμοποιείται συχνά μαζί
με την thead
και την tbody
για τον ορισμό του επάνω μέρους, του κύριου μέρους
και του κάτω μέρους ενός πίνακα HTML. Από προεπιλογή,
το πρόγραμμα περιήγησης θα τοποθετήσει το περιεχόμενο της tfoot
στο κάτω μέρος του πίνακα, και της thead -
στο επάνω μέρος.
Παράδειγμα
Ας ορίσουμε κόκκινο χρώμα κειμένου για την ομάδα σειρών
που ομαδοποιούνται από την ετικέτα
tfoot, χρησιμοποιώντας την ιδιότητα color:
<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>
tfoot {
color: red;
}
table, td, th {
border: 1px solid black;
}
:
Παράδειγμα
Εδώ, ας δούμε ότι η thead
δεν βρίσκεται στην κορυφή, και η tfoot δεν βρίσκεται στο κάτω μέρος,
ωστόσο το πρόγραμμα περιήγησης τις τοποθετεί στις
σωστές θέσεις τους:
<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>
tfoot {
color: red;
}
table, td, th {
border: 1px solid black;
}
:
