|
<TABLE>...</TABLE> (ΠΙΝΑΚΕΣ)
Η οδηγία <TABLE> χρησιμοποιείται για να δημιουργούμαι πίνακες αλλά και για να έχουμε μεγαλύτερη έλεγχο στο στήσιμο μιας σελίδας.
Ορολογία
Caption Το θέμα του πίνακα
Table headings Επικεφαλίδες στηλών ή γραμμών (τα περιεχόμενά τους παρουσιάζονται με bold γράμματα)
Table data Τα δεδομένα των κελιών του πίνακα
Table cells Τα κελιά του πίνακα
Παράμετρος BORDER
Καθορίζει αν ο πίνακας θα έχει περιθώρια ή όχι (συνήθως πίνακες χωρίς περιθώρια δημιουργούμε όταν θέλουμε να δημιουργήσουμε ένα συγκεκριμένο στήσιμο σελίδας).
<TR> <TH> <TD> ΓΡΑΜΜΕΣ ΠΙΝΑΚΑ - ΚΕΛΙΑ - ΔΕΔΟΜΕΝΑ ΚΕΛΙΩΝ
ΠΡΟΣΟΧΗ: Οι πρώτοι browsers απαιτούσαν υποχρεωτικά να υπάρχει εντολή τέλους σε κάθε μια από τις παραπάνω οδηγίες (</TR> </TH> </TD>). Σήμερα για τους πιο πολλούς αυτό δεν χρειάζεται πλέον. Ωστόσο, για λόγους συμβατότητας συνιστάται να τις χρησιμοποιούμε και γι' αυτό θα υπάρχουν και στα παρακάτω παραδείγματα.
Στην σχεδίαση ενός πίνακα, ορίζουμε την κάθε γραμμή ξεχωριστά (μπορούμε να έχουμε όσες γραμμές θέλουμε) και μέσα σε κάθε γραμμή ορίζουμε τα κελιά της. Οι στήλες ορίζονται αυτόματα με βάση το πόσα κελιά υπάρχουν σε κάθε γραμμή.
Ένα απλό παράδειγμα πίνακα χωρίς ορατά περιθώρια που περιλαμβάνει μια σειρά, και τέσσερα κελιά (το ένα από τα οποία είναι η επικεφαλίδα):
| ΕΠΙΚΕΦΑΛΙΔΑ | ΔΕΔΟΜΕΝΑ | ΔΕΔΟΜΕΝΑ | ΔΕΔΟΜΕΝΑ |
|---|
<TABLE>
<TR><TH>ΕΠΙΚΕΦΑΛΙΔΑ</TH><TD>ΔΕΔΟΜΕΝΑ</TD>
<TD>ΔΕΔΟΜΕΝΑ</TD><TD>ΔΕΔΟΜΕΝΑ</TD></TR>
</TABLE>
Ο ίδιος πίνακας με ορατά περιθώρια (προστίθεται η παράμετρος BORDER) είναι:
| ΕΠΙΚΕΦΑΛΙΔΑ | ΔΕΔΟΜΕΝΑ | ΔΕΔΟΜΕΝΑ | ΔΕΔΟΜΕΝΑ |
|---|
<TABLE BORDER>
<TR><TH>ΕΠΙΚΕΦΑΛΙΔΑ</TH><TD>ΔΕΔΟΜΕΝΑ</TD>
<TD>ΔΕΔΟΜΕΝΑ</TD><TD>ΔΕΔΟΜΕΝΑ</TD></TR>
</TABLE>
Ένας πιο περίπλοκος πίνακας είναι ο ακόλουθος:
| Επικεφαλίδα 1 | Επικεφαλίδα 2 |
|---|
| κελί 1 | κελί 2 |
<TABLE BORDER>
<TR><TH>Επικεφαλίδα 1</TH>
<TH>Επικεφαλίδα 2</TH></TR>
<TR><TD>κελί 1</TD><TD>κελί 2</TD></TR>
</TABLE>
Ο ίδιος πίνακας με τις επικεφαλίδες στο αριστερό μέρος έχει ως εξής:
| Επικεφαλίδα 1 | κελί 1 |
|---|
| Επικεφαλίδα 2 | κελί 2 |
|---|
<TABLE BORDER>
<TR><TH>Επικεφαλίδα 1</TH><TD>κελί 1</TD></TR>
<TR><TH>Επικεφαλίδα 2</TH><TD>κελί 2</TD></TR>
</TABLE>
’λλες HTML οδηγίες (γραφικά, λίστες, παραπομπές κτλ.) μπορούν να συμπεριληφθούν μέσα στα κελιά ενός πίνακα. Για παράδειγμα στα παραπάνω υποδείγματα είδαμε πως το κελί εκτείνεται για να πάρει το μέγεθος του περιεχομένου του. Εμείς όμως αυτό μπορούμε να το αλλάξουμε. Π.χ.
| Επικεφαλίδα 1 | Επικεφαλίδα 2 | κενό κελί |
|---|
κελί 1
με δύο γραμμές | κελί 2 | |
<TABLE BORDER>
<TR><TH>Επικεφαλίδα 1</TH>
<TH>Επικεφαλίδα 2</TH><TH>κενό κελί</TH></TR>
<TR><TD>κελί 1 <BR>με δύο γραμμές</TD><TD>κελί 2
</TD><TD></TD></TR>
</TABLE>
Βλέπουμε πως υποχρεώσαμε το κείμενο ενός κελιού να αλλάξει γραμμή. Επίσης, έχουμε και ένα κενό κελί. Για την ακρίβεια έχουμε ένα ανύπαρκτο κελί. Για να γίνει κενό θα πρέπει να του προσθέσουμε μια αλλαγή γραμμής (αντί για <TD></TD> να γίνει <TD><BR></TD>
Το ανύπαρκτο κελί είναι πολύ χρήσιμο σε πίνακες με επικεφαλίδες τόσο στις στήλες όσο και στις γραμμές. Στο παράδειγμά μας έχουμε:
Επικεφαλίδα
Στήλης 1 | Επικεφαλίδα
Στήλης 2 |
|---|
Επικεφαλίδα
Γραμμής 1 | κελί 1 | κελί 2 |
|---|
Επικεφαλίδα
Γραμμής 2 | κελί 1 | κελί 2 |
|---|
<TABLE BORDER>
<TR><TH>Επικεφαλίδα <BR>Στήλης 1</TH><TH>Επικεφαλίδα <BR>Στήλης 2</TH></TR>
<TR><TH>Επικεφαλίδα <BR>Γραμμής 1</TH><TD>κελί 1</TD><TD>κελί 2</TD></TR>
<TR><TH>Επικεφαλίδα <BR>Γραμμής 2</TH><TD>κελί 1</TD><TD>κελί 2</TD></TR>
</TABLE>
Βλέπουμε πως ο browser δεν μπορεί να καταλάβει ότι οι επικεφαλίδες των στηλών πρέπει να είναι μόνο πάνω από κελιά δεδομένων. Έτσι πρέπει να προσθέσουμε ένα ανύπαρκτο κελί. Τότε ο πίνακάς μας θα γίνει:
| Επικεφαλίδα
Στήλης 1 | Επικεφαλίδα
Στήλης 2 |
|---|
Επικεφαλίδα
Γραμμής 1 | κελί 1 | κελί 2 |
|---|
Επικεφαλίδα
Γραμμής 2 | κελί 1 | κελί 2 |
|---|
<TABLE BORDER>
<TR><TD></TD><TH>Επικεφαλίδα <BR>Στήλης 1</TH><TH>Επικεφαλίδα <BR>Στήλης 2</TH></TR>
<TR><TH>Επικεφαλίδα <BR>Γραμμής 1</TH><TD>κελί 1</TD><TD>κελί 2</TD></TR>
<TR><TH>Επικεφαλίδα <BR>Γραμμής 2</TH><TD>κελί 1</TD><TD>κελί 2</TD></TR>
</TABLE>
<CAPTION>...</CAPTION> ΤΟ ΘΕΜΑ (ΤΙΤΛΟΣ) ΤΟΥ ΠΙΝΑΚΑ
Καθορίζει τον τίτλο του πίνακα. Θα μπορούσε φυσικά να χρησιμοποιηθεί και κάποια άλλη οδηγία (π.χ. παραγράφου <p> ή κεφαλίδας <h>) αλλά το <CAPTION> είναι προτιμότερο για λόγους ομοιομορφίας. Το μειονέκτημά του είναι πως δεν μπορεί να γίνει σωστή ρύθμιση (με την παράμετρο ALIGN) της θέσης του (η παράμετρος έχει διαφορετική χρήση στο Netscape από ότι στον Internet Explorer).
Παράδειγμα:
Ο ΤΙΤΛΟΣ ΤΟΥ ΠΙΝΑΚΑ
| Επικεφαλίδα 1 | Επικεφαλίδα 2 | κενό κελί |
|---|
κελί 1
με δύο γραμμές | κελί 2 |
|
<TABLE BORDER> <CAPTION>Ο <B>ΤΙΤΛΟΣ</B> ΤΟΥ ΠΙΝΑΚΑ</CAPTION>
<TR><TH>Επικεφαλίδα 1</TH><TH>Επικεφαλίδα 2</TH>
<TH>κενό κελί</TH></TR>
<TR><TD>κελί 1 <BR>με δύο γραμμές</TD>
<TD>κελί 2</TD><TD><BR></TD></TR>
</TABLE>
Βλέπουμε πως και μέσα στην <CAPTION> μπορούμε να συμπεριλάβουμε άλλες HTML οδηγίες.
Η ΘΕΣΗ ΕΝΟΣ ΠΙΝΑΚΑ ΜΕΣΑ ΣΕ ΜΙΑ ΣΕΛΙΔΑ
Όσον αφορά την θέση που θα πάρει μέσα στην σελίδα, ο πίνακας αντιμετωπίζεται από τον browser σαν μια εικόνα (τοποθετείται στο αριστερό μέρος της σελίδας με κείμενο μόνο από πάνω ή από κάτω του). Έτσι μπορούμε με τις παραμέτρους ALIGN και CLEAR να τον τοποθετήσουμε αριστερά ή δεξιά στην σελίδα και να βάλουμε ροή κειμένου στο πλάι του.
ΠΡΟΣΟΧΗ: Στην περίπτωση αυτή, δεν υπάρχει παράμετρος ALIGN=CENTER. Αν θέλουμε να βάλουμε έναν πίνακα στο μέσον μιας σελίδας, θα πρέπει να χρησιμοποιήσουμε την οδηγία <CENTER>. Π.χ. <CENTER><TABLE>.....</TABLE></CENTER>
Η ΘΕΣΗ ΤΩΝ ΠΕΡΙΕΧΟΜΕΝΩΝ ΤΩΝ ΚΕΛΙΩΝ ΕΝΟΣ ΠΙΝΑΚΑ
Μπορούμε να έχουμε τα περιεχόμενα των κελιών στοιχημένα (με την γνωστή παράμετρο ALIGN)στις ακόλουθες θέσεις:
ΟΡΙΖΟΝΤΙΑ:
ALIGN=LEFT (αριστερά) ALIGN=RIGHT (δεξιά) ALIGN=CENTER (κέντρο, το default)
ΚΑΘΕΤΑ
VALIGN=TOP (πάνω) VALIGN=MIDDLE (μέση, το default) VALIGN=BOTTOM (κάτω)
Οι παράμετροι αυτοί ορίζονται ξεχωριστά για κάθε σειρά και ισχύουν για όλη την σειρά. Π.χ.<TR ALIGN=CENTER VALIGN=TOP>
Έχουμε όμως την δυνατότητα να ορίζουμε τις παραμέτρους αυτές και κατά κελί (δηλαδή να διαφέρουν από κελί σε κελί). Π.χ. <TD ALIGN=RIGHT>...</TD>
Μπορούμε να δούμε όλες αυτές τις δυνατότητες στο παρακάτω παράδειγμα:
ΟΡΙΖΟΝΤΙΕΣ ΘΕΣΕΙΣ ΤΩΝ ΚΕΛΙΩΝ
| ΟΡΙΖΟΝΤΙΑ ΣΤΟΙΧΙΣΗ | |
|---|
| ΠΡΩΤΗ ΣΤΗΛΗ | ΔΕΥΤΕΡΗ ΣΤΗΛΗ | ΤΡΙΤΗ ΣΤΗΛΗ |
| ΑΡΙΣΤΕΡΑ | ΚΕΝΤΡΟ | ΔΕΞΙΑ |
<TABLE BORDER><CAPTION>ΟΡΙΖΟΝΤΙΕΣ ΘΕΣΕΙΣ ΤΩΝ ΚΕΛΙΩΝ</CAPTION>
<TR><TD></TD>
<TH ALIGN=CENTER>ΟΡΙΖΟΝΤΙΑ ΣΤΟΙΧΙΣΗ</TH><TD>
</TD></TR>
<TR ALIGN=CENTER><TD>ΠΡΩΤΗ ΣΤΗΛΗ</TD>
<TD>ΔΕΥΤΕΡΗ ΣΤΗΛΗ</TD>
<TD>ΤΡΙΤΗ ΣΤΗΛΗ</TD></TR>
<TR><TD ALIGN=LEFT>ΑΡΙΣΤΕΡΑ</TD>
<TD ALIGN=CENTER>ΚΕΝΤΡΟ</TD>
<TD ALIGN=RIGHT>ΔΕΞΙΑ</TD></TR>
</TABLE>
ΚΑΘΕΤΕΣ ΘΕΣΕΙΣ ΤΩΝ ΚΕΛΙΩΝ
ΠΑΡΑΔΕΙΓΜΑ
ΚΑΘΕΤΗΣ
ΣΤΟΙΧΙΣΗΣ |
ΠΑΝΩ | ΜΕΣΗ | ΚΑΤΩ |
|---|
<P><TABLE BORDER><CAPTION>ΚΑΘΕΤΕΣ ΘΕΣΕΙΣ ΤΩΝ ΚΕΛΙΩΝ</CAPTION>
<TR><TH ALIGN=CENTER>ΠΑΡΑΔΕΙΓΜΑ <BR>ΚΑΘΕΤΗΣ <BR>ΣΤΟΙΧΙΣΗΣ</TH>
<TD VALIGN=TOP>ΠΑΝΩ</TD>
<TD VALIGN=MIDDLE>ΜΕΣΗ</TD>
<TD VALIGN=BOTTOM>ΚΑΤΩ</TD></TR>
</TABLE>
ROWSPAN & COLSPAN
ΚΕΛΙΑ ΠΟΥ ΕΚΤΕΙΝΟΝΤΑΙ ΣΕ ΠΕΡΙΣΣΟΤΕΡΕΣ ΑΠΟ ΜΙΑ ΣΕΙΡΑ Η ΣΤΗΛΗ
Μπορούμε να ορίσουμε κελιά με μέγεθος μεγαλύτερο από μια σειρά ή μια στήλη.
Για να έχει το κελί μας μέγεθος μεγαλύτερο από μια στήλη χρησιμοποιούμε την παράμετρο COLSPAN π.χ. <TH COLSPAN=X>...</TH> όπου X= ο αριθμός των στηλών που θέλουμε να καλύψει το συγκεκριμένο κελί.
Αντίστοιχα χρησιμοποιείται και η ROWSPAN π.χ. <TH ROWSPAN=X>...</TH> όπου X= ο αριθμός των γραμμών που θέλουμε να καλύψει το συγκεκριμένο κελί.
Ο αριθμός των στηλών εκτείνεται πάντοτε προς τα δεξιά, και των γραμμών προς τα κάτω.
Παράδειγμα:
ΑΠΟΤΕΛΕΣΜΑΤΑ ΕΚΛΟΓΩΝ
| ΨΗΦΟΙ ΚΟΜΜΑΤΩΝ | ΑΚΥΡΑ-ΛΕΥΚΑ |
|---|
| ΚΟΜΜΑ A' | ΚΟΜΜΑ Β' | ΚΟΜΜΑ Γ' | |
|---|
| ΦΥΛΟ | ΑΝΔΡΕΣ |
125312 | 325987 | 96523 | 1856 |
|---|
| ΓΥΝΑΙΚΕΣ | 165874 |
319856 | 117823 | 148 |
|---|
<TABLE BORDER>
<CAPTION>ΑΠΟΤΕΛΕΣΜΑΤΑ ΕΚΛΟΓΩΝ</CAPTION>
<TR><TD COLSPAN=2 ROWSPAN=2></TD>
<TH COLSPAN=3>ΨΗΦΟΙ ΚΟΜΜΑΤΩΝ</TH>
<TH ROWSPAN=2>ΑΚΥΡΑ-ΛΕΥΚΑ</TH></TR>
<TR><TH>ΚΟΜΜΑ A'</TH><TH>ΚΟΜΜΑ Β'</TH><TH>ΚΟΜΜΑ Γ'</TH><TH></TH>
</TR>
<TR><TH ROWSPAN=2>ΦΥΛΟ</TH><TH>ΑΝΔΡΕΣ</TH>
<TD>125312</TD><TD>325987</TD><TD>96523
</TD><TD>1856</TD></TR>
<TR><TH>ΓΥΝΑΙΚΕΣ</TH><TD>165874</TD>
<TD>319856</TD><TD>117823</TD><TD>148
</TD></TR>
</TABLE>
ΜΕΓΕΘΟΣ ΠΙΝΑΚΑ
Αν ο πίνακας είναι μεγαλύτερος από την οθόνη, ο browser θα προσπαθήσει να μειώσει το πλάτος των στηλών έτσι ώστε όλο το πλάτος να μπορεί να φανεί σε μια οθόνη. Μπορούμε να ρυθμίσουμε το πλάτος με την <BR> (που περιορίζει το πλάτος μιας στήλης για να μείνει ελεύθερος χώρος για μια άλλη) και την <NOBR> (που υποχρεώνει μια ακολουθία χαρακτήρων να μείνει στην ίδια σειρά). Πρέπει όμως πάντοτε να λαμβάνουμε υπ' όψιν μας ότι το μέγεθος της οθόνης και κυρίως του παραθύρου που έχει στην διάθεσή του ο browser, αλλάζουν από χρήστη σε χρήστη ή και ανάλογα με την περίσταση. Έτσι, μπορεί κάτι που φαίνεται όμορφο σε μερικές περιπτώσεις, να είναι πολύ άσχημο ή και αστείο σε άλλες.
Το μέγεθος του πίνακα μπορεί να οριστεί και με την παράμετρο WIDTH (<TABLE BORDER WIDTH=X>) όπου X = το πλάτος του πίνακα. Το πλάτος μπορεί να οριστεί σαν ποσοστό του παραθύρου (π.χ. 75%) ή σαν απόλυτος αριθμός (αριθμός pixels π.χ. 500). Προτιμότερο είναι να χρησιμοποιούνται σχετικές ρυθμίσεις για τα πλάτη (ποσοστά) διότι δεν μπορούμε να γνωρίζουμε το μέγεθος του παραθύρου του browser την στιγμή που διαβάζονται οι σελίδες μας.
ΠΡΟΣΟΧΗ! Υπάρχουν περιπτώσεις που ο browser δεν μπορεί να εκτελέσει την παράμετρο WIDTH όπως την επιθυμούμε. Αν τύχει κάτι τέτοιο, τότε θα προσπαθήσει να ορίσει τον πίνακα όσο πιο κοντά στα ζητούμενα από εμάς μπορεί.
ΜΕΓΕΘΟΣ ΕΞΩΤΕΡΙΚΟΥ ΠΕΡΙΘΩΡΙΟΥ (BORDER)
Αν η παράμετρος BORDER (που τοποθετείται μέσα στην οδηγία TABLE>), ακολουθείται από κάποιον αριθμό (π.χ. BORDER=5) τότε αυτός ο αριθμός ερμηνεύεται σαν το πλάτος σε pixels των εξωτερικών περιθωρίων του πίνακα (default BORDER=1, αν BORDER=0 τότε δεν υπάρχει περιθώριο).
Π.χ.
<TABLE BORDER=5>
<TR><TH>AAA</TH><TH>BBB</TH></TR>
<TR><TD>111</TD><TD>222</TD></TR>
</TABLE>
ΜΕΓΕΘΟΣ ΕΞΩΤΕΡΙΚΟΥ ΠΕΡΙΘΩΡΙΟΥ ΚΕΛΙΩΝ (CELLSPACING)
Η παράμετρος αυτή (που τοποθετείται μέσα στην οδηγία <TABLE>), καθορίζει την απόσταση (σε pixels) μεταξύ των κελιών (άρα και το μεταξύ τους περιθώριο). Η default τιμή είναι 2.
Π.χ.
<TABLE BORDER=5 CELLSPACING=4>
<TR><TH>AAA</TH><TH>BBB</TH></TR>
<TR><TD>111</TD><TD>222</TD></TR>
</TABLE>
ΠΡΟΣΟΧΗ! Το εξωτερικό περιθώριο των κελιών περιβάλλει και τα εξωτερικά κελιά. Αυτό έχει σαν αποτέλεσμα ο πίνακας να έχει δύο περιθώρια. Στις default τιμές αυτό δεν είναι πολύ εμφανές. Αν όμως τις αλλάξουμε, τότε γίνεται πιο εύκολα ορατή η διαφορά που πολλές φορές χρησιμοποιείται για να κάνουμε και ειδικά εφέ.
ΜΕΓΕΘΟΣ ΕΣΩΤΕΡΙΚΟΥ ΠΕΡΙΘΩΡΙΟΥ ΚΕΛΙΩΝ (CELLPADDING)
Η παράμετρος αυτή (που τοποθετείται μέσα στην οδηγία <TABLE>), καθορίζει την απόσταση (σε pixels) μεταξύ του εξωτερικού περιθωρίου των κελιών και του περιεχομένου τους. Η default τιμή είναι 1. Μπορεί να πάρει και την τιμή 0 αλλά καλό είναι να αποφεύγεται για λόγους αισθητικής.
Π.χ.
<TABLE BORDER=5 CELLSPACING=4 CELLPADDING=6>
<TR><TH>AAA</TH><TH>BBB</TH></TR>
<TR><TD>111</TD><TD>222</TD></TR>
</TABLE>
ΣΥΜΒΟΥΛΗ
Οι πίνακες αποτελούν μια σχετικά νέα προσθήκη στο πρότυπο HTML με αποτέλεσμα, πολλοί παλιοί browsers που ακόμη χρησιμοποιούνται από πολλούς χρήστες (π.χ. Netscape 1) να μην μπορούν να τους δουν. Στην περίπτωση αυτή τα περιεχόμενα είναι τόσο ανακατωμένα που δεν μπορούν να γίνουν κατανοητά. Μια εύκολη λύση στο πρόβλημα αυτό, είναι να τοποθετούμε στο τέλος του τελευταίου κελιού κάθε γραμμής την οδηγία <BR> ή <P>. Αυτή αγνοείται μέσα στον πίνακα, αλλά αν η σελίδα φορτωθεί από browser που δεν βλέπει πίνακες, τα δεδομένα θα είναι ορατά σε μια αναγνώσιμη (αν και όχι πολύ ευπαρουσίαστη) μορφή.
Επιστροφή στην Κορυφή Επιστροφή στα Περιεχόμενα
|
Any Modem