Πίνακες HTML Παναγιώτης Γαλάτης 1ο ΕΠΑΛ Ηρακλείου
Τι είναι Πίνακας Ένας πίνακας στοιχείων αποτελείται από γραμμές και στήλες. Το σημείο τομής μιας γραμμής και μιας στήλης ονομάζεται κελί (cell( cell). Μέσα στα κελιά τοποθετούνται τα στοιχεία του πίνακα, τα οποία μπορούν να είναι: Δεδομένα Τίτλοι Άλλες κατηγορίες ετικετών, όπως κατάλογοι, εικόνες, φόρμες, υποπίνακες.
Ετικέτες Πίνακα Οι ετικέτες που χρησιμοποιούνται για την υλοποίηση των πινάκων είναι οι: TABLE (πίνακας)( TR (γραμμή) TD (κελί) CAPTION (τίτλος( πίνακα προαιρετικός) TH (κελί με έντονα γράμματα)
Δήλωση Πίνακα 1. Δηλώνουμε τον Πίνακα με την ετικέτα <TABLE> 2. Δηλώνουμε την πρώτη γραμμή με την ετικέτα 3. Δηλώνουμε το πρώτο κελί με την ετικέτα <TD> < </TD> 4. Επαναλαμβάνουμε το βήμα 3 για όλα τα κελιά της γραμμής 5. Κλείνουμε τη γραμμή 6. Επαναλαμβάνουμε τα βήματα 2-5 για τις υπόλοιπες γραμμές του πίνακα 7. Κλείνουμε τον Πίνακα </TABLE>
<HTML> <HEAD> <TITLE> Πίνακας πωλήσεων </TITLE> </HEAD> <BODY> Παράδειγμα 1ο <TABLE BORDER=1> <CAPTION> Πωλήσεις (1999-2000) </CAPTION> <!-- Πρώτη Γραμμή--> <TH> Έτος </TH> <TH> Προϊόν Α </TH> <TH> Προϊόν Β </TH> <TH> Σύνολο </TH> <!-- Δεύτερη Γραμμή--> <TH> 1999 </TH> <TD> 2000 </TD> <TD> 1500 </TD> <TD> 3500 </TD> <!-- Τρίτη Γραμμή--> <TH> 2000 </TH> <TD> 2100 </TD> <TD> 1550 </TD> <TD> 3650 </TD> </TABLE> </BODY> </HTML>
Παράμετροι ετικέτας TABLE Παράμετρος ALIGN BGCOLOR="χρώμα" Λειτουργία Καθορίζει την οριζόντια τοποθέτηση του πίνακα. Τιμές: LEFT,, που στοιχίζει τον πίνακα στα αριστερά (εξ ορισμού στοίχιση). Το κείμενο είναι στα δεξιά. RIGHT,, που στοιχίζει τον πίνακα στα δεξιά. Το κείμενο είναι στα αριστερά. CENTER,, που στοιχίζει τον πίνακα στο κέντρο. Το κείμενο είναι από κάτω. Θέτει το χρώμα του φόντου του πίνακα. BORDER="τιμή" Καθορίζει το πάχος του πλαισίου του πίνακα (σε σημεία) και παίρνει ακέραια τιμή. Η τιμή 0 σημαίνει ότι ο πίνακας δεν έχει πλαίσιο. CELLPADDING="τιμή" Αποφασίζει το χώρο (σε σημεία) ανάμεσα στο πλαίσιο και τα περιεχόμενα του κελιού. Εξ ορισμού τιμή 1. CELLSPACING="τιμή" Αποφασίζει το χώρο (σε σημεία) ανάμεσα στα κελιά στον πίνακα. Εξ ορισμού τιμή 2. HEIGHT="ύψος" WIDTH="πλάτος" COLS="αριθμός στηλών" Καθορίζει το ύψος του πίνακα. Το εξ ορισμού ύψος είναι το βέλτιστο ύψος που καθορίζεται από τα περιεχόμενα των κελιών. Η τιμή του ύψους μπορεί να είναι: Αριθμός σημείων (ακέραιος αριθμός) Ποσοστό του ύψους όλης της σελίδας (π.χ. 20%) Καθορίζει το πλάτος του πίνακα. Το εξ ορισμού πλάτος είναι το βέλτιστο πλάτος που καθορίζεται από τα περιεχόμενα των κελιών. Η τιμή του πλάτους μπορεί να είναι: Αριθμός σημείων (ακέραιος αριθμός) Ποσοστό του πλάτους όλης της σελίδας (π.χ. 20%) Δείχνει πόσες στήλες ίδιου πλάτους χωράνε στο παράθυρο ή στο δηλωμένο πλάτος του πίνακα. Για παράδειγμα, αν το πλάτος είναι «80%» και οι στήλες 4, κάθε στήλη πιάνει 20% του πλάτους του παραθύρου.
Παράμετροι TR Όνομα Λειτουργία ALIGN Καθορίζει την οριζόντια τοποθέτηση του περιεχομένου. Παίρνει τις τιμές: CENTER,, κεντρικοποιεί. LEFT,, στοιχίζει το περιεχόμενο στα αριστερά (εξ ορισμού). RIGHT,, στοιχίζει το περιεχόμενο στα δεξιά. VALIGN Καθορίζει την κατακόρυφη τοποθέτηση των περιεχομένων μέσα στα κελιά. Παίρνει τις τιμές: BASELINE,, στοιχίζει τα περιεχόμενα με τη βάση του κελιού. BOTTOM,, στοιχίζει τα περιεχόμενα στο κάτω μέρος του κελιού. MIDDLE,, κεντρικοποιεί τα περιεχόμενα στο κελί (εξ ορισμού). TOP,, στοιχίζει τα περιεχόμενα στην κορυφή του κελιού. BGCOLOR="χρώμα" Θέτει το εξ ορισμού χρώμα στο φόντο της γραμμής του πίνακα.
Παράμετροι TD ALIGN VALIGN Όνομα BGCOLOR="χρώμα" COLSPAN="τιμή" ROWSPAN="τιμή" HEIGHT="ύψος" Λειτουργία Καθορίζει την οριζόντια στοίχιση των περιεχομένων του κελιού. Ειδικότερα: CENTER,, κεντρικοποιεί τα περιεχόμενα στο κελί. LEFT,, στοιχίζει τα περιεχόμενα στα αριστερά του κελιού (εξ ορισμού). RIGHT,, στοιχίζει τα περιεχόμενα στα δεξιά του κελιού. Καθορίζει την κατακόρυφη στοίχιση των περιεχομένων του κελιού. Ειδικότερα: BASELINE, στοιχίζει τα περιεχόμενα στη βάση του κελιού. BOTTOM,, στοιχίζει τα περιεχόμενα στο κάτω μέρος του κελιού. MIDDLE,, κεντρικοποιεί τα περιεχόμενα στο κελί (εξ ορισμού). TOP,, στοιχίζει τα περιεχόμενα στην κορυφή του κελιού. Θέτει το χρώμα του φόντου του κάθε κελιού. Δείχνει τον αριθμό των στηλών που δεσμεύει κάθε κελί (ακέραιος αριθμός). Δείχνει τον αριθμό των γραμμών που δεσμεύει κάθε κελί (ακέραιος αριθμός). Καθορίζει το προτινόμενο ύψος του κελιού σε σημεία.
Παράδειγμα με συγχώνευση <HTML> <HEAD> <TITLE> > Πίνακας πωλήσεων ΙΙ </TITLE TITLE> </HEAD> <BODY> <TABLE BORDER=10> <CAPTION ALIGN=BOTTOM> Πωλήσεις (1999-2000) </CAPTION> <TH ROWSPAN=2> </TH> <TH COLSPAN=2>Πωλήσεις <BR> Προϊόντων </TH> <TH> Προϊόν Α </TH> <TH> Προϊόν Β </TH> <TH> Σύνολο </TH> <TH> 1999 </TH> <TD ALIGN=LEFT> 2000 <TD ALIGN=CENTER> 1500 <TD ALIGN=RIGHT> 3500 <TH> 2000 </TH> <TD ALIGN=LEFT> 2100 </TD> <TD ALIGN=CENTER> 1550 </TD> <TD ALIGN=RIGHT> 3650 </TD> </TABLE> </BODY> </HTML HTML>