Πώς δημιουργούμε απλούς πίνακες

Μερικοί όροι που πρέπει να γνωρίζετε πριν ασχοληθείτε με τους πίνακες είναι οι:

Caption: Το θέμα του πίνακα
Table headings: Επικεφαλίδες στηλών ή γραμμών (τα περιεχόμενά τους παρουσιάζονται με bold γράμματα)
Table data: Τα δεδομένα των κελιών του πίνακα
Border: Το περιθώριο του πίνακα και των κελιών του

Για να κατασκευάσουμε ένα πίνακα, ορίζουμε την κάθε γραμμή ξεχωριστά (μπορούμε να έχουμε όσες γραμμές θέλουμε) και μέσα σε κάθε γραμμή ορίζουμε τα κελιά της. Οι στήλες ορίζονται αυτόματα με βάση το πόσα κελιά υπάρχουν σε κάθε γραμμή.

Ένα απλό παράδειγμα πίνακα χωρίς ορατά περιθώρια που περιλαμβάνει μια σειρά, και τέσσερα κελιά (το ένα από τα οποία είναι η επικεφαλίδα) είναι το παρακάτω:

ΕΠΙΚΕΦΑΛΙΔΑ	ΔΕΔΟΜΕΝΑ	ΔΕΔΟΜΕΝΑ	ΔΕΔΟΜΕΝΑ

Ο κώδικας που μας έδωσε το παραπάνω αποτέλεσμα είναι:

<TABLE>
<TR><TH>ΕΠΙΚΕΦΑΛΙΔΑ</TH><TD>ΔΕΔΟΜΕΝΑ</TD> <TD>ΔΕΔΟΜΕΝΑ</TD><TD>ΔΕΔΟΜΕΝΑ</TD></TR> </TABLE>

Τα βήματα που κάναμε για να δημιουργήσουμε τον πίνακα ήταν:

1. Καθορίσαμε το σχήμα του πίνακα (αποφασίσαμε δηλαδή πως θα έχει μια γραμμή με 4 κελιά).
2. Ορίσαμε τον πίνακα <TABLE>...</TABLE>
3. Ορίσαμε την γραμμή <TR>...</TR>
4. Ορίσαμε (ένα ένα) τα κελιά της γραμμής <TH>...</TH> (για κελί επικεφαλίδας) και <TD>...</TD> (για κελί δεδομένων)

Προσοχή: Οι πρώτοι browsers απαιτούσαν υποχρεωτικά να υπάρχει εντολή τέλους σε κάθε μια από τις παραπάνω οδηγίες (</TR> </TH> </TD>). Σήμερα για τους πιο πολλούς αυτό δεν χρειάζεται πλέον. Ωστόσο, για λόγους συμβατότητας συνιστάται να τις χρησιμοποιούμε και γι' αυτό θα υπάρχουν και στα παρακάτω παραδείγματα.

Παράμετρος BORDER

ΕΠΙΚΕΦΑΛΙΔΑ	ΔΕΔΟΜΕΝΑ	ΔΕΔΟΜΕΝΑ	ΔΕΔΟΜΕΝΑ

<TABLE BORDER>
<TR><TH>ΕΠΙΚΕΦΑΛΙΔΑ</TH><TD>ΔΕΔΟΜΕΝΑ</TD> <TD>ΔΕΔΟΜΕΝΑ</TD><TD>ΔΕΔΟΜΕΝΑ</TD></TR> </TABLE>

Βλέπουμε πως ο κώδικας αυτού του πίνακα είναι ο ίδιος με τον προηγούμενο με την διαφορά ότι προστίθεται η παράμετρος BORDER. Έτσι δεν έχουμε πλέον <TABLE>...</TABLE> αλλά <TABLE BORDER>...</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 θέλουμε (γραφικά, λίστες, παραπομπές κ.λπ.).

Στα παραπάνω παραδείγματα είδαμε πως ένα κελί εκτείνεται για να πάρει το μέγεθος του περιεχομένου του. Με τον τρόπο αυτό φυσικά συμπαρασύρει και τα άλλα κελιά που βρίσκονται στην ίδια στήλη ή/και γραμμή με αυτό, αναπροσαρμόζοντας και τις δικές τους διαστάσεις. Αν θέλουμε να αλλάξουμε τον τρόπο που εμφανίζεται το κείμενο μέσα σε ένα κελί θα πρέπει αντί να βάλουμε το κείμενο σκέτο (χύμα, χωρίς μορφοποίηση), να ορίσουμε στον browser με ποιο τρόπο θα γίνεται η εμφάνισή του. Π.χ.

Επικεφαλίδα 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>. Με την προσθήκη του <BR> ο παραπάνω πίνακας γίνεται:

<TABLE BORDER>
<TR><TH>Επικεφαλίδα 1</TH><TH>Επικεφαλίδα 2</TH><TH>κενό κελί</TH></TR>
<TR><TD>κελί 1 <BR>με δύο γραμμές</TD><TD>κελί 2</TD><TD><BR></TD></TR>
</TABLE>

Το ανύπαρκτο κελί είναι πολύ χρήσιμο σε πίνακες με επικεφαλίδες που περιέχουν επικεφαλίδες και στις στήλες και στις γραμμές. Στο παράδειγμά μας έχουμε:

Επικεφαλίδα Στήλης 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> ΤΟ ΘΕΜΑ (ΤΙΤΛΟΣ) ΤΟΥ ΠΙΝΑΚΑ

Η οδηγία <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>

Επιστροφή στον Οδηγό Κατασκευής Web Σελίδων