Πώς να ορίσετε έναν πίνακα. Σχεδόν τυπική λειτουργία

Αυτή η διάλεξη εξετάζει λεπτομερώς τις αρχές χρήσης πινάκων στη σήμανση HTML. Αυτό περιλαμβάνει μια οργάνωση κειμένου σε πίνακα, ένα πλέγμα συντεταγμένων σε πίνακα και γραφικά οργανωμένα σε πίνακες.

Εργαλεία για την περιγραφή πινάκων σε HTML

Καθώς αναπτύχθηκε το WWW, κατέστη σαφές ότι οι πόροι που περιέχονται στην HTML δεν επαρκούσαν για την υψηλής ποιότητας εμφάνιση διαφόρων τύπων εγγράφων. Το μειονέκτημα της HTML ήταν η έλλειψη εργαλείων για την εμφάνιση πινάκων. Για το σκοπό αυτό χρησιμοποιήθηκε συνήθως προδιαμορφωμένο κείμενο (ετικέτα), στο οποίο ο πίνακας περιγραφόταν με χαρακτήρες ASCII. Αλλά αυτή η μορφή παρουσίασης πινάκων δεν ήταν αρκετά υψηλής ποιότητας και ξεχώριζε από το γενικό στυλ του εγγράφου. Μετά την εισαγωγή των πινάκων σε HTML, οι Webmasters δεν είχαν απλώς ένα εργαλείο για την τοποθέτηση κειμένου και αριθμητικών δεδομένων, αλλά ένα ισχυρό εργαλείο σχεδίασης για την τοποθέτηση γραφικών εικόνων και κειμένου στη σωστή θέση στην οθόνη.

Δημιουργία πινάκων σε HTML

Η ετικέτα χρησιμοποιείται για την περιγραφή πινάκων. Η ετικέτα, όπως πολλές άλλες, μεταφράζει αυτόματα τη γραμμή πριν και μετά τον πίνακα.

Δημιουργία γραμμής - ετικέτας πίνακα

Η ετικέτα (Σειρά πίνακα) δημιουργεί μια σειρά πίνακα. Όλο το κείμενο, οι άλλες ετικέτες και τα χαρακτηριστικά που πρέπει να τοποθετηθούν σε μία γραμμή πρέπει να τοποθετούνται μεταξύ ετικετών lt;TR>.

Ορισμός κελιών πίνακα - ετικέτα

Τα κελιά με δεδομένα τοποθετούνται συνήθως μέσα σε μια σειρά πίνακα. Κάθε κελί που περιέχει κείμενο ή εικόνα πρέπει να περιβάλλεται από . Ο αριθμός των ετικετών σε μια σειρά καθορίζει τον αριθμό των κελιών

Τραπέζι

Εάν ένας πίνακας έχει δύο ετικέτες TR, τότε έχει δύο σειρές.
Εάν υπάρχουν τρεις ετικέτες TD σε μια γραμμή,	τότε σε αυτό	τρεις στήλες.

Επικεφαλίδες στηλών πίνακα - ετικέτα

Οι επικεφαλίδες για τις στήλες και τις γραμμές πίνακα καθορίζονται χρησιμοποιώντας την ετικέτα κεφαλίδας (TableHeader, επικεφαλίδα πίνακα). Αυτές οι ετικέτες είναι παρόμοιες. Η διαφορά είναι ότι το κείμενο που περικλείεται μεταξύ των ετικετών γράφεται αυτόματα με έντονη γραμματοσειρά και τοποθετείται στη μέση του κελιού από προεπιλογή. Μπορείτε να αποκεντρώσετε το κείμενο και να στοιχίσετε το κείμενο προς τα αριστερά ή προς τα δεξιά. Εάν χρησιμοποιείται με την ετικέτα και το χαρακτηριστικό, το κείμενο θα μοιάζει επίσης με τίτλο. Ωστόσο, έχετε υπόψη σας ότι δεν υποστηρίζουν όλα τα προγράμματα περιήγησης έντονες γραμματοσειρές σε πίνακες, επομένως είναι καλύτερο να ορίσετε τις επικεφαλίδες των πινάκων χρησιμοποιώντας το .

Η κεφαλίδα είναι κεντραρισμένη από προεπιλογή Η κεφαλίδα μπορεί να συγχωνεύσει στήλεςΗ κεφαλίδα μπορεί να τοποθετηθεί πριν από τις στήλες Η κεφαλίδα μπορεί να συνδέσει γραμμές

Κείμενο ή δεδομένα	Κείμενο ή δεδομένα
Κείμενο ή δεδομένα	Κείμενο ή δεδομένα
Κείμενο ή δεδομένα	Κείμενο ή δεδομένα
Κείμενο ή δεδομένα	Κείμενο ή δεδομένα

Χρήση κεφαλίδων πίνακα - ετικέτα

Η ετικέτα σάς επιτρέπει να δημιουργείτε επικεφαλίδες πίνακα. Από προεπιλογή, οι κεφαλίδες είναι κεντραρισμένες και τοποθετημένες είτε πάνω από () είτε κάτω από τον πίνακα (). Ο τίτλος μπορεί να αποτελείται από οποιοδήποτε κείμενο και εικόνες. Το κείμενο θα χωριστεί σε γραμμές που αντιστοιχούν στο πλάτος του πίνακα. Μερικές φορές μια ετικέτα χρησιμοποιείται για τη λεζάντα μιας εικόνας. Για να γίνει αυτό, αρκεί να περιγράψουμε έναν πίνακα χωρίς περιθώρια.

Κεφαλίδα πάνω από τον πίνακα

Κείμενο ή δεδομένα

Κατευθυνόμενος κάτω από τον πίνακα

Κείμενο ή δεδομένα

Χαρακτηριστικό NOWRAP

Συνήθως, κάθε κείμενο που δεν χωράει σε μία σειρά κελιού πίνακα μετακινείται στην επόμενη σειρά. Ωστόσο, όταν χρησιμοποιείτε το χαρακτηριστικό NOWRAP με ή ετικέτες, το μήκος του κελιού επεκτείνεται έτσι ώστε το εσώκλειστο κείμενο να χωράει σε μία γραμμή.

Χαρακτηριστικό COLSPAN

Οι ετικέτες και τροποποιούνται χρησιμοποιώντας το χαρακτηριστικό COLSPAN (Εύρος στήλης, σύνδεση στήλης). Εάν θέλετε να κάνετε ένα κελί πιο φαρδύ από το επάνω ή το κάτω μέρος, μπορείτε να χρησιμοποιήσετε το χαρακτηριστικό COLSPAN για να το τεντώσετε σε οποιοδήποτε αριθμό κανονικών κελιών.

Εάν θέλετε να κάνετε οποιοδήποτε κελί ευρύτερο από το επάνω ή το κάτω μέρος,	μπορείτε να χρησιμοποιήσετε το χαρακτηριστικό COLSPAN=2,
για να το τεντώσει σε οποιοδήποτε αριθμό κανονικών κυττάρων.

Χαρακτηριστικό ROWSPAN

Το χαρακτηριστικό ROWSPAN, που χρησιμοποιείται στις ετικέτες και, είναι παρόμοιο με το χαρακτηριστικό COLSPAN=, μόνο που καθορίζει τον αριθμό των σειρών στις οποίες εκτείνεται το κελί. Εάν καθορίσατε έναν αριθμό μεγαλύτερο από ένα στο χαρακτηριστικό ROWSPAN=s, τότε ο αντίστοιχος αριθμός σειρών πρέπει να βρίσκεται κάτω από το τεντωμένο κελί. Δεν μπορεί να τοποθετηθεί στο κάτω μέρος του πίνακα.

χαρακτηριστικό WIDTH

Το χαρακτηριστικό WIDTH χρησιμοποιείται σε δύο περιπτώσεις. Μπορείτε να το τοποθετήσετε σε μια ετικέτα για να δώσετε το πλάτος ολόκληρου του πίνακα ή μπορείτε να το χρησιμοποιήσετε μέσα ή ετικέτες για να ορίσετε το πλάτος ενός κελιού ή μιας ομάδας κελιών. Το πλάτος μπορεί να καθοριστεί σε pixel ή ως ποσοστό. Για παράδειγμα, εάν ορίσετε WIDTH=250 στην ετικέτα, θα λάβετε έναν πίνακα πλάτους 250 pixel, ανεξάρτητα από το μέγεθος της σελίδας στην οθόνη σας. Όταν ορίζετε WIDТН=50% στην ετικέτα, ο πίνακας θα καταλαμβάνει το μισό πλάτος σελίδας σε οποιοδήποτε μέγεθος εικόνας στην οθόνη. Επομένως, όταν προσδιορίζετε το πλάτος του πίνακα ως ποσοστό, να έχετε κατά νου ότι εάν ο χρήστης έχει μια στενή θύρα προβολής, η σελίδα σας μπορεί να φαίνεται λίγο περίεργη. Εάν χρησιμοποιείτε pixel και ο πίνακας είναι ευρύτερος από την περιοχή προβολής, θα εμφανιστεί μια γραμμή κύλισης στο κάτω μέρος για να μετακινηθείτε αριστερά και δεξιά στη σελίδα. Ανάλογα με τις εργασίες που έχετε στη διάθεσή σας, οποιαδήποτε μέθοδος ρύθμισης του πλάτους του πίνακα μπορεί να είναι χρήσιμη.

Κείμενο ή δεδομένα - πλάτος 100%

Κείμενο ή δεδομένα - πλάτος 50%

Κείμενο ή δεδομένα - πλάτος 200 pixel

Κείμενο ή δεδομένα - πλάτος 100 pixel

Εφαρμογή κενών κελιών

Εάν ένα κελί δεν περιέχει δεδομένα, δεν θα έχει περιθώρια. Εάν θέλετε ένα κελί να έχει περιθώρια αλλά όχι περιεχόμενο, πρέπει να βάλετε κάτι σε αυτό που δεν θα είναι ορατό κατά την προβολή. Μπορείτε να χρησιμοποιήσετε μια κενή συμβολοσειρά. Μπορείτε ακόμη να καθορίσετε κενές στήλες ορίζοντας το πλάτος τους σε pixel ή σχετικές μονάδες και χωρίς να εισάγετε δεδομένα στα κελιά που προκύπτουν. Αυτό το εργαλείο μπορεί να είναι χρήσιμο όταν τοποθετείτε κείμενο και γραφικά σε μια σελίδα.

CELLADDING χαρακτηριστικό

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

Κείμενο ή δεδομένα	Κείμενο ή δεδομένα	Κείμενο ή δεδομένα
Κείμενο ή δεδομένα	Κείμενο ή δεδομένα	Κείμενο ή δεδομένα

Κείμενο ή δεδομένα	Κείμενο ή δεδομένα	Κείμενο ή δεδομένα
Κείμενο ή δεδομένα	Κείμενο ή δεδομένα	Κείμενο ή δεδομένα

Χαρακτηριστικά ALIGN και VALIGN

Οι ετικέτες , και μπορούν να τροποποιηθούν χρησιμοποιώντας τα χαρακτηριστικά ALIGN και VALIGN. Το χαρακτηριστικό ALIGN καθορίζει εάν το κείμενο και τα γραφικά είναι στοιχισμένα οριζόντια, δηλαδή αριστερά ή δεξιά ή στο κέντρο. Η οριζόντια ευθυγράμμιση μπορεί να ρυθμιστεί με διάφορους τρόπους:

ALIGN=bleedleft ωθεί τα περιεχόμενα της κυψέλης στο ίδιο επίπεδο προς την αριστερή άκρη.

ALIGN=αριστερά ευθυγραμμίζει τα περιεχόμενα του κελιού προς τα αριστερά, λαμβάνοντας υπόψη την εσοχή που καθορίζεται από το χαρακτηριστικό CELLPADDING.

ALIGN=center κεντράρει τα περιεχόμενα του κελιού.

ALIGN=right ευθυγραμμίζει τα περιεχόμενα του κελιού προς τα δεξιά, λαμβάνοντας υπόψη την εσοχή που καθορίζεται από το χαρακτηριστικό CELLPADDING.

Κείμενο ή δεδομένα	Κείμενο ή δεδομένα	Κείμενο ή δεδομένα
Κείμενο ή δεδομένα	Κείμενο ή δεδομένα	Κείμενο ή δεδομένα
Κείμενο ή δεδομένα	Κείμενο ή δεδομένα	Κείμενο ή δεδομένα
Κείμενο ή δεδομένα	Κείμενο ή δεδομένα	Κείμενο ή δεδομένα
Κείμενο ή δεδομένα	Κείμενο ή δεδομένα	Κείμενο ή δεδομένα

Το χαρακτηριστικό VALIGN ευθυγραμμίζει κάθετα κείμενο και γραφικά μέσα σε ένα κελί. Η κάθετη ευθυγράμμιση μπορεί να ρυθμιστεί με διάφορους τρόπους:

VALIGN=top ευθυγραμμίζει τα περιεχόμενα ενός κελιού στο επάνω περίγραμμά του.

VALIGN=middle κεντράρει κάθετα τα περιεχόμενα του κελιού.

VALIGN=κάτω ευθυγραμμίζει τα περιεχόμενα του κελιού στο κάτω περίγραμμά του.

Το χαρακτηριστικό VALIGN ευθυγραμμίζει κάθετα κείμενο και γραφικά μέσα σε ένα κελί.	μπλουζα,	Μέσης,	κάτω μέρος.
VALIGN=top Ευθυγραμμίζει τα περιεχόμενα ενός κελιού στο επάνω περίγραμμά του.	μπλουζα,	μπλουζα,	μπλουζα.
VALIGN=middle Κεντράρει κάθετα τα περιεχόμενα ενός κελιού.	Μέσης,	Μέσης,	Μέσης.
VALIGN=bottom Ευθυγραμμίζει τα περιεχόμενα ενός κελιού στο κάτω περίγραμμά του.	κάτω μέρος,	κάτω μέρος,	κάτω μέρος.

χαρακτηριστικό BORDER

Η ετικέτα συχνά ορίζει πώς θα φαίνονται τα περιγράμματα, δηλαδή οι γραμμές που περιβάλλουν τα κελιά του πίνακα και τον ίδιο τον πίνακα. Εάν δεν καθορίσετε ένα πλαίσιο, θα λάβετε έναν πίνακα χωρίς γραμμές, αλλά θα διατεθεί χώρος για αυτούς. Το ίδιο αποτέλεσμα μπορεί να επιτευχθεί προσδιορίζοντας . Μερικές φορές θέλετε να κάνετε το περίγραμμα πιο χοντρό ώστε να αναδεικνύεται καλύτερα. Για να προσελκύσετε την προσοχή σε μια εικόνα ή κείμενο, μπορείτε να ορίσετε αποκλειστικά έντονα περιγράμματα. Όταν δημιουργείτε ένθετα τραπέζια, πρέπει να κάνετε περιγράμματα διαφορετικού πάχους για διαφορετικούς πίνακες για να τα διακρίνετε ευκολότερα.

Χαρακτηριστικό CELLSPACING

Το χαρακτηριστικό CELLSPACING καθορίζει το πλάτος των διαστημάτων μεταξύ των κελιών σε pixel. Εάν αυτό το χαρακτηριστικό δεν έχει καθοριστεί, η προεπιλεγμένη τιμή είναι δύο pixel. Χρησιμοποιώντας το χαρακτηριστικό CELLSPACING=, μπορείτε να τοποθετήσετε κείμενο και γραφικά όπου τα χρειάζεστε. Εάν θέλετε να αφήσετε κενό χώρο, μπορείτε να γράψετε ένα κενό στο κελί.

Κείμενο ή δεδομένα	Κείμενο ή δεδομένα	Κείμενο ή δεδομένα
Κείμενο ή δεδομένα	Κείμενο ή δεδομένα	Κείμενο ή δεδομένα

Κείμενο ή δεδομένα	Κείμενο ή δεδομένα	Κείμενο ή δεδομένα
Κείμενο ή δεδομένα	Κείμενο ή δεδομένα	Κείμενο ή δεδομένα

Κείμενο ή δεδομένα	Κείμενο ή δεδομένα	Κείμενο ή δεδομένα
Κείμενο ή δεδομένα		Κείμενο ή δεδομένα

Χαρακτηριστικό BGCOLOR

Αυτό το χαρακτηριστικό σάς επιτρέπει να ορίσετε το χρώμα του φόντου. Ανάλογα με την ετικέτα (TABLE, TR, TD) με την οποία χρησιμοποιείται, το χρώμα φόντου μπορεί να οριστεί για ολόκληρο τον πίνακα, για μια σειρά ή για ένα μεμονωμένο κελί. Η τιμή αυτού του χαρακτηριστικού είναι ο κωδικός RGB ή το τυπικό όνομα χρώματος.

Κείμενο ή δεδομένα	Κείμενο ή δεδομένα	Κείμενο ή δεδομένα
Κείμενο ή δεδομένα	Κείμενο ή δεδομένα	Κείμενο ή δεδομένα

Ιστορικό χαρακτηριστικό

Αυτό το χαρακτηριστικό καθορίζει την εικόνα φόντου για πίνακες. Ισχύει για ετικέτες TABLE και TD. Η τιμή του είναι η διεύθυνση URL του αρχείου εικόνας φόντου. Η χρήση αυτού του χαρακτηριστικού συζητείται παρακάτω.

Χρήση πινάκων στο σχεδιασμό σελίδων

Το καλό με τα τραπέζια είναι ότι μπορείτε να κάνετε αόρατα τα σύνορά τους αν θέλετε. Αυτό σας επιτρέπει να χρησιμοποιήσετε την ετικέτα για να τοποθετήσετε όμορφα κείμενο και γραφικά στη σελίδα. Προς το παρόν, η ετικέτα παραμένει το μόνο ισχυρό εργαλείο μορφοποίησης σε HTML. Οι σχεδιαστές ιστοσελίδων έχουν τώρα σχεδόν την ίδια ελευθερία όσον αφορά τη χρήση του λευκού χώρου με τους σχεδιαστές τυπωμένων σελίδων. Οι πίνακες είναι ο καλύτερος τρόπος για να απομακρυνθείτε από την ιεραρχική τοποθέτηση κειμένου σε ιστοσελίδες.

Εάν το πρόγραμμα περιήγησης υποστηρίζει πίνακες, συνήθως θα εμφανίζει σωστά τα πιο ενδιαφέροντα εφέ που λαμβάνονται με τη χρήση τους

Ural State Pedagogical University Καλώς ορίσατε!

Εκπαιδευτικό σεμινάριο "Βασικές αρχές του WEB mastering"

Δημιουργία πολύχρωμων τραπεζιών

Ορισμένα προγράμματα περιήγησης σάς επιτρέπουν να εμφανίζετε χρώματα. Υπάρχουν διάφοροι τρόποι για να χρωματίσετε έναν πίνακα, κυρίως ανάλογα με το πρόγραμμα περιήγησης που χρησιμοποιείτε.

Έγχρωμα περιγράμματα στο Netscape Navigator. Όχι μόνο μπορείτε να περιβάλετε το τραπέζι με ένα όμορφο περίγραμμα, αλλά μπορείτε επίσης να το ρυθμίσετε σε ένα χρώμα διαφορετικό από τα χρώματα του κειμένου και του φόντου. Δημιουργήστε ένα απλό γκρι GIF (ή οποιοδήποτε GIF θέλετε να έχετε ως φόντο) και ορίστε το σε μια ετικέτα ως φόντο της σελίδας. Στη συνέχεια, ορίστε το χρώμα φόντου της σελίδας. Ως αποτέλεσμα, η ετικέτα σας θα μοιάζει κάπως έτσι:

Έχετε δημιουργήσει ένα διπλό φόντο - GIF και ένα καθορισμένο χρώμα. Ως αποτέλεσμα, το χρώμα του φόντου θα είναι ορατό σε όλα τα περιγράμματα του πίνακα και τις οριζόντιες γραμμές (). Είτε το GIF φόντου σας είναι γκρι είτε όχι, οι χρωματιστές γραμμές και τα περιγράμματα του πίνακα θα ξεχωρίζουν αισθητά. Εάν το GIF φόντου δεν είναι πολύ περίπλοκο, ο χρόνος φόρτωσης της σελίδας θα αυξηθεί ελαφρώς.

Οδηγίες

Το πρώτο βήμα είναι να δημιουργήσετε έναν πίνακα εάν δεν υπάρχει ήδη. Αυτή η ενέργεια εκτελείται στο χαρακτηριστικό. Για αυτό χρησιμοποιούνται ετικέτες (απαιτείται η ετικέτα κλεισίματος):

- τραπέζι?
- γραμμή?

- στήλη.

Κύρια πρόσθετα χαρακτηριστικά:
Σύνορα – σύνορα;

Bordercolor – χρώμα περιγράμματος;
Πλάτος – πλάτος;
Ύψος – ύψος.

Η σύνταξη για έναν πίνακα 2Χ2 χωρίς περίγραμμα και στοιχισμένο περιεχόμενο αριστερά/δεξιά είναι:

Περιεχόμενα του 1ου κελιού	Περιεχόμενα του 2ου κελιού
Περιεχόμενα του 3ου κελιού	Περιεχόμενα του 4ου κελιού

Η εικόνα πρέπει να τοποθετηθεί μετά την ετικέτα

. Εάν εισαγάγετε μια εικόνα στο πρώτο κελί του πίνακα που παρουσιάζεται παραπάνω, θα λάβετε:

	Περιεχόμενα του 2ου κελιού
Περιεχόμενα του 3ου κελιού	Περιεχόμενα του 4ου κελιού

Πρόσθετα χαρακτηριστικά:
Πλάτος – πλάτος;
Ύψος – ύψος;
Alt - εναλλακτικό κείμενο που θα εμφανίζεται στον χρήστη εάν είναι απενεργοποιημένη η λειτουργία προβολής εικόνων.
Ευθυγράμμιση – οριζόντια ευθυγράμμιση.
Valign – κατακόρυφη ευθυγράμμιση.
Τίτλος – λεζάντα για την εικόνα.

Μπορείτε να χρησιμοποιήσετε την εικόνα ως σύνδεσμο. Για να το κάνετε αυτό, απλώς βάλτε το στην κατάλληλη ετικέτα:
Στο πλαίσιο του πίνακα θα μοιάζει με αυτό:

	Περιεχόμενα του 2ου κελιού
Περιεχόμενα του 3ου κελιού	Περιεχόμενα του 4ου κελιού

Πρόσθετες δυνατότητες εικόνας.

1. Αλλαγή χρώματος της εικόνας όταν τοποθετείτε το δείκτη του ποντικιού πάνω της με το ποντίκι και αφού αλλάξετε τη θέση του δρομέα:
onMouseOver="this.style.background="#color number"" onMouseOut="this.style.background="#color number""

2. Αλλαγή της εικόνας σε άλλη εικόνα όταν τοποθετείτε το ποντίκι:
onmouseover="this.src="images/1.gif"" onmouseout="this.src="images/2.gif""

3. Εισαγωγή ενός περιστρεφόμενου καρουζέλ εικόνων σε ένα κελί πίνακα (οι τιμές μπορούν να αλλάξουν):

// 7 μεταβλητές για τον έλεγχο της συμπεριφοράς
var Car_Image_Width=100;
var Car_Image_Height=100;
var Car_Border=true; // σωστό ή λάθος
var Car_Border_Color="000000"; Border="0"
var Car_Speed=5;
var Car_Direction=true; // σωστό ή λάθος
var Car_NoOfSides=6; // πρέπει να είναι 4, 6, 8 ή 12

/* πίνακας για τον καθορισμό εικόνων και προαιρετικών συνδέσμων.
Για καρουζέλ 4 όψεων καθορίστε τουλάχιστον 2 εικόνες
Για καρουζέλ 6 όψεων, καθορίστε τουλάχιστον 3
Για καρουζέλ 8 όψεων, καθορίστε τουλάχιστον 4
Για καρουζέλ 12 όψεων, καθορίστε τουλάχιστον 6
Εάν ο σύνδεσμος δεν χρειάζεται, κρατήστε τον ""
*/
Car_Image_Sources=new Array(
"images/1.gif","",
"images/2.gif","",
"images/3.gif","",
"images/4.gif","",
"images/5.gif","",
"images/6.gif",""

// ΣΗΜΕΙΩΣΗ Δεν υπάρχει κόμμα μετά την τελευταία γραμμή
);

/******************** ΜΗΝ ΕΠΕΞΕΡΓΑΣΤΕΙΤΕ ΠΑΡΑΚΑΤΩ **************************** ******/
CW_I=new Array(Car_NoOfSides/2+1);C_ClcW=new Array(Car_NoOfSides/2);
C_Coef=νέος πίνακας(
3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4, 0,
Math.PI/4.3*Math.PI/2.5*Math.PI/3.11*Math.PI/6.0,Math.PI/6,Math.PI/3);
var C_CoefOf=Car_NoOfSides==4?0:Car_NoOfSides==6?2:Car_NoOfSides==8?5:9;
C_Pre_Img=new Array(Car_Image_Sources.length);
var C_Angle=Car_Direction?Math.PI/(Car_NoOfSides/2):0,C_CrImg=Car_NoOfSides,C_MaxW,C_TotalW,
C_Stppd=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSides/2;

Λειτουργία Carousel()
if(document.getElementById)(
για(i=0;i

σειρά 2 κελί 1

σειρά 2 κελί 2

Αποτέλεσμα:

Πώς να φτιάξετε ένα φόντο τραπεζιού;

Μπορείτε επίσης να ορίσετε το φόντο του πίνακα για όλα τα κελιά του μαζί, καθώς και για κάθε κελί ξεχωριστά. Μπορείτε να ορίσετε το φόντο με ένα χρώμα ή με μια εικόνα. Υπάρχουν δύο χαρακτηριστικά για το φόντο:

BGCOLOR – χρώμα φόντου για ολόκληρο τον πίνακα ή για κάθε κελί ξεχωριστά. Το χρώμα καθορίζεται με κωδικό ή λέξη.
ΙΣΤΟΡΙΚΟ – το φόντο στον πίνακα είναι γεμάτο με μια εικόνα.

Προσοχή: εάν θέλετε να ορίσετε ένα χρώμα φόντου ή εικόνα φόντου για ολόκληρο τον πίνακα, τα χαρακτηριστικά πρέπει να οριστούν στην ετικέτα

. Και αν μόνο σε ένα συγκεκριμένο κελί, τότε στην ετικέτα

Εδώ η κλάση γραμμής καθορίζει τις διαστάσεις του κελιού.

βρίσκεται το σώμα του τραπεζιού. Το σώμα αποτελείται από γραμμές και στήλες. Ο πίνακας συμπληρώνεται γραμμή προς γραμμή.

Κάθε ετικέτα
δημιουργεί μια νέα γραμμή. Περαιτέρω σε ένθετο

Για καλύτερη κατανόηση, δείτε το παράδειγμα:

Πίνακες σε HTML

σειρά 1 κελί 1	σειρά 1 κελί 2
σειρά 2 κελί 1	σειρά 2 κελί 2

Αποτέλεσμα:

Προσοχή: εάν η εικόνα είναι μικρότερη σε μέγεθος ανά κελί, τότε θα επαναληφθεί μέχρι να γεμίσει το κελί μέχρι το τέλος. Εάν η εικόνα είναι μεγαλύτερη από το κελί, τότε το φόντο της εικόνας θα περικοπεί ώστε να ταιριάζει στο κελί.

Και τέλος, θα σας πω για δύο ακόμη χρήσιμα χαρακτηριστικά.

Σε περίπτωση που θέλετε ξαφνικά να αυξήσετε την απόσταση μεταξύ όλων των κελιών, τα ακόλουθα χαρακτηριστικά θα σας βοηθήσουν:

CELLPADDING – η απόσταση μεταξύ του πλαισίου κάθε κελιού του πίνακα html και του υλικού που περιέχει.

Πίνακες σε HTML

σειρά 1 κελί 1	σειρά 1 κελί 2
σειρά 2 κελί 1	σειρά 2 κελί 2

Αποτέλεσμα:

σειρά 1 κελί 1	σειρά 1 κελί 2
σειρά 2 κελί 1	σειρά 2 κελί 2

CELLSPACING – η απόσταση μεταξύ των ορίων των γειτονικών κελιών.

Πίνακες σε HTML

σειρά 1 κελί 1	σειρά 1 κελί 2
σειρά 2 κελί 1	σειρά 2 κελί 2

Αποτέλεσμα:

σειρά 1 κελί 1	σειρά 1 κελί 2
σειρά 2 κελί 1	σειρά 2 κελί 2

Φοφ, σου είπα!
Ελπίζω να ανταπεξήλθα στην εργασία και να εξήγησα ξεκάθαρα όλα όσα ήξερα για τους πίνακες html. Σας συνιστώ να ασφαλίσετε καλά το υλικό.
Δοκιμάστε να δημιουργήσετε τον δικό σας πίνακα, ή ακόμα καλύτερα, ένα ολόκληρο πλαίσιο για μια ιστοσελίδα από έναν πίνακα html.
Ολα τα καλύτερα για εσάς!
Ευχαριστώ που επισκεφθήκατε το blog μου

Αυτή η λειτουργία βασίζεται στην τυπική λειτουργία με ορισμένες εξαιρέσεις: η εμφάνιση των εικόνων μέσα στα κελιά του πίνακα και των εικόνων η μία κάτω από την άλλη εμφανίζεται όπως στη λειτουργία συμβατότητας. Για να μεταβείτε σε σχεδόν τυπική λειτουργία, χρησιμοποιήστε έναν από τους παρακάτω τύπους εγγράφων.

Για πλαίσια σε HTML:

Για πλαίσια σε XHTML:

Εικόνες η μία κάτω από την άλλη

Κατά την προβολή εικόνων κάθετα με τροφοδοσία γραμμής
Οι εικόνες σε σχεδόν τυπική λειτουργία εμφανίζονται μαζί χωρίς κενά. Το Παράδειγμα 1.2 δείχνει τον κωδικό για την εμφάνιση δύο εικόνων.

Παράδειγμα 1.2. Έξοδος δύο εικόνων

HTML 4.01 IE Cr Op Sa Fx

Κάθετες εικόνες

Δεδομένου ότι τα σχέδια ήταν προηγουμένως ένα και «κομμένα» για ευκολία, σχηματίζουν μια ενιαία εικόνα (Εικ. 1.1).

Ρύζι. 1.1. Έξοδος εικόνων σε σχεδόν τυπική λειτουργία

Στην τυπική λειτουργία, εμφανίζεται ένα μικρό κενό μεταξύ των εικόνων (Εικ. 1.2).

Ρύζι. 1.2. Έξοδος εικόνων σε τυπική λειτουργία

Για να παρακάμψετε αυτήν τη δυνατότητα σε τυπική λειτουργία, υπάρχουν δύο κύριοι τρόποι:

προσθήκη οθόνης: μπλοκ για εικόνες.

χρησιμοποιήστε την ιδιότητα line-height για το γονικό κοντέινερ.

Ας εξετάσουμε αυτές τις μεθόδους με περισσότερες λεπτομέρειες.

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

Παράδειγμα 1.3. Χρήση της ιδιότητας μπλοκ

Εικόνες κάθετα .img IMG ( εμφάνιση: μπλοκ; )

Δεν είναι απαραίτητο να χρησιμοποιήσετε την ιδιότητα εμφάνισης, μπορείτε επίσης να χρησιμοποιήσετε το ύψος γραμμής , αυτή η ιδιότητα ορίζει το διάστιχο. Ορίζοντας την ετικέτα σε 1 px

Μέσα στο οποίο βρίσκονται οι εικόνες, θα έχουμε παρόμοιο αποτέλεσμα (παράδειγμα 1.4).

Παράδειγμα 1.4. Χρήση της ιδιότητας line-height

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Εικόνες κάθετα P.img (ύψος γραμμής: 1px; )

Εικόνες στον πίνακα

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

Παράδειγμα 1.5. Εικόνα πίνακα

HTML 4.01 CSS 2.1 IE Cr Op Sa Fx

Εικόνες στον πίνακα TABLE ( περίγραμμα: 1px συμπαγές #000; )

Το αποτέλεσμα αυτού του παραδείγματος φαίνεται στο Σχ. 1.3α. Για την τυπική λειτουργία, η έξοδος εικόνας είναι ελαφρώς διαφορετική (Εικ. 1.3b).


ΕΝΑ	σι

Ρύζι. 1.3. Εικόνα στον πίνακα. α - σχεδόν τυπική λειτουργία, β - τυπική λειτουργία

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

Ρύζι. 1.4. Κείμενο βάσης

Και πάλι, υπάρχουν διάφοροι τρόποι για να αλλάξετε τη συμπεριφορά των εικόνων σε έναν πίνακα. Η πρώτη μέθοδος έχει ήδη αναφερθεί, αυτή είναι η μετατροπή ετικετών σε ένα στοιχείο μπλοκ χρησιμοποιώντας την ιδιότητα εμφάνισης με το μπλοκ τιμών (βλ. παράδειγμα 1.3). Το στυλ σε αυτή την περίπτωση θα είναι το εξής:

TABLE IMG ( οθόνη: μπλοκ; )

Εάν υπάρχει κείμενο μέσα σε ένα κελί μαζί με εικόνες, αυτό το στυλ μπορεί να έχει ανεπιθύμητες συνέπειες. Αντί η εικόνα να τοποθετηθεί δίπλα στο κείμενο, θα εμφανιστεί σε μια νέα γραμμή ως στοιχείο μπλοκ. Σε αυτήν την περίπτωση, συνιστάται να ρυθμίσετε τις εικόνες να ευθυγραμμίζονται στο κάτω μέρος χρησιμοποιώντας την ιδιότητα κατακόρυφης στοίχισης με την τιμή κάτω (παράδειγμα 1.6).

Παράδειγμα 1.6. Στοίχιση εικόνων

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Εικόνες στον πίνακα TABLE ( περίγραμμα: 1px συμπαγές #000; ) TD IMG (κατακόρυφη στοίχιση: κάτω; )

Κείμενο

Ενώ όλα τα προγράμματα περιήγησης σε αυτό το παράδειγμα ευθυγραμμίζουν την εικόνα στο κάτω μέρος, η στοίχιση του ίδιου του κειμένου είναι ελαφρώς διαφορετική. Τα προγράμματα περιήγησης Firefox, Safari, IE7 ευθυγραμμίζουν το κείμενο στο κάτω άκρο της εικόνας και το Opera, IE8, IE9 - στην κορυφή.

Σχέδια μεμονωμένα εικονοστοιχεία

Κατά τη διάρκεια της διάταξης του πίνακα, χρησιμοποιήθηκε ενεργά μια διαφανής εικόνα με μέτρηση ένα προς ένα pixel, η λεγόμενη εικόνα ενός εικονοστοιχείου. Τοποθετημένη σε ένα κελί πίνακα, μια τέτοια εικόνα δεν της επέτρεπε να συρρικνωθεί σε ορισμένα όρια, αλλά κλιμακώθηκε εύκολα, καθορίζοντας έτσι το πλάτος ή το ύψος του κελιού. Επειδή το σχέδιο είναι διαφανές, μπορείτε να ορίσετε το χρώμα φόντου για το κελί και να λάβετε οριζόντιες ή κάθετες γραμμές δεδομένου πάχους.

Στην τυπική λειτουργία, αναμένουμε τα ίδια προβλήματα όπως όταν χρησιμοποιείτε κανονικές εικόνες μέσα στα κελιά. Το ύψος του κελιού θα επεκταθεί καθώς προστίθεται η κάτω επένδυση στις εικόνες. Αυτό το πρόβλημα επιλύεται πολύ πιο απλά και δεν απαιτεί τη χρήση πρόσθετου στυλ. Τα σύγχρονα προγράμματα περιήγησης εμφανίζουν τέλεια δεδομένα μεγέθη κελιών, ακόμη και χωρίς πρόσθετες εικόνες μέσα. Επομένως, αρκεί απλώς να διαγράψετε ένα σχέδιο ενός εικονοστοιχείου από ένα κελί.

δημιουργούνται στήλες. Μπορείτε να δημιουργήσετε πολλές στήλες. Σε αυτήν την περίπτωση, πρέπει να παρακολουθείτε τον αριθμό των στηλών σε κάθε γραμμή. Για παράδειγμα, εάν η πρώτη σειρά είχε 5 στήλες, τότε οι ακόλουθες σειρές θα πρέπει επίσης να έχουν 5 στήλες. Διαφορετικά το τραπέζι θα επιπλέει. Είναι δυνατή η συγχώνευση κελιών.

Πώς να φτιάξετε έναν πίνακα σε html

Ακολουθεί ένα παράδειγμα, κώδικας html:

Παράδειγμα πίνακα
Στήλη 1	Στήλη 2

Δώστε προσοχή στο κελί

. Χρησιμοποιούμε το ειδικό χαρακτηριστικό colspan για την οριζόντια επέκταση των κελιών. Η αριθμητική του τιμή υποδεικνύει τον αριθμό των στηλών που πρέπει να συγχωνευθούν. Υπάρχει επίσης ένα ανάλογο αυτού του χαρακτηριστικού: μια ετικέτα (τίτλος πίνακα), όπου πρέπει επίσης να καθορίσετε το colspan. Το αποτέλεσμα θα είναι το ίδιο. Αλλά συχνά χρησιμοποιούν κανονικό td.

Τώρα ας ρίξουμε μια πιο προσεκτική ματιά σε όλα τα χαρακτηριστικά της ετικέτας

Προσθήκη ετικετών στις ιδιότητες και τις ιδιότητες

Για άνοιγμα ετικέτας

Μπορείτε να καθορίσετε διάφορα χαρακτηριστικά.

1. Ιδιότητα align="parameter" - ορίζει τη στοίχιση πίνακα. Μπορεί να λάβει τις ακόλουθες τιμές:

Στο παραπάνω παράδειγμα, ευθυγραμμίσαμε τον πίνακα στο κέντρο align="center" .

Αυτό το χαρακτηριστικό μπορεί να εφαρμοστεί όχι μόνο στον πίνακα, αλλά και σε μεμονωμένα κελιά πίνακα

. Έτσι, η ευθυγράμμιση θα είναι διαφορετική σε διαφορετικά κελιά.

Για παράδειγμα

12. Ιδιότητα width="number" - ορίζει το πλάτος του πίνακα: είτε σε pixel είτε σε ποσοστά.

13. Ιδιότητα class="class_name" - μπορείτε να καθορίσετε το όνομα της κλάσης στην οποία ανήκει ο πίνακας.

14. Ιδιότητα style="styles" - τα στυλ μπορούν να οριστούν ξεχωριστά για κάθε πίνακα.

Τώρα είναι ώρα να βουτήξετε μέσα στον πίνακα και να δείτε τα χαρακτηριστικά των κελιών του πίνακα. Αυτά τα χαρακτηριστικά πρέπει να γράφονται στην αρχική ετικέτα

Και Οι ίδιες επιλογές είναι διαθέσιμες όπως για θα εφαρμοστεί ιεραρχικά σε όλους

ή γραμμές

...

2. Ιδιότητα background="URL" - ορίζει την εικόνα φόντου. Αντί για τη διεύθυνση URL, θα πρέπει να γραφτεί η διεύθυνση της εικόνας φόντου.

Παράδειγμα

Παράδειγμα πίνακα
Στήλη 1	Στήλη 2

Μετατρέπεται στα ακόλουθα στη σελίδα:

Στο παραπάνω παράδειγμα, η εικόνα φόντου μας βρίσκεται στον φάκελο img (ο οποίος βρίσκεται στον ίδιο κατάλογο με τη σελίδα html) και η εικόνα ονομάζεται fon.gif. Λάβετε υπόψη ότι στην ετικέτα προσθέσαμε style="color:white;" . Επειδή το φόντο είναι σχεδόν μαύρο, για να αποτρέψουμε την ανάμειξη του κειμένου με το φόντο, κάναμε το κείμενο λευκό.

3. Ιδιότητα bgcolor="color" - ορίζει το χρώμα φόντου του πίνακα. Μπορείτε να επιλέξετε οποιοδήποτε χρώμα από ολόκληρη την παλέτα (δείτε κωδικούς και ονόματα χρωμάτων html)

4. Ιδιότητα border="number" - ορίζει το πάχος του περιγράμματος του πίνακα. Σε προηγούμενα παραδείγματα, καθορίσαμε border="1" , που σημαίνει ότι το πάχος του περιγράμματος είναι 1 pixel.

5. Ιδιότητα bordercolor="color" - ορίζει το χρώμα του περιγράμματος. Αν border="0" τότε δεν θα υπάρχει περίγραμμα και το χρώμα του περιγράμματος δεν θα έχει νόημα.

6. Ιδιότητα cellpadding="number" - εσοχή από το πλαίσιο έως τα περιεχόμενα του κελιού σε pixel.

7. Ιδιότητα cellpacing="number" - η απόσταση μεταξύ των κελιών σε pixel.

8. Ιδιότητα cols="number" - ο αριθμός των στηλών. Εάν δεν το ορίσετε, το ίδιο το πρόγραμμα περιήγησης θα καθορίσει τον αριθμό των στηλών. Η μόνη διαφορά είναι ότι ο καθορισμός αυτής της παραμέτρου πιθανότατα θα επιταχύνει τη φόρτωση του πίνακα.

9. Ιδιότητα frame="parameter" - πώς να εμφανίζετε περιγράμματα γύρω από τον πίνακα. Μπορεί να λάβει τις ακόλουθες τιμές:

κενό - μην σχεδιάζετε σύνορα
περίγραμμα - περίγραμμα γύρω από το τραπέζι
πάνω - περίγραμμα κατά μήκος της επάνω άκρης του τραπεζιού
κάτω - περίγραμμα στο κάτω μέρος του πίνακα
hsides - προσθέστε μόνο οριζόντια περιγράμματα (πάνω και κάτω μέρος του πίνακα)
vsides - σχεδιάστε μόνο κάθετα περιγράμματα (στα αριστερά και δεξιά του πίνακα)
rhs - περίγραμμα μόνο στη δεξιά πλευρά του πίνακα
lhs - περιθώριο μόνο στην αριστερή πλευρά του πίνακα

10. Ιδιότητα height="number" - ορίζει το ύψος του πίνακα: είτε σε pixel είτε σε ποσοστά.

11. Κανόνες ιδιοτήτων="παράμετρος" - πού εμφανίζονται τα περιγράμματα μεταξύ των κελιών. Μπορεί να λάβει τις ακόλουθες τιμές:

όλα - σχεδιάζεται μια γραμμή γύρω από κάθε κελί του πίνακα
ομάδες - εμφανίζεται μια γραμμή μεταξύ ομάδων που σχηματίζονται από ετικέτες , , ή
cols - εμφανίζεται η γραμμή μεταξύ των στηλών
κανένα - όλα τα σύνορα είναι κρυμμένα
σειρές - σχεδιάζεται ένα περίγραμμα μεταξύ των σειρών του πίνακα που δημιουργούνται μέσω της ετικέτας

Ιδιότητες και Ιδιότητες

1. Ιδιότητα align="parameter" - ορίζει τη στοίχιση ενός μεμονωμένου κελιού πίνακα. Μπορεί να λάβει τις ακόλουθες τιμές:

αριστερή - αριστερή στοίχιση
ευθυγράμμιση κέντρου - κέντρου
δεξιά - δεξιά στοίχιση

2. Ιδιότητα background="URL" - ορίζει την εικόνα φόντου του κελιού. Αντί για τη διεύθυνση URL, θα πρέπει να γραφτεί η διεύθυνση της εικόνας φόντου.

3. Ιδιότητα bgcolor="color" - ορίζει το χρώμα φόντου του κελιού.

4. Ιδιότητα bordercolor="color" - ορίζει το χρώμα του περιγράμματος του κελιού.

5. Ιδιότητα char="letter" - καθορίζει το γράμμα από το οποίο πρέπει να γίνει η στοίχιση. Η τιμή του χαρακτηριστικού align πρέπει να οριστεί σε char.

6. Ιδιότητα colspan="number" - ορίζει τον αριθμό των οριζόντιων κελιών που θα συγχωνευθούν.

7. Ιδιότητα height="number" - ορίζει το ύψος του πίνακα: είτε σε pixel είτε ως ποσοστό.

8. Ιδιότητα width="number" - ορίζει το πλάτος του πίνακα: είτε σε pixel είτε ως ποσοστό.

9. Ιδιότητα rowspan="number" - ορίζει τον αριθμό των κάθετων κελιών που θα συγχωνευθούν.

10. Ιδιότητα valign="parameter" - κάθετη στοίχιση των περιεχομένων του κελιού.

επάνω - ευθυγραμμίστε τα περιεχόμενα του κελιού στην επάνω άκρη της σειράς
μεσαία - μέση ευθυγράμμιση
κάτω - ευθυγράμμιση στο κάτω άκρο
γραμμή βάσης - ευθυγράμμιση με τη γραμμή βάσης

Σημείωση 1

Για ετικέτα

. Παράμετροι για μία ετικέτα

μέσα του

Πώς να αποτρέψετε τη συγκόλληση των περιγραμμάτων κελιών σε έναν πίνακα

Εάν χρησιμοποιείτε περίγραμμα (περιγράμματα κελιού) και μηδενική γέμιση μεταξύ των κελιών, αυτά εξακολουθούν να είναι κολλημένα μεταξύ τους και θα έχετε ένα διπλό περίγραμμα . Για να το αποφύγετε αυτό, πρέπει να καθορίσετε το περίγραμμα σύμπτυξης: σύμπτυξη στα στυλ πίνακα:

...

Αγαπητέ αναγνώστη, τώρα έμαθες πολλά περισσότερα για την ετικέτα πίνακα html. Τώρα σας συμβουλεύω να προχωρήσετε στο επόμενο μάθημα.