Η ετικέτες <thead> <tfoot> και <tbody> - Υποδιαιρέσεις του πίνακα
Ορισμός και χρήση
Με την ετικέτα <thead> ορίζουμε την επικεφαλίδα του
πίνακα
Με την ετικέτα <tfoot> ορίζουμε το υποσέλιδο του πίνακα.
Με την ετικέτα <tbody> ορίζουμε τις γραμμές που βρίσκονται μέσα στις ετικέτες
<tbody> και </tbody> ως το κυρίως περιεχόμενο του πίνακα.
Οι ετικέτες <thead> <tfoot> και <tbody> μας δίνουν την
δυνατότητα να ομαδοποιήσουμε τις γραμμές ενός πίνακα. Όταν δημιουργούμε έναν πίνακα, συνήθως έχουμε στην αρχή μια γραμμή
που τοποθετούμε τις επικεφαλίδες του πίνακα (header), έπειτα κάποιες γραμμές με δεδομένα (body, το κυρίως μέρος του πίνακα)
και στο τέλος μια γραμμή με τα συνολικά αποτελέσματα (footer, υποσέλιδο του πίνακα). Με αυτή την διαίρεση του πίνακα o
browser μπορεί να κάνει scrolling στις γραμμές όπου βρίσκεται το κυρίως περιεχόμενο του πίνακα (το οποίο ορίζεται με
την ετικέτα <tbody>) ανεξάρτητα από το header του πίνακα (το οποίο ορίζεται με την ετικέτα
<thead>), και το footer (το οποίο ορίζεται με την ετικέτα
<tfoot>). Επίσης όταν εκτυπώνουμε μεγάλους πίνακες που επεκτείνονται σε περισσότερες από
μια σελίδες, η γραμμές header και footer των πινάκων θα τυπώνονται σε κάθε σελίδα
Σε περίπτωση που θέλουμε να ομαδοποιήσουμε τις γραμμές του πίνακα μας με τον παραπάνω τρόπο, δεν μπορούμε να χρησιμοποιήσουμε
μόνο μια ή δύο από τις ετικέτες <thead> <tfoot> και
<tbody>. Πρέπει να τις χρησιμοποιούμε όλες και με την συγκεκριμένη σειρά :
<thead> <tfoot> <tbody>. Αν και η ετικέτα <tfoot>
τοποθετείται πριν την ετικέτα <tbody> στην οθόνη του browser εμφανίζονται πρώτα οι γραμμές
που ορίζουν οι ετικέτες <tbody> και </tbody> και μετά εμφανίζεται
η γραμμή που ορίζουν οι ετικέτες <tfoot> και </tfoot>
Όλα τα παραπάνω είναι πολύ ωραία και θα ήταν ακόμα ομορφότερα εάν υποστηριζόταν από όλους τους browsers. Πάντως το πρότυπο
της HTML έχει την πεποίθηση ότι αυτό θα αλλάξει στο μέλλον. Μέχρι τότε καλύτερα να ψάχνουμε σκριπτάκια αν θέλουμε scrolling
στους πίνακες μας
Παράδειγμα
Πηγαίος Κώδικας |
Αποτέλεσμα στον browser |
<table border = "1">
<thead>
<tr>
<td>Περιεχόμενο μέσα στο THEAD</td>
</tr>
</thead>
<tfoot>
<tr>
<td>Περιεχόμενο μέσα στο TFOOT</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Περιεχόμενο μέσα στο TBODY</td>
</tr>
</tbody>
</table> |
Περιεχόμενο μέσα στο THEAD |
Περιεχόμενο μέσα στο TFOOT |
Περιεχόμενο μέσα στο TBODY |
|
Κοινές (standard) ιδιότητες που μπορεί να πάρει η ετικέτα:
Καμία από τις ιδιότητες της HTML 4.01, δεν υποστηρίζεται στην HTML5
Ιδιότητες
Ιδιότητα |
Τιμή |
Περιγραφή |
align |
right
left
center
justify
char |
ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Ορίζει την οριζόντια στοίχιση του περιεχομένου μέσα στα κελιά της γραμμής |
bgcolor |
rgb(x,x,x)
#xxxxxx
colorname
Περισσότερα για τα χρώματα |
ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Ορίζει το χρώμα του φόντου των κελιών της γραμμής του πίνακα |
char |
χαρακτήρας |
ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Ορίζει έναν χαρακτήρα στον οποίο θα στοιχίζεται η γραμμή (Χρησιμοποιείται μόνο όταν align="char") |
charoff |
pixels
% |
ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Ορίζει την απόσταση εως τον τον πρώτο χαρακτήρα στοίχισης σε μια γραμμή (Χρησιμοποιείται μόνο όταν align="char") |
valign |
top
middle
bottom
baseline |
ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Ορίζει την κάθετη στοίχιση του περιεχομένου των κελιών της γραμμής του πίνακα |
Κοινές (standard) ιδιότητες που μπορεί να πάρει η ετικέτα:
HTML Γεγονότα που μπορεί να πάρει η ετικέτα: