Πίνακες

Οι πίνακες είναι μια δομή της HTML η οποία μας επιτρέπει να εμφανίσουμε κείμενα και γραφικά στοιχισμένα μέσα σε γραμμές και στήλες. Όταν μάθετε περισσότερα για τους πίνακες, θα καταλάβετε πόσο μεγάλη σημασία έχουν σε μια σελίδα.

Πίνακας 1Χ2

1,1

1,2

Πίνακας 2Χ3

1,1	1,2	1,3
2,1	2,2	2,3

Πίνακας 5Χ5

1,1	1,2	1,3	1,4	1,5
2,1	2,2	2,3	2,4	2,5
3,1	3,2	3,3	3,4	3,5
4,1	4,2	4,3	4,4	4,5
5,1	5,2	5,3	5,4	5,5

Με την ετικέτα <table> ορίζουμε έναν πίνακα. Το ζεύγος των ετικετών <tr>...</tr> ορίζει μια γραμμή του πίνακα, ενώ το ζεύγος των ετικετών <td>...</td> ορίζουν ένα κελί στην γραμμή του πίνακα. Η ιδιότητα border της ετικέτας <table> ορίζει το πάχος του περιγράμματος του πίνακα. Στο παραπάνω παράδειγμα δημιουργήσαμε πίνακα με δύο γραμμές που η κάθε μια από αυτές έχει δύο στήλες (2X2)

Με την ετικέτα <th> ορίζουμε μια επικεφαλίδα σε μια στήλη του πίνακα. Το κείμενο που βρίσκετε μέσα στις ετικέτες <th> και </th> εμφανίζεται με bold χαρακτήρες. Η ετικέτες <th>...</th> τοποθετούνται μέσα στις ετικέτες <tr>...</tr> όπως οι ετικέτες <td>...</td>

Με την ετικέτα <caption> τοποθετούμε τίτλο στον πίνακα μας. Ο τίτλος τοποθετείται επάνω από τον πίνακα με στοίχιση στο κέντρο.

Η ιδιότητα border της ετικέτας <table> ορίζει το πάχος του περιγράμματος του πίνακα.

Με την ιδιότητα width ορίζουμε το μήκος του πίνακα. Η ιδιότητα αυτή μπορεί να μπει επίσης στις ετικέτες <td> και <th>. Το παρακάτω παράδειγμα έχει το ίδιο αποτέλεσμα με το προηγούμενο όσο αφορά το σύνολο του μήκους του πίνακα. Στο επόμενο παράδειγμα ορίζουμε το μήκος για κάθε ένα κελί των γραμμών του πίνακα. Στο παραπάνω παράδειγμα τοποθετήσαμε την ιδιότητα width στην ετικέτα <td> αντί στην ετικέτα <table>. Το πρώτο κελί κάθε γραμμής του πίνακα έχει μήκος 150 pixels, ενώ το δεύτερο κελί κάθε γραμμής του πίνακα έχει μήκος 250 pixels, οπότε το συνολικό μήκος της κάθε γραμμής, άρα και του πίνακα, είναι 400 pixels. Η ιδιότητα width τοποθετείται μόνο στα κελιά (<td> ή <th>) της πρώτης γραμμής και εφαρμόζετε για όλα τα κελιά του πίνακα. Με αυτόν τον τρόπο όταν θέλουμε να αλλάξουμε το μήκος των κελιών ενός πίνακα, αλλάζουμε μόνο το μήκος των κελιών της πρώτης γραμμής του. Δεν είναι λάθος να τοποθετούμε την ιδιότητα width σε όλα τα κελιά (<td>) όλων των γραμμών του πίνακα. Φανταστείτε όμως έναν πίνακα με 100 γραμμές και κάθε μια από αυτές να έχει 8 κελιά. Αν ποτέ θελήσουμε να αλλάξουμε διαστάσεις στα κελιά του πίνακα αυτού θα χρειαζόταν να κάνουμε 100*8=800 αλλαγές τιμών! Ενώ αν τοποθετήσουμε την ιδιότητα width μόνο στα 8 κελιά της πρώτης γραμμής, τότε θα χρειαζόταν να κάνουμε μόνο 8 αλλαγές τιμών οι οποίες θα παρασύρουν όλα τα κελιά των επόμενων γραμμών του πίνακα.

Είναι προτιμότερο και συνηθέστερο να ορίζουμε το μήκος των κελιών (η ιδιότητα width στις ετικέτες <td> ή <th>) και όχι του συνολικού πίνακα (η ιδιότητα width στην ετικέτα <table>).

Με την ιδιότητα height ορίζουμε το ύψος των κελιών των γραμμών ενός πίνακα. Η ιδιότητα αυτή μπαίνει και στην ετικέτα <th>. Αν στον παραπάνω πίνακα θέλουμε να ορίσουμε ύψος 100 pixels στην πρώτη γραμμή του πίνακα, ύψος 200 pixels στην δεύτερη γραμμή του πίνακα και ύψος 150 pixels στην τρίτη γραμμή του πίνακα, τότε θα γράφαμε : Η ιδιότητα height τοποθετείτε μόνο στο πρώτο κελί μιας γραμμής του πίνακα και εφαρμόζετε για όλα τα κελιά της γραμμής αυτής, κάτι ανάλογο δηλαδή με την ιδιότητα width η οποία την τοποθετούμε μόνο στα κελιά της πρώτης γραμμής του πίνακα και αυτή εφαρμόζεται για όλα τα κελιά των επόμενων γραμμών του πίνακα.

Δοκίμασε το

Η ιδιότητα align της ετικέτας <table> ορίζει την στοίχιση του πίνακα μέσα στην σελίδα. Οι τιμές που μπορεί να πάρει η ιδιότητα align είναι: left, center και right

Με την ιδιότητα align των ετικετών <td> και <tr> καθορίζουμε την στοίχιση του κειμένου μέσα στα κελιά. Αν η ιδιότητα είναι στην ετικέτα <td> τότε η στοίχιση που καθορίσαμε θα ισχύει μόνο για το συγκεκριμένο κελί, ενώ αν είναι στην ετικέτα <tr> τότε η στοίχιση θα ισχύσει για όλα τα κελιά της γραμμής

Σε μερικούς browsers δεν εμφανίζονται σωστά οι πίνακες με κενά κελιά. Γι' αυτό τον λόγο καλό είναι να χρησιμοποιήτε τον κωδικό διαφυγής & nbsp;

Μπορούμε να βάλουμε χρώμα σε όλο τον πίνακα ή σε μια γραμμή του πίνακα ή σε ένα κελί του πίνακα, ανάλογα που θα τοποθετήσουμε την ιδιότητα bgcolor ( δηλαδή ή στην ετικέτα <table> ή στην <tr> ή στην <td> ).

Μάθετε περισσότερα για τα Χρώματα

Με την ιδιότητα background των ετικετών <table>, <tr> και <td> ορίζουμε μια εικόνα για φόντο σε ολόκληρο τον πίνακα ή σε μια γραμμή ή σε ένα κελί, ανάλογα σε ποια από τις τρεις ετικέτες θα το τοποθετήσουμε

Με την ιδιότητα cellspacing της ετικέτας <table> ορίζουμε το πάχος των σκιασμένων γραμμών που διαχωρίζουν τα κελιά, ενώ με την ιδιότητα cellpadding της ετικέτας ορίζουμε τον κενό χώρο μεταξύ του πλαισίου των κελιών και του περιεχομένου αυτών

Με την μπλε γραμμή παρουσιάζεται το κενό που ορίζει η ιδιότητα cellspacing, ενώ με την κόκκινη γραμμή παρουσιάζεται το κενό που ορίζει η ιδιότητα cellpadding



Δοκίμασε το

- Οριζόντια συγχώνευση κελιών

- Κάθετη συγχώνευση κελιών

Οριζόντια συγχώνευση κελιών : Όταν θέλουμε ένα κελί να επεκτείνεται σε πολλές κολόνες, χρησιμοποιούμε την ιδιότητα colspan η οποία ορίζει τον αριθμό των κολόνων που επεκτείνεται. Η ιδιότητα αυτή χρησιμοποιείται και στην ετικέτα <th> Κάθετη συγχώνευση κελιών : Πολλές φορές θέλουμε ορισμένα κελιά στον πίνακα να επεκτείνονται σε πολλές γραμμές. Αυτό γίνετε με την ιδιότητα rowspan της ετικέτας <td>. Η ιδιότητα rowspan ορίζει τον αριθμό των γραμμών που θα επεκτείνεται το κελί. Η ιδιότητα αυτή χρησιμοποιείται και στην ετικέτα <th>