Οι πίνακες είναι σχετικά περίπλοκες δομές που αποτελούνται από γραμμές και στήλες. Το εξωτερικό κορμό των πινάκων αποτελεί πάντα το στοιχείο table.
<table> … </table>
Εντός αυτού του στοιχείου γίνεται η πραγματική οριστικοποίηση του πίνακα. Κατά την υλοποίησή του σε HTML, σας προτείνεται να εφοδιάσετε τον πίνακα με πλαίσιο. Έτσι μπορείτε να καταλάβετε καλύτερα πώς ακριβώς κινούνται οι γραμμές και οι στήλες. Για να το κάνετε αυτό, αναθέτετε στην αρχική εμφάνιση του <table> τον συνδυασμό τιμής γνωρίσματος border="1". (Ξεκαθαρίζουμε ότι το γνώρισμα border δεν θα πρέπει να χρησιμοποιείται στο HTML. Σε αυτή την περίπτωση πρέπει να έχουμε πρόσβαση στις αντίστοιχες ιδιότητες CSS. Αλλά για αυτά θα μιλήσουμε αργότερα).
<table border="1"> … </table>
Συνεχίζουμε με τον ορισμό των γραμμών του πίνακα. Αυτό γίνεται με το στοιχείο tr.
<table border="1"> <tr></tr> </table>
Αλλά αυτό δεν οδηγεί ακόμη στην επιθυμητή έξοδο. Το επόμενο βήμα είναι να ορίσουμε τις στήλες. Αυτό γίνεται ξανά μέσω του στοιχείου td.
<table border="1">
<tr>
<td></td>
</tr>
</table>Τώρα μπορείτε να ορίσετε το πρώτο περιεχόμενο του πίνακα. Αυτό γίνεται μεταξύ των <td> και </td>.
<table border="1">
<tr>
<td>Περιεχόμενο 1</td>
</tr>
</table>
Μόνο τώρα αξίζει να ρίξετε μια ματιά στα αποτελέσματα στον περιηγητή.
Η καθιέρωση διαφόρων λογικών περιοχών στους πίνακες είναι εφικτή. Πρόκειται για μια περιοχή κεφαλής, μία ή περισσότερες περιοχές δεδομένων και μία περιοχή τελείας. Το ακόλουθο παράδειγμα δείχνει πώς μπορεί να φαίνεται κάτι τέτοιο:
<table border="1">
<thead>
<tr>
<th>Αναχώρηση</th>
<th>Άφιξη</th>
<th>Πλατφόρμα</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Βερολίνο</td>
<td>Στράλσουντ</td>
<td>5</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Βερολίνο</td>
<td>Αμβούργο</td>
<td>1</td>
</tr>
<tr>
<td>Μόναχο</td>
<td>Βερολίνο</td>
<td>3</td>
</tr>
</tbody>
</table>Και εδώ μια ματιά στα αποτελέσματα στον περιηγητή.
Η πραγματοποίηση της διάκρισης σε αυτές τις περιοχές δε φαίνεται να έχει κάποιο οπτικό αποτέλεσμα. Φυσικά, θέτεται ένα ερώτημα: Γιατί λοιπόν πρέπει να κάνουμε τον κόπο να ορίσουμε αυτές τις περιοχές; Υπάρχουν δύο καλοί λόγοι:
• Με τη βοήθεια του CSS μπορούν να μορφοποιηθούν οι περιοχές διαφορετικά, όπως επιθυμείτε.
• Οι περιοχές του πίνακα, όπως η κεφαλή και ο πάτος του πίνακα, μπορούν να επαναλαμβάνονται σε κάθε σελίδα κατά την εκτύπωση μεγάλων πινάκων από τους περιηγητές.
Η κεφαλή του πίνακα ξεκινά με το thead. Συνεχίζονται οι σειρές του πίνακα που ανήκουν στην κεφαλή. Μην ξεχνάτε να κλείσετε την κεφαλή με </thead>.
Αν θέλετε ο πίνακας να έχει και πάτο, πρέπει αυτός να ορισθεί αναγκαστικά πριν το σώμα του πίνακα. Ο πάτος ξεκινά με το <tfoot>. Μπορείτε να συνεχίσετε με μία ή περισσότερες γραμμές που ανήκουν στον πάτο. Με </tfoot> κλείνετε τον πάτο.
Το πραγματικό σώμα του πίνακα ορίζεται μέσα στο στοιχείο tbody. Αυτό το tbody μπορεί να εμφανίζεται πολλές φορές. Το σώμα του πίνακα κλείνει μετά από κάθε </tbody>.
Γιατί θα πρέπει για παράδειγμα σε έναν πίνακα να χρησιμοποιήσετε πολλά στοιχεία tbody; Ένα καλό παράδειγμα θα μπορούσε να είναι ο πίνακας της Bundesliga. Σε έναν τέτοιον πίνακα υπάρχουν συνήθως πολλές περιοχές.
• Πρωταθλητής
• Συμμετέχοντες στο Champions League
• Προκριθέντες στο Champions League
• Συμμετέχοντες στο Europa League
• Το γκρι μέσον
• Θέση πλέι-οφ
• Υποβιβασμός
Μπορείτε να τοποθετήσετε κάθε μία από αυτές τις περιοχές σε διαφορετικό στοιχείο tbody και στη συνέχεια να τις μορφοποιήσετε διαφορετικά μέσω του CSS.
Προκαθορισμένες Στήλες
Πώς εμφανίζεται ο πίνακας στους περιηγητές εξαρχής εξαρτάται κυρίως από τον αριθμό των υπαρχόντων γραμμών και στηλών. Ωστόσο, η διαδικασία εμφάνισης ενός πίνακα για τον περιηγητή δεν είναι και τόσο απλή. Πράγματι, ένας περιηγητής πρέπει πάντα να διαβάσει ολόκληρο τον πίνακα πριν μπορέσει να τον εμφανίσει. Ειδικά σε πολύ μεγάλους πίνακες, αυτό μπορεί να πάρει κάποιο χρονικό διάστημα. Αυτό το πρόβλημα μπορεί να αντιμετωπιστεί αφού ενημερωθεί ο περιηγητής απευθείας για τον πραγματικό αριθμό των στηλών που περιέχει ο πίνακας.
<table>
<colgroup span="2"></colgroup>
<tr>
<th>ISBN</th>
<th>Τίτλος</th>
<th>Τιμή</th>
</tr>
<tr>
<td>23223423434</td>
<td>Μια σύντομη ιστορία του σχεδόν τα πάντα</td>
<td>29,95 Ευρώ</td>
</tr>
</table>
Μέσω της colgroup εισάγεται η προαποφασισμένη καθορισμός των στηλών. Να σημειωθεί ότι τα περισσότερα χαρακτηριστικά που ήταν διαθέσιμα σε προηγούμενες εκδόσεις HTML για το colgroup δεν επιτρέπονται πλέον στο HTML5. Επιτρέπεται τώρα μόνο το χαρακτηριστικό span. Ως τιμή, το span περιμένει τον αριθμό των στηλών που περιλαμβάνονται στον πίνακα.
Το στοιχείο colgroup βρίσκεται ακριβώς πίσω από το εναρκτήριο <table>. Οι ίδιες οι στήλες καθορίζονται με τα μεμονωμένα στοιχεία col.
Κατά τη χρήση της colgroup υπάρχουν βασικά δύο επιλογές:
• Με το χαρακτηριστικό span
• Χωρίς το χαρακτηριστικό span
Αν δεν χρησιμοποιήσετε το χαρακτηριστικό span, πρέπει εντός του στοιχείου colgroup για κάθε στήλη που η ομάδα στηλών θα καλύπτει, να καθορίζεται ξεχωριστό στοιχείο col. Να ληφθεί υπόψη ότι το col είναι αυτόνομο στοιχείο.
<table>
<colgroup>
<col />
<col />
</colgroup>
<tr>
<th>ISBN</th>
<th>Τίτλος</th>
<th>Τιμή</th>
</tr>
<tr>
<td>23223423434</td>
<td>Μια σύντομη ιστορία του σχεδόν τα πάντα</td>
<td>29,95 Ευρώ</td>
</tr>
</table>
Υπάρχει επίσης μια μικτή μορφή.
<table> <colgroup> <col> </colgroup> <colgroup span="2"></colgroup> …
Αυτό είναι πάντα χρήσιμο όταν μια στήλη πρέπει να προκαθοριστεί ξεχωριστά, ενώ οι υπόλοιπες θέλουμε να τις ομαδοποιήσουμε.
