Περίπλοκοι πίνακες

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 τότε δεν υπάρχει περιθώριο).

AAA	BBB
111	222

Π.χ.

<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.

AAA	BBB
111	222

Π.χ.

<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 αλλά καλό είναι να αποφεύγεται για λόγους αισθητικής.

AAA	BBB
111	222

Π.χ.

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

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