Αποτέλεσμα:

Οι τιμές καθορίζονται σε pixel (px) ή ποσοστά (%)

○ Ευθυγράμμιση περιεχομένου σε πίνακα HTML

Για να ευθυγραμμίσετε το περιεχόμενο σε έναν πίνακα HTML, χρησιμοποιήστε την ετικέτα to Χαρακτηριστικό ευθυγραμμίζωκαι "valign" :

ΕΥΘΥΓΡΑΜΜΙΖΩ– οριζόντια στοίχιση του περιεχομένου στον πίνακα.
Αξίες:

• αριστερά - σπρώξτε το περιεχόμενο προς τα αριστερά (Προκαθορισμένο);
• κέντρο – που στο κέντρο?
• σωστά - σπρώξτε το περιεχόμενο στη δεξιά πλευρά

VALIGN- κατακόρυφη στοίχιση των περιεχομένων στον πίνακα.
Αξίες:

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

Αποτέλεσμα:

○ Πώς να κεντράρετε τον πίνακα html

Για να ευθυγραμμίσετε το τραπέζι στο κέντρο, πρέπει να τυλίξετε το τραπέζι με μια ετικέτα

Πρόσθετες και κύριες ετικέτες για τον πίνακα

Αποτέλεσμα:

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

Προηγούμενη ανάρτηση
Επόμενη ανάρτηση

Κεφάλαιο 4

Πίνακες σε HTML

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

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

ΚΑΙ

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

Ρύζι . 4.1. Τυπικό παράδειγμα πίνακα HTML

Ρύζι . 4.2. Παράδειγμα πίνακα χωρίς περιθώρια

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

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

Η περιγραφή των πινάκων πρέπει να βρίσκεται μέσα στην ενότητα του εγγράφου . Ένα έγγραφο μπορεί να περιέχει έναν αυθαίρετο αριθμό πινάκων και οι πίνακες μπορούν να είναι ένθετοι ο ένας μέσα στον άλλο. Κάθε πίνακας πρέπει να ξεκινά με την ετικέτα

Κάθε γραμμή ξεκινά με μια ετικέτα (Σειρά πίνακα) και τελειώνει με την ετικέτα. Ένα μεμονωμένο κελί στη σειρά πλαισιώνεται από ένα ζεύγος ετικετών και(Στοιχεία πίνακα) ή και(κεφαλίδα πίνακα). Ετικέτα συνήθως χρησιμοποιείται για κελιά κεφαλίδας ενός πίνακα και - για κελιά δεδομένων. Η διαφορά στη χρήση είναι μόνο στον τύπο της γραμματοσειράς που χρησιμοποιείται από προεπιλογή για την εμφάνιση των περιεχομένων των κελιών, καθώς και τη θέση των δεδομένων μέσα στο κελί. Τύπος περιεχομένου κελιού εμφανίζεται με έντονη γραφή και στο κέντρο (ALIGN=CENTER, VALIGN=MIDDLE). Κελιά που ορίζονται από ετικέτα από προεπιλογή, εμφανίστε δεδομένα στοιχισμένα προς τα αριστερά (ALIGN=LEFT) και στη μέση (VALIGN=MIDDLE) στην κατακόρυφη κατεύθυνση.

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

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

Ένας πίνακας μπορεί να έχει έναν τίτλο που περικλείεται σε ένα ζευγάρι ετικετών και. Η περιγραφή της κεφαλίδας του πίνακα πρέπει να τοποθετηθεί μέσα στις ετικέτες

Από προεπιλογή, το κείμενο της κεφαλίδας του πίνακα τοποθετείται πάνω από αυτό (ALIGN=TOP) και κεντράρεται στην οριζόντια κατεύθυνση.

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

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

Ρύζι. 4.Ζ.Ένα παράδειγμα απλού πίνακα

Αναπαράσταση πινάκων σε σελίδα

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

Κεφαλίδα πίνακα

Ετικέτα κεφαλίδας πίνακα έχει μια μόνο έγκυρη παράμετρο, ALIGN, η οποία παίρνει τις τιμές TOP (κεφαλίδα πάνω από τον πίνακα) ή BOTTOM (κεφαλίδα κάτω από τον πίνακα). Η παράμετρος ALIGN μπορεί να παραλειφθεί, η οποία αντιστοιχεί στην τιμή ALIGN=TOP. Στην οριζόντια κατεύθυνση, η κεφαλίδα του πίνακα είναι πάντα κεντραρισμένη. Ο πίνακας μπορεί να μην έχει τίτλο. Στις περισσότερες περιπτώσεις, το απλό κείμενο χρησιμοποιείται ως κεφαλίδα πίνακα, η οποία ρυθμίζεται από την προδιαγραφή HTML, αλλά στην πραγματικότητα, μεταξύ των ετικετών καιΕπιτρέπεται η εγγραφή οποιωνδήποτε στοιχείων HTML που χρησιμοποιούνται στην ενότητα . Ακολουθεί ένα παράδειγμα καταχώρισης κεφαλίδας πίνακα:

Κατευθύνεται στο κάτω μέρος του τραπεζιού

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

Ρύζι. 4.4.Πίνακας με κεφαλίδα

Το πρόγραμμα περιήγησης Microsoft Internet Explorer παρέχει πρόσθετες επιλογές για την επιλογή της θέσης της κεφαλίδας. Η παράμετρος ALIGN δέχεται ΑΡΙΣΤΕΡΑ, ΚΕΝΤΡΟ και ΔΕΞΙΑ για οριζόντια στοίχιση μαζί με τις τιμές που περιγράφονται παραπάνω. Σημειώστε ότι αυτή είναι μια από τις σπάνιες περιπτώσεις όπου η ευρέως χρησιμοποιούμενη παράμετρος ALIGN μπορεί να χρησιμοποιηθεί τόσο για οριζόντια όσο και για κάθετη στοίχιση. Για παράδειγμα, η καταχώρηση ALIGN=RIGHT θα παρέχει μια επικεφαλίδα που βρίσκεται στο ίδιο επίπεδο στη δεξιά πλευρά και τοποθετείται πάνω από τον πίνακα. Εάν γράψετε ALIGN=BOTTOM, τότε ακριβώς όπως στο παραπάνω παράδειγμα, η κεφαλίδα θα βρίσκεται κάτω από τον πίνακα. Ωστόσο, η διπλή χρήση στην ίδια κεφαλίδα παραμέτρου ALIGN δεν επιτρέπεται. Επομένως, εισάγεται επιπλέον μια ειδική παράμετρος για την κατακόρυφη στοίχιση - VALIGN, η οποία παίρνει τις τιμές TOP ή BOTTOM. Για παράδειγμα, για μια επικεφαλίδα που τοποθετείται στο κάτω μέρος ενός πίνακα με αριστερή στοίχιση, η περιγραφή είναι η εξής:

Στοίχιση προς τα κάτω, αριστερή στοίχιση

Ένας πίνακας με αυτήν την περιγραφή τίτλου στον Microsoft Internet Explorer θα εμφανιστεί ως εξής (Εικ. 4.5). Εάν αυτό το παράδειγμα προβάλλεται στο Netscape, τότε ο τίτλος θα τοποθετηθεί από προεπιλογή, δηλαδή πάνω από τον πίνακα και στη μέση στην οριζόντια κατεύθυνση.

Ρύζι. 4.5.Οριζόντια στοίχιση κεφαλίδας πίνακα στον Microsoft Internet Explorer

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

Επιλογές ετικέτας

Η κύρια ετικέτα που χρησιμοποιείται κατά τη δημιουργία πινάκων είναι η ετικέτα

Παράμετρος BORDER

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

Για να προσθέσετε πλαίσια στον πίνακα, πρέπει να συμπεριλάβετε τον κώδικα

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

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

Ένα παράδειγμα πίνακα με περίγραμμα πάχους 10 εικονοστοιχείων φαίνεται στο σχ. 4.6.

Ρύζι. 4.6.Πίνακας με περίγραμμα πάχους 10 px

Η προδιαγραφή HTML 3.0 δεν περιελάμβανε τιμή για την παράμετρο BORDER. Αυτό γίνεται μόνο σε HTML 3.2. Έτσι, συγκεκριμένα, οι πρώιμες εκδόσεις του Microsoft Internet Explorer δεν επέτρεπαν τον καθορισμό μιας αριθμητικής τιμής.

Σημειώστε ότι εάν δεν υπάρχει παράμετρος BORDER, δεν σχεδιάζονται όρια, αλλά αφήνεται χώρος για αυτά (αυτό ισχύει μόνο για το Netscape). Το συνολικό μέγεθος του πίνακα σε περίπτωση απουσίας της παραμέτρου BORDER ή της παρουσίας της δεν αλλάζει (η εξαίρεση είναι η περίπτωση της ρύθμισης BORDER=0). Έτσι, η ελάχιστη απόσταση μεταξύ δύο γειτονικών κελιών σε αυτές τις περιπτώσεις θα είναι ίση με το διπλάσιο του πάχους του πλαισίου, δηλαδή δύο pixel. Είναι δυνατό να τακτοποιήσετε τα κελιά όσο το δυνατόν πιο κοντά το ένα στο άλλο ορίζοντας BORDER=0, που σημαίνει ότι δεν υπάρχουν σύνορα. Ορισμένα προγράμματα περιήγησης ενδέχεται να μην υποστηρίζουν τον καθορισμό μιας αριθμητικής τιμής για την παράμετρο BORDER, οπότε η τιμή μηδέν θα αγνοηθεί και ο πίνακας θα σχεδιαστεί με περιθώρια.

Ορίστε μερικά παραδείγματα:

Και τα τρία αυτά παραδείγματα θα αποδοθούν διαφορετικά από το πρόγραμμα περιήγησης Netscape. Σημειώστε ότι αυτή είναι μια μάλλον μοναδική περίπτωση όπου δεν μπορείτε να μιλήσετε για μια προεπιλεγμένη τιμή. Το τρίτο παράδειγμα, όπου η παράμετρος BORDER παραλείπεται, είναι διαφορετικό από οποιοδήποτε παράδειγμα όπου υπάρχει αυτή η παράμετρος. Για τον Microsoft Internet Explorer, το δεύτερο και το τρίτο παράδειγμα είναι πανομοιότυπα, επομένως η προεπιλεγμένη τιμή της παραμέτρου BORDER είναι μηδέν για αυτό το πρόγραμμα περιήγησης.

Παράμετρος CELLSPACING

Μορφή σημειογραφίας παραμέτρου: CELLSPACING=num, όπου num είναι η αριθμητική τιμή της παραμέτρου σε pixel, η οποία δεν μπορεί να παραλειφθεί. Η τιμή num καθορίζει την απόσταση μεταξύ γειτονικών κελιών (ακριβέστερα, μεταξύ πλαισίων κελιών) τόσο οριζόντια όσο και κάθετα. Η προεπιλεγμένη τιμή είναι δύο. Σημειώστε ότι παραδοσιακά στα συστήματα δημοσίευσης τα γειτονικά κελιά πίνακα έχουν ένα κοινό περίγραμμα. Στους πίνακες HTML, από προεπιλογή, αφήνεται κενό μεταξύ τους, όπως φαίνεται καθαρά στο παραπάνω σχήμα (Εικόνα 4.6). Όταν οριστεί το CELLSPACING=0, τα πλαίσια των παρακείμενων κελιών θα συγχωνευθούν και θα δημιουργήσουν την εντύπωση ενός πλέγματος πίνακα (Εικ. 4.7).

Ρύζι. 4.7.Πίνακας με τιμή CELLSPACING=0

Παράμετρος CELLPADDING

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

Στο σχ. Το 4.8 δείχνει ένα παράδειγμα πίνακα με την τιμή CELLPADDING=10.

Ρύζι. 4.8.Πίνακας με τιμή CELLPADDING=10

Η λειτουργία των παραμέτρων CELLPADDING και CELLSPACING είναι πολύ παρόμοια μεταξύ τους. Για έναν πίνακα χωρίς περιθώρια, η αλλαγή της μίας ή της άλλης παραμέτρου οδηγεί στο ίδιο αποτέλεσμα. Και οι δύο επιλογές επηρεάζουν τις αντίστοιχες μετατοπίσεις τόσο οριζόντια όσο και κάθετα. Δυστυχώς, ο ξεχωριστός έλεγχος των οριζόντιων και κάθετων περιθωρίων, όπως γίνεται, για παράδειγμα, για τα περιθώρια από εικόνες (παράμετροι HSPACE και VSPACE της ετικέτας ), δεν παρέχεται.

Και οι τρεις παράμετροι - BORDER, CELLPADDING και CELLSPACING ενεργούν ανεξάρτητα η μία από την άλλη, εάν κάποια από αυτές παραληφθεί, τότε λαμβάνεται η προεπιλεγμένη τιμή της. Συγκεκριμένα, εάν παραληφθούν όλες οι παραπάνω παράμετροι, τότε η ελάχιστη απόσταση μεταξύ δεδομένων από γειτονικά κελιά θα είναι 6 pixel (για το Netscape). Αυτή η τιμή είναι το άθροισμα δύο pixel για το CELLSPACING, ενός pixel για το CELLPADDING και ενός pixel για το περίγραμμα κάθε κελιού. Ο πιο συμπαγής πίνακας θα ληφθεί καθορίζοντας την ακόλουθη περιγραφή:

Μόνο σε αυτήν την πραγματοποίηση, τα κύτταρα θα βρίσκονται το ένα κοντά στο άλλο. Ένα παράδειγμα χρήσης θα ήταν ένας πίνακας όπου όλα τα κελιά περιέχουν εικόνες του ίδιου μεγέθους που πρέπει να τοποθετηθούν η μία δίπλα στην άλλη.

Παράμετροι WIDTH και HEIGHT

Όταν εμφανίζονται πίνακες, το πλάτος και το ύψος τους υπολογίζονται αυτόματα από το πρόγραμμα περιήγησης και εξαρτώνται από πολλούς παράγοντες: τις τιμές των παραμέτρων που καθορίζονται στην περιγραφή ολόκληρου του εγγράφου, αυτόν τον πίνακα, τις μεμονωμένες σειρές και τα κελιά του, τα περιεχόμενα του κελιά, καθώς και οι παράμετροι που καθορίζονται κατά την προβολή του εγγράφου σε ένα συγκεκριμένο πρόγραμμα περιήγησης, για παράδειγμα, τύπος και μέγεθος γραμματοσειράς, μέγεθος θύρας προβολής κ.λπ. Κατά την εμφάνιση, τα μεγέθη του πίνακα υπολογίζονται αυτόματα, λαμβάνοντας υπόψη αυτούς τους παράγοντες, ενώ γίνεται προσπάθεια για να παρουσιάσετε τον πίνακα με την πιο βολική μορφή - τακτοποιήστε τον πίνακα έτσι ώστε να χωράει στη θύρα προβολής. Το γενικό σχήμα για την προβολή μεγάλων εγγράφων, κατά κανόνα, περιορίζεται σε μια γραμμική κύλιση των περιεχομένων του εγγράφου κατακόρυφα και στην ανάγνωση κειμένου διάσπαρτων με διάφορους πίνακες, εικόνες κ.λπ. Αυτό ισχύει τόσο για έγγραφα HTML όσο και για συνηθισμένα έγγραφα που δημιουργούνται σε οποιοδήποτε κείμενο συντάκτες . Τα περισσότερα προγράμματα επεξεργασίας κειμένου (όπως το Microsoft Word) και τα προγράμματα περιήγησης HTML μορφοποιούν αυτόματα το κείμενο έτσι (αν είναι δυνατόν) ώστε το μήκος των γραμμών να μην υπερβαίνει το πλάτος της θύρας προβολής. Αυτό αποφεύγει την ανάγκη οριζόντιας κύλισης του εγγράφου. Παρόμοιες ενέργειες πραγματοποιούνται από προγράμματα περιήγησης με πίνακες - εάν είναι δυνατόν, μορφοποιήστε τους με τέτοιο τρόπο ώστε το πλάτος του πίνακα να μην υπερβαίνει το πλάτος της θύρας προβολής. Μπορούμε να συμπεράνουμε ότι το πλάτος των τραπεζιών είναι μια πιο σημαντική, πρωταρχική παράμετρος, ο υπολογισμός της οποίας πραγματοποιείται πρώτα απ 'όλα σε σύγκριση με το ύψος.

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

Παρόμοιες παράμετροι μπορούν να οριστούν για μεμονωμένα κελιά. Σημειώστε ότι ο ορισμός μιας συγκεκριμένης τιμής παραμέτρου, για παράδειγμα WIDTH=200, δεν σημαίνει ότι ο πίνακας θα έχει το καθορισμένο πλάτος σε καμία περίπτωση, αλλά καθορίζει μόνο το συνιστώμενο πλάτος, το οποίο θα διατηρηθεί όσο το δυνατόν περισσότερο. Ας το εξηγήσουμε αυτό με παραδείγματα. Ας υπάρχει ένας πίνακας που, υπό τις δεδομένες συνθήκες, από προεπιλογή θα έχει πλάτος μικρότερο από το καθορισμένο. Σε αυτήν την περίπτωση, το πρόγραμμα περιήγησης θα αυξήσει το πλάτος του πίνακα στο απαιτούμενο πλάτος επεκτείνοντας αναλογικά όλες τις στήλες του πίνακα. Η στένωση της θύρας προβολής δεν θα αλλάξει το πλάτος του πίνακα και ενδέχεται να απαιτείται οριζόντια κύλιση για την προβολή του. Εάν ο πίνακας έχει από προεπιλογή πλάτος μεγαλύτερο από το καθορισμένο, τότε το πρόγραμμα περιήγησης θα προσπαθήσει να μειώσει το πλάτος του, πρώτον, μειώνοντας το πλάτος των μεμονωμένων στηλών για τις οποίες το καθορισμένο πλάτος είναι μεγαλύτερο από το απαραίτητο και, δεύτερον, διαχωρίζοντας το κείμενο σε μεμονωμένα κελιά σε πολλές γραμμές με αύξηση του ύψους του πίνακα. Αυτές οι ενέργειες ενδέχεται να μην παρέχουν το απαιτούμενο μέγεθος πίνακα και, στη συνέχεια, θα έχει το ελάχιστο δυνατό πλάτος. Οι ίδιες ενέργειες γίνονται για πίνακες που δεν έχουν καθορισμένες διαστάσεις όταν περιορίζεται η θύρα προβολής.

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

Παράμετρος ALIGN

Δοσμένη παράμετρος ετικέτας

Ας δώσουμε ένα παράδειγμα πίνακα με κείμενο αναδίπλωσης, η εμφάνιση του οποίου φαίνεται στο σχ. 4.9.

Αυτά τα 43 ονόματα που συναντώνται πιο συχνά καλύπτουν το 92% του δείγματος.

Ρύζι. 4.9.Τραπέζι χωρίς περίγραμμα με κείμενο αναδίπλωσης

Αυτό το έγγραφο αποτελείται από έναν πίνακα χωρίς περιθώρια με τη στοίχιση σε ALIGN=LEFT, που επιτρέπει στο κείμενο που ακολουθεί τον πίνακα να τοποθετηθεί στα δεξιά του. Ο πίνακας αποτελείται από μία μόνο σειρά, η οποία περιέχει δύο κελιά. Κάθε κελί περιέχει μέρος μιας μη ταξινομημένης λίστας

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

Λάθος απόφαση.

Ας δώσουμε ένα ελαφρώς διαφορετικό παράδειγμα για τη δημιουργία μιας παρόμοιας σελίδας, η εμφάνιση της οποίας φαίνεται στο Σχ. 4.10.

Τα πιο συνηθισμένα αντρικά ονόματα

ενήλικος πληθυσμός της Αγίας Πετρούπολης

Άμπραμ Αλέξανδρος Αλεξέι Αλβερτος Ανατόλι Αντρέι Αρκάδι Μπόρις Βαντίμ Βαλεντίνος Valery Βασιλικός Νικητής Βιτάλι Βλαδίμηρος Βλάντισλαβ Βιάτσεσλαβ Γεννάντι Γεώργιος Χέρμαν Γρηγόριος Ντμίτρι

Ευγένιος Yefim Ιβάν Ιγκόρ Ίλια Ιωσήφ Κωνσταντίνου ένα λιοντάρι Λεονίντ Μιχαήλ Νικόλαος Όλεγκ Παύλος Πέτρος μυθιστόρημα Semyon Σεργκέι Ο Στάνισλαβ Εδουάρδος Γιούρι Ιάκωβος

Τα δεδομένα λήφθηκαν με βάση μια ανάλυση αντιπροσωπευτικού δείγματος που περιείχε πληροφορίες για 5.000 άνδρες άνω των 18 ετών που ζουν στην Αγία Πετρούπολη. Αυτά τα 43 πιο κοινά ονόματα καλύπτουν το 92% του δείγματος. Η συχνότητα εμφάνισης καθενός από τα άλλα ονόματα δεν υπερβαίνει το 0,3%



Ρύζι. 4.10.Πίνακας χωρίς περιθώρια που περιέχει τρεις στήλες

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

Μορφοποίηση δεδομένων μέσα σε πίνακα

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

,
,

---

, κωδικοί κεφαλίδων - από

πριν

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

Οι ακόλουθες επιλογές είναι διαθέσιμες για τη μορφοποίηση δεδομένων εντός κελιών πίνακα.

Οι επιλογές στοίχισης περιεχομένου κελιών είναι ALIGN και VALIGN. Μπορεί να χρησιμοποιηθεί σε κωδικούς , και . Η παράμετρος οριζόντιας στοίχισης ALIGN μπορεί να λάβει τις τιμές LEFT, RIGHT και CENTER (η προεπιλογή είναι LEFT για και ΚΕΝΤΡΟ για ). Η παράμετρος κατακόρυφης ευθυγράμμισης VALIGN μπορεί να λάβει τις τιμές TOP (κατά μήκος της κορυφής), BOTTOM (κατά μήκος του κάτω μέρους), MIDDLE (στη μέση), BASELINE (κατά μήκος της γραμμής βάσης). Η προεπιλογή είναι ΜΕΣΗ. Η στοίχιση γραμμής βάσης δεσμεύει το κείμενο μιας γραμμής σε όλα τα κελιά σε μια μόνο γραμμή. Ορίστε τις επιλογές ευθυγράμμισης στο επίπεδο κώδικα καθορίζει τη στοίχιση για όλα τα κελιά της δεδομένης σειράς, ενώ κάθε μεμονωμένο κελί της σειράς μπορεί να έχει τις δικές του παραμέτρους που παρακάμπτουν την επίδραση των παραμέτρων που καθορίζονται στο .

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

Κύτταρο 1	Κύτταρο 2	Κύτταρο 3
Κύτταρο 4	Κύτταρο 5	Κύτταρο 6

Η απόδοση του προγράμματος περιήγησης αυτού του παραδείγματος φαίνεται στο Σχ. 4.11.




Ρύζι. 4.11.Στοίχιση δεδομένων σε κελιά πίνακα

Η επιλογή NOWRAP απενεργοποιεί τη δυνατότητα αυτόματης διάσπασης του κειμένου κελιού σε γραμμές. Μπορεί να χρησιμοποιηθεί σε κωδικούς , και . Η περιττή χρήση αυτής της επιλογής θα πρέπει να αποφεύγεται, καθώς μπορεί να μειώσει σημαντικά τη δυνατότητα δυναμικής αλλαγής μεγέθους των πινάκων και να βλάψει την αντίληψή τους. Στις περισσότερες περιπτώσεις, αρκεί να χρησιμοποιήσετε το NOWRAP για μεμονωμένα κελιά που απαιτούν πραγματικά την απαγόρευση αναδίπλωσης λέξεων σε μια νέα γραμμή. Η αναδίπλωση λέξεων πραγματοποιείται μόνο με διαχωριστικά μεταξύ λέξεων (κενά) και σε ορισμένες περιπτώσεις, για να αποτρέψετε αλλαγές κειμένου σε ορισμένα σημεία, αντί για χαρακτήρα διαστήματος, ορίστε τον κωδικό διαστήματος χωρίς διαστήματα (NonBreaking Space). Τα παραδείγματα περιλαμβάνουν περιπτώσεις όπου δεν συνιστάται ένα κενό - μεταξύ μιας αριθμητικής τιμής και των μονάδων μιας δεδομένης ποσότητας. μεταξύ επωνύμου και αρχικών. Άρα, το κείμενο είναι 650 km ή Yeltsin B.N. συνιστάται να γράψετε στη φόρμα 650 χλμ και Yeltsin B.N.

Οι παράμετροι WIDTH και HEIGHT μπορούν να χρησιμοποιηθούν σε κωδικούς και . Η σύνταξή τους είναι παρόμοια με τη σύνταξη αυτών των παραμέτρων για την ετικέτα

. Η τιμή τους καθορίζει το πλάτος ή το ύψος του κελιού για το οποίο έχουν γραφτεί αυτές οι παράμετροι. Οι τιμές μπορούν να καθοριστούν σε pixel ή ως ποσοστό του μεγέθους ολόκληρου του πίνακα. Ο Microsoft Internet Explorer επιτρέπει μόνο τον ορισμό της τιμής WIDTH σε pixel. Δεδομένου ότι ο πίνακας είναι μια συνδεδεμένη δομή που αποτελείται από σειρές και στήλες, η ρύθμιση του πλάτους για οποιοδήποτε κελί επηρεάζει το πλάτος ολόκληρης της στήλης στην οποία βρίσκεται το κελί και η ρύθμιση του ύψους επηρεάζει ολόκληρη τη γραμμή. Εάν μια τιμή πλάτους στήλης έχει καθοριστεί μόνο σε ένα κελί, τότε αυτή η τιμή γίνεται το πλάτος ολόκληρης της στήλης. Εάν υπάρχουν πολλές τέτοιες ενδείξεις, τότε επιλέγεται η μέγιστη τιμή. Οι ίδιες ιδιότητες ισχύουν για τις συμβολοσειρές.

Οι σύνθετοι πίνακες χαρακτηρίζονται από την ανάγκη συγχώνευσης πολλών γειτονικών κελιών οριζόντια ή κάθετα σε ένα. Αυτή η δυνατότητα υλοποιείται χρησιμοποιώντας τις παραμέτρους COLSPAN (COLiimn SPANning) και ROWSPAN (ROW SPANning) που καθορίζονται στους κωδικούς

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

Στο σχ. Το 4.17 δείχνει το αποτέλεσμα της υλοποίησης του παραπάνω κώδικα, καθώς και μια παραλλαγή εμφάνισης ενός τέτοιου πίνακα με την καταχώρηση RULES=GROUPS στην ετικέτα

ή

. Σημείωση: COLSPAN=num, όπου num είναι μια αριθμητική τιμή που καθορίζει πόσες στήλες να επεκτείνει το τρέχον κελί οριζόντια. Η χρήση της παραμέτρου ROWSPAN είναι παρόμοια, μόνο εδώ καθορίζετε τον αριθμό των σειρών που το τρέχον κελί πρέπει να εκτείνεται κατακόρυφα. Από προεπιλογή, αυτές οι παράμετροι ορίζονται στην τιμή ενός. Είναι δυνατό να ορίσετε τις τιμές και των δύο παραμέτρων για ένα κελί ταυτόχρονα. Η σωστή ρύθμιση των τιμών αυτών των παραμέτρων μπορεί να μην είναι πολύ απλή εργασία, ειδικά επειδή οι περισσότεροι επεξεργαστές HTML σάς επιτρέπουν να σχεδιάζετε οπτικά με επακόλουθη δημιουργία κωδικών HTML μόνο τους απλούστερους πίνακες. Στο σχ. Το 4.12 δείχνει ένα παράδειγμα εμφάνισης πίνακα, που λαμβάνεται από τον ακόλουθο κώδικα HTML: Κελλί που εκτείνεται σε δύο σειρές Κελλί που εκτείνεται σε δύο στήλες Κύτταρο 3 Κύτταρο 4 Κύτταρο 5 Κύτταρο 6 Κύτταρο 7 Ρύζι. 4.12.Πίνακας με κελιά που εκτείνονται σε πολλές σειρές ή στήλες Η απρόσεκτη ρύθμιση των παραμέτρων εξάπλωσης κυττάρων μπορεί να οδηγήσει σε αμοιβαία επικάλυψη και συγκρούσεις, στις οποίες το αποτέλεσμα είναι απρόβλεπτο. Μια τυπική χρήση εκτεταμένων κελιών είναι μια κοινή επικεφαλίδα για πολλές γειτονικές στήλες ή σειρές. Ακολουθεί ένα παράδειγμα κώδικα HTML (ο οποίος φαίνεται στο Σχήμα 4.13) στον οποίο τα εκτεταμένα κελιά έχουν σχηματιστεί εσφαλμένα. Κύτταρο 1 Κύτταρο 2 Κύτταρο 3 (κοινός Χα τρία γραμμές) Κύτταρο 4 Κύτταρο 5 Κύτταρο 6 Κελί 7 (κατανεμημένο σε δύο στήλες) Ρύζι. 4.13.Αποτέλεσμα λανθασμένου εντοπισμού εκτεταμένων κελιών (επικάλυψη κειμένου) Η παράμετρος BGCOLOR καθορίζει το χρώμα φόντου για ολόκληρο τον πίνακα, μεμονωμένες σειρές ή κελιά. Μπορεί να εμφανίζεται σε ετικέτες , , δεν περιέχει πληροφορίες ή ένα ή περισσότερα κενά που δεν αντιμετωπίζονται ως δεδομένα. Τα κελιά που περιέχουν αόρατα δεδομένα, για παράδειγμα, μπορεί να περιέχουν κώδικα ή κώδικα τροφοδοσίας γραμμής , ή οποιοδήποτε κείμενο του οποίου το χρώμα ταιριάζει με το χρώμα φόντου του κελιού. Εάν τα κελιά που περιέχουν δεδομένα (ακόμα και τα αόρατα) εμφανίζονται με τον ίδιο τρόπο από όλα τα προγράμματα περιήγησης, τότε τα κενά κελιά θα εμφανίζονται διαφορετικά. Το πρόγραμμα περιήγησης Netscape δεν εμφανίζει ένα κενό κελί, δηλαδή το μέρος όπου βρίσκεται αυτό το κελί θα γεμίσει με το χρώμα φόντου της σελίδας και όχι με το χρώμα φόντου του κελιού, σε αντίθεση με τα κελιά που περιέχουν δεδομένα. Δεν σχεδιάζεται περίγραμμα γύρω από άδεια κελιά. Ένα παράδειγμα πίνακα με κενό κελί φαίνεται στην εικ. 4.15. Ρύζι. 4.15.Το κενό κελί πίνακα αποδίδεται διαφορετικά σε διαφορετικά προγράμματα περιήγησης Ο Microsoft Internet Explorer εμφανίζει και τα δύο κελιά στο χρώμα φόντου των κελιών. Ένα πρόγραμμα περιήγησης όπως το NSCA Mosaic επιτρέπει στο χρήστη να προσδιορίσει τη φύση της έκδοσης κενών κελιών στον πίνακα επιλέγοντας τις κατάλληλες επιλογές. Η γνώση τέτοιων χαρακτηριστικών θα σας επιτρέψει να σχεδιάσετε πίνακες που θα εμφανίζονται κατάλληλα, ανεξάρτητα από το πρόγραμμα περιήγησης που θα επιλέξει ο χρήστης. Σε ορισμένες περιπτώσεις, αρκεί να δημιουργήσετε κελιά που περιέχουν έναν μόνο κώδικα αντί για μερικά κενά κελιά. Στοίχιση δεδομένων σε στήλες πίνακα Ένα τυπικό πρόβλημα κατά τη δημιουργία πινάκων είναι ο ορισμός επιλογών στοίχισης για μεμονωμένες γραμμές ή στήλες. Για να ευθυγραμμίσετε τα περιεχόμενα όλων των κελιών της τρέχουσας σειράς, αρκεί να ορίσετε τις απαιτούμενες παραμέτρους στον κώδικα . Συχνότερα, ωστόσο, είναι απαραίτητο να διασφαλίζεται ότι όλα τα στοιχεία της ίδιας στήλης ευθυγραμμίζονται με τον ίδιο τρόπο, επειδή στις περισσότερες περιπτώσεις η στήλη περιέχει ομοιογενή δεδομένα. Σε προηγούμενες εκδόσεις του HTML, προτάθηκε η χρήση της παραμέτρου COLSPEC (COLumn SPECification), η οποία είχε οριστεί στην ετικέτα και . Αυτή η δυνατότητα δεν παρέχεται από την προδιαγραφή HTML, αλλά υποστηρίζεται τόσο από το Netscape όσο και από τον Microsoft Internet Explorer. Η φόρμα συμμετοχής είναι η ίδια με την ετικέτα. , δηλαδή: BGCOLOR=τιμή, όπου η τιμή είναι το περιεχόμενο του χρώματος σε μορφή RGB ή το όνομά του. Παράδειγμα: ή . Ένθετα τραπέζια Τα μεμονωμένα κελιά πίνακα μπορούν να περιέχουν σχεδόν οποιεσδήποτε ετικέτες γλώσσας και δεδομένα που επιτρέπονται στην ενότητα. έγγραφο. Συγκεκριμένα, ένας άλλος πίνακας μπορεί να τοποθετηθεί εξ ολοκλήρου μέσα σε ένα κελί πίνακα. Τέτοιοι πίνακες ονομάζονται ένθετοι. Οι κανόνες για την κατασκευή τους δεν διαφέρουν από την κατασκευή των πινάκων και δεν χρειάζονται ξεχωριστή περιγραφή. Σημειώνουμε μόνο ότι δεν εμφανίζουν σωστά όλα τα προγράμματα περιήγησης που υποστηρίζουν πίνακες σύνθετους πίνακες με πολλά επίπεδα ένθεσης, επομένως η χρήση τους απαιτεί προσοχή. Ακολουθεί ένα παράδειγμα πίνακα που χρησιμοποιεί ένα επίπεδο ένθεσης. Πόλεις της περιοχής του Λένινγκραντ H - πληθυσμός της πόλης (χιλιάδες κάτοικοι, 1992) P - απόσταση από την Αγία Πετρούπολη (χλμ) Πόλεις που υπάγονται στην Αγία Πετρούπολη Πόλη H Π Zelenogorsk 13.6 50 Κολπίνο 144.6 26 Κρονστάνδη 45.2 48 Λομονόσοφ 42.0 40 Παβλόφσκ 25.4 30 Petrodvorets 83.8 29 Πούσκιν 95.1 24 Σεστρορέτσκ 34.9 35 Όλες οι πόλεις υποτελείς διαχείριση Πετρούπολη, έχουν άμεση αστική αριθμοί τηλεφώνου. Πόλεις περιφερειακής υπαγωγής Πόλη H Π Boksitogorsk 21.6 ALIGN=RIGHT>245 Βόλχοφ 50.3 ALIGN=RIGHT>122 Βσεβολόζσκ 32.9 24 Βίμποργκ 80.9 130 Βισότσκ 1.0 ALIGN=RIGHT>159 Γκάτσινα 80.9 46 Ivangorod 11.9 ALIGN=RIGHT>147 Kamennogorsk 5.9 157 Kingisepp 51.5 ALIGN=RIGHT>138 Κιρίσι 53.8 ALIGN=RIGHT>115 Κίροφσκ 23.8 55 Lodeynoye Pole 27.3 ALIGN=RIGHT>244 Λύγα 41.8 139 (Συνέχεια πίνακα) Πόλη H Π Luban 4.7 85 Νοβάγια Λαντόγκα 11.2 ALIGN=RIGHT>141 Otradnoe 22. 9 ALIGN=RIGHT>40 Πικάλεβο 25.1 ALIGN=RIGHT>246 Υπόγειος 23.1 285 Primorsk 6.7 137 Priozersk 20.5 ALIGN=RIGHT>145 Σβετογόρσκ 15.8 ALIGN=RIGHT>201 Πλάκες 42.6 ALIGN=RIGHT>192 Pinery 57.6 81 Tikhvin 72.0 ALIGN=RIGHT>200 Tosno 33.8 53 Σλίσελμπουργκ 12.5 64 Ρύζι. 4.14.Παράδειγμα ένθετων τραπεζιών Το αποτέλεσμα εμφάνισης αυτού του παραδείγματος φαίνεται στην εικ. 4.14. Με την πρώτη ματιά, φαίνεται ότι δεν υπάρχει ένθεση τραπεζιών στο παράδειγμα. Στην πραγματικότητα, ολόκληρο το έγγραφο είναι ένας πίνακας χωρίς περίγραμμα που αποτελείται από μια κεφαλίδα και μια μόνο σειρά που περιέχει πέντε κελιά. Η οργάνωση ενός τέτοιου πίνακα εξυπηρετεί τον μοναδικό σκοπό της τακτοποίησης των δεδομένων στη σελίδα. Μέσα στο πρώτο κελί υπάρχει ένας άλλος πίνακας που έχει τη δική του κεφαλίδα και αποτελείται από τρεις στήλες, ακολουθούμενες από κείμενο στοιχισμένο στη μέση. Το τρίτο και το πέμπτο κελί περιέχουν επίσης ξεχωριστούς πίνακες. Το δεύτερο και το τέταρτο κελί είναι κενά, δεν περιέχουν δεδομένα και έχουν μία παράμετρο WIDTH που καθορίζει το πλάτος του. Σκοπός τους είναι να ορίσουν την εσοχή μεταξύ του πρώτου και του τρίτου, καθώς και του τρίτου και του πέμπτου κελιού στα οποία βρίσκονται οι πίνακες. Αυτή είναι μια από τις πιθανές επιλογές για τη ρύθμιση μιας τέτοιας εσοχής. Μια άλλη επιλογή είναι να χρησιμοποιήσετε την παράμετρο CELLSPACING, η οποία καθορίζει την απόσταση μεταξύ των κελιών, αλλά αυτή η παράμετρος ορίζει τις εσοχές τόσο οριζόντια όσο και κάθετα, κάτι που δεν απαιτείται αυτή τη στιγμή. Επιπλέον, ένα κενό κελί με δεδομένο πλάτος θα συρρικνωθεί όταν η θύρα προβολής περιορίζεται, σε αντίθεση με τον χώρο που καθορίζεται από την παράμετρο CELLSPACING (καθώς και το CELLPADDING). Για αυτό το παράδειγμα, δοκιμάστε να μειώσετε το πλάτος της θύρας προβολής του προγράμματος περιήγησης ή, με το ίδιο αποτέλεσμα, να αυξήσετε το μέγεθος της γραμματοσειράς στην οποία εμφανίζεται το κείμενο. Η απόσταση μεταξύ των πινάκων θα μειωθεί στο μηδέν, καθιστώντας δυνατή την ταυτόχρονη προβολή όλων των πληροφοριών για όσο το δυνατόν μεγαλύτερο χρονικό διάστημα, ωστόσο, μια περαιτέρω αλλαγή δεν θα βλάψει τον πίνακα, αλλά θα επιτρέψει την οριζόντια κύλιση. Σύμφωνα με ένα παρόμοιο σχήμα, μπορείτε να οργανώσετε την τοποθέτηση πληροφοριών, που αποτελούνται όχι μόνο από πίνακες, αλλά και εικόνες, θραύσματα κειμένου κ.λπ. Χαρακτηριστικά της κατασκευής τραπεζιών Αυτή η ενότητα εξετάζει ορισμένα συγκεκριμένα χαρακτηριστικά μεμονωμένων προγραμμάτων περιήγησης, καθώς και ορισμένες λεπτές αποχρώσεις της δημιουργίας και της εμφάνισης πινάκων. Εμφάνιση κενών κελιών σε πίνακες Ένα από τα χαρακτηριστικά της παρουσίασης πινάκων από διαφορετικά προγράμματα περιήγησης είναι η εμφάνιση κενών κελιών. Σύμφωνα με την περιγραφή της γλώσσας, όλα τα προγράμματα περιήγησης πρέπει να συμπληρώνουν τις γραμμές με άδεια κελιά εάν ο αριθμός τους είναι μικρότερος σε οποιαδήποτε γραμμή από ό,τι στις υπόλοιπες γραμμές. Επιπλέον, μπορεί να υπάρχουν κελιά οπουδήποτε στον πίνακα που δεν περιέχουν δεδομένα. Υπάρχει διαφορά μεταξύ κενών κελιών και κελιών που περιέχουν αόρατα δεδομένα. Σε κενά κελιά μέσα σε ένα ζευγάρι ετικετών και και όρισε τη στοίχιση και το πλάτος κάθε στήλης πίνακα. Για παράδειγμα, η ρύθμιση colspec="L40 R50 C80" ορίζεται για τρεις στήλες της στοίχισης δεδομένων πίνακα στα κελιά: για την πρώτη στήλη - ΑΡΙΣΤΕΡΑ, για τη δεύτερη - ΔΕΞΙΑ και για την τρίτη - CENTER, καθώς και το πλάτος κάθε στήλης . Καθώς η γλώσσα HTML έχει εξελιχθεί, αυτή έχει καταργηθεί και επί του παρόντος δεν αποτελεί μέρος της προδιαγραφής γλώσσας και δεν υποστηρίζεται από τα περισσότερα προγράμματα περιήγησης. Ως αποτέλεσμα, το Netscape Navigator δεν διαθέτει ειδικά εργαλεία για την επίλυση αυτού του προβλήματος και η μόνη επιλογή είναι είτε να χρησιμοποιήσετε την προεπιλεγμένη στοίχιση είτε να ορίσετε τις κατάλληλες τιμές σε κάθε κελί όπου χρειάζεται. Ο Microsoft Internet Explorer παρέχει ειδικές ετικέτες - και . Αυτές οι ετικέτες πρέπει να εμφανίζονται αμέσως μετά την περιγραφή. πριν από την πρώτη εμφάνιση της ετικέτας . Επιλογές ετικέτας και μπορεί να είναι το SPAN, το οποίο καθορίζει τον αριθμό των παρακείμενων στηλών που επηρεάζονται από τις τιμές των παραμέτρων και το ALIGN, το οποίο καθορίζει την οριζόντια στοίχιση των δεδομένων σε όλα τα κελιά της αντίστοιχης στήλης (ή στηλών). Οι έγκυρες τιμές για την παράμετρο ALIGN είναι LEFT, RIGHT και CENTER. Για την παράμετρο SPAN, η προεπιλεγμένη τιμή είναι μία. Ετικέτα Επιπλέον, σας επιτρέπει να ορίσετε την παράμετρο VALIGN, η οποία καθορίζει την κατακόρυφη στοίχιση των δεδομένων στα κελιά. Οι έγκυρες τιμές για την παράμετρο VALIGN είναι MIDDLE, TOP και BOTTOM. Η διαφορά μεταξύ των ετικετών και είναι ότι το πρώτο από αυτά, εκτός από τον ορισμό παραμέτρων στοίχισης δεδομένων για στήλες, εκτελεί επίσης μια υπό όρους ένωση πολλών στηλών σε μια ομάδα. Η επίδραση αυτής της συνάθροισης εμφανίζεται όταν χρησιμοποιείται η παράμετρος RULES, η οποία περιγράφεται παρακάτω. Από προεπιλογή, όλες οι στήλες σε έναν πίνακα αντιμετωπίζονται ως μία ομάδα. Ετικέτα θα πρέπει να χρησιμοποιείται μόνο για τον προσδιορισμό της στοίχισης των δεδομένων σε μεμονωμένες στήλες σε μια ομάδα. Ας πάρουμε ένα παράδειγμα. Ας υποθέσουμε ότι είναι απαραίτητο να δημιουργηθεί ένας πίνακας που περιέχει 6 στήλες και τα δεδομένα στις τρεις πρώτες από αυτές να είναι στοιχισμένα δεξιά και οι επόμενες τρεις να βρίσκονται στη μέση. Για να λύσετε αυτό το πρόβλημα, γράψτε το ακόλουθο κομμάτι κώδικα HTML: (στοιχεία για πίνακα) Το αποτέλεσμα της εμφάνισης αυτού του κωδικού φαίνεται στο Σχ. 4.16. Ρύζι. 4.16.Πίνακας με διαφορετικές επιλογές στοίχισης για δεδομένα σε ομάδες κελιών Ενα άλλο παράδειγμα. Ας υποθέσουμε ότι στον προηγούμενο πίνακα, οι δύο πρώτες στήλες πρέπει να ευθυγραμμιστούν προς τα δεξιά και η τρίτη - στη μέση, και και οι τρεις στήλες πρέπει να συνδυαστούν σε μια ομάδα. Οι επόμενες τρεις στήλες πρέπει επίσης να ομαδοποιηθούν και να έχουν την ίδια στοίχιση με την πρώτη ομάδα. Για να λύσετε αυτό το πρόβλημα, γράψτε το ακόλουθο κομμάτι κώδικα HTML: (στοιχεία για πίνακα) Σε αυτό το παράδειγμα, μετά την ετικέτα

, από το οποίο φαίνεται η έννοια της ομαδοποίησης.

Συμβουλή

Από το πεδίο εφαρμογής των ετικετών

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




Ρύζι. 4.17.Πίνακας με ομαδοποιημένες στήλες

Ρύθμιση του χρώματος των περιγραμμάτων του πίνακα

Μερικές ακόμη επιλογές, ειδικά μόνο για τον Microsoft Internet Explorer, σας επιτρέπουν να επιλέξετε το χρώμα των περιγραμμάτων του πίνακα - BORDERCOLOR, BORDERCOLORLIGHT και BORDERCOLORDARK. Αυτές οι παράμετροι μπορούν να οριστούν σε ετικέτες

, . Το όνομα του χρώματος ή η δεκαεξαδική του τιμή μπορεί να χρησιμοποιηθεί ως τιμή αυτών των παραμέτρων. Η παράμετρος BORDERCOLOR καθορίζει το χρώμα όλων των στοιχείων περιγράμματος πίνακα, ενώ οι άλλες δύο παράμετροι καθορίζουν το χρώμα των περιγραμμάτων μεμονωμένων στοιχείων, παρακάμπτοντας την τιμή BORDERCOLOR. Η παράμετρος BORDERCOLORLIGHT χρωματίζει την αριστερή και την επάνω ακμή ολόκληρου του πίνακα και τη δεξιά και την κάτω ακμή κάθε κελιού, αντίστοιχα. Η δεύτερη παράμετρος BORDERCOLORDARK καθορίζει τα χρώματα των απέναντι άκρων. Λόγω του συνδυασμού αυτών των παραμέτρων, ο πίνακας θα φαίνεται κάπως ανυψωμένος πάνω από την επιφάνεια της σελίδας ή σε εσοχή. Όλα εξαρτώνται από τον επιλεγμένο συνδυασμό χρωμάτων.

Σημείωση

Το πρόγραμμα περιήγησης Netscape 4.x υποστηρίζει επίσης την επιλογή BORDERCOLOR.

Ορίστε μια εικόνα φόντου για έναν πίνακα

Ο Microsoft Internet Explorer (καθώς και η έκδοση 4.x του Netscape) επιτρέπει τη χρήση της παραμέτρου BACKGROUND, η οποία καθορίζει την εικόνα φόντου για έναν πίνακα, όπως ακριβώς μπορεί να γίνει για ένα ολόκληρο έγγραφο HTML. Αυτή η παράμετρος μπορεί να οριστεί σε ετικέτες

,	και

, , w

Ο Microsoft Internet Explorer σάς επιτρέπει να χρησιμοποιείτε έναν αριθμό νέων ετικετών για τη δομή των πινάκων και τον ευέλικτο έλεγχο της σχεδίασης πλαισίων και γραμμών πλέγματος.

Ετικέτες

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

και	. Ετικέτες δομής πίνακα

και.

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

Ετικέτα μπορεί να εμφανιστεί πολλές φορές στην περιγραφή του πίνακα και απαιτεί τη χρήση μιας ετικέτας τέλους. Αυτή η ετικέτα εκτελεί λογική ομαδοποίηση δεδομένων με τον ίδιο τρόπο όπως η ετικέτα A που ομαδοποιεί γειτονικές στήλες.

Όταν χρησιμοποιείτε νέες ετικέτες, καθίσταται δυνατή η πιο ευέλικτη διαχείριση των πλαισίων και των γραμμών πλέγματος του πίνακα.

Το σχέδιο των πλαισίων γύρω από το τραπέζι ελέγχεται από την παράμετρο ετικέτας FRAME

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

Η παράμετρος FRAME μπορεί να λάβει τις ακόλουθες τιμές:

• BOX ή BORDER - το πλαίσιο τραβιέται και από τις τέσσερις πλευρές
• ΠΑΝΩ ΑΠΟ - μόνο πάνω πλευρά
• ΠΑΡΑΚΑΤΩ - μόνο από την κάτω πλευρά
• HSIDES - σχεδιάστε την κάτω και την επάνω πλευρά
• VSIDES - σχέδιο αριστερή και δεξιά πλευρά
• LHS - μόνο στην αριστερή πλευρά
• RHS - μόνο στη δεξιά πλευρά
• ΚΕΝΟΣ - τραπέζι χωρίς εξωτερικά κουφώματα

Η παράμετρος RULES ελέγχει τη σχεδίαση εσωτερικών γραμμών πλέγματος του πίνακα και μπορεί να λάβει τις ακόλουθες τιμές:

• ΟΛΑ - χαράσσονται όλες οι εσωτερικές γραμμές
• ΟΜΑΔΕΣ - σχεδιάζονται μόνο γραμμές που χωρίζουν ομάδες
• ΣΕΙΡΕΣ - σχεδιάστε γραμμές που χωρίζουν τις γραμμές
• COLS - σχεδιάστε γραμμές που χωρίζουν στήλες
• ΚΑΝΕΝΑΣ - δεν χαράσσονται εσωτερικές γραμμές

Παράδειγμα:

.

Σημείωση

Η σχεδίαση των γραμμών πλέγματος του πίνακα και των πλαισίων θα πραγματοποιηθεί μόνο εάν υπάρχει η παράμετρος ετικέτας BORDER.

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

Ακολουθεί ένα παράδειγμα πλήρους κώδικα HTML που δημιουργεί έναν πίνακα χρησιμοποιώντας τα χαρακτηριστικά που περιγράφονται:

Παράδειγμα ευέλικτου ελέγχου γραμμής
πλέγμα τραπεζιού

Επικεφαλίδα στήλης 1	Επικεφαλίδα στήλης 2	Επικεφαλίδα στήλης 3
Δεδομένα	Δεδομένα	Δεδομένα
Δεδομένα	Δεδομένα	Δεδομένα
Δεδομένα	Δεδομένα	Δεδομένα
Δεδομένα	Δεδομένα	Δεδομένα
Δεδομένα	Δεδομένα	Δεδομένα
Δεδομένα	Δεδομένα	Δεδομένα
Αποτέλεσμα	Αποτέλεσμα	Αποτέλεσμα




Ρύζι. 4.18.Ευέλικτη σχεδίαση γραμμών πλέγματος πίνακα από τον Microsoft Internet Explorer

Σε αυτό το παράδειγμα, η εμφάνιση του οποίου από το πρόγραμμα περιήγησης φαίνεται στο Σχ. 4.18, εμφανίζεται μία από τις πιθανές επιλογές για τον έλεγχο των γραμμών πλέγματος και των πλαισίων γύρω από το τραπέζι. Ένα πλαίσιο πάχους 5 pixel (BORDER=S) σχεδιάζεται γύρω από το τραπέζι, μόνο στην επάνω και στην κάτω πλευρά (FRAME=HSIDES). Οι γραμμές πλέγματος σχεδιάζονται μέσα στον πίνακα για να χωριστούν ομάδες δεδομένων (ΚΑΝΟΝΕΣ=ΟΜΑΔΕΣ). Οι ομάδες δεδομένων ορίζονται, πρώτον, από την παρουσία τριών ετικετών , καθένα από τα οποία δηλώνει μια στήλη μεμονωμένου πίνακαομάδα. Δεύτερον, ετικέτες , και<тгоот>σπάστε επίσης τα δεδομένα του πίνακα σε ομάδες, γεγονός που καθορίζει το σχέδιο των εσωτερικών οριζόντιων γραμμών.

Ορίστε τον αριθμό των στηλών σε έναν πίνακα

Ο Microsoft Internet Explorer (καθώς και η έκδοση 4.x του Netscape) σάς επιτρέπει να καθορίσετε στην ετικέτα

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

Κατακόρυφη ευθυγράμμιση πίνακα

Τελευταία παράμετρος ετικέτας

, το οποίο είναι μοναδικό στον Microsoft Internet Explorer, είναι ένα VALIGN που καθορίζει την κατακόρυφη στοίχιση ενός πίνακα σε σχέση με το κείμενο. Το εφέ του είναι παρόμοιο με την ίδια παράμετρο για τις εικόνες.

Σημείωση

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

• για ετικέτα

η παράμετρος ALIGN μπορεί να πάρει τις τιμές LEFT ή RIGHT, και σημαίνει τη θέση του πίνακα, πιεσμένη στην αριστερή ή τη δεξιά άκρη, αντίστοιχα.

για ετικέτα

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



Λοιπόν, μέσα

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

η παράμετρος ALIGN παίρνει τις τιμές TOP ή BOTTOM και σημαίνει τη θέση της κεφαλίδας του πίνακα πάνω ή κάτω από τον πίνακα.

για ετικέτες

και	η παράμετρος ALIGN λαμβάνει τις τιμές LEFT, RIGHT ή CENTER και σημαίνει τη στοίχιση των περιεχομένων του αντίστοιχου κελιού (ή κελιών) του πίνακα οριζόντια. Εναλλακτικά στην προβολή πίνακα Η υποστήριξη πινάκων έχει γίνει ένα διάχυτο χαρακτηριστικό των προγραμμάτων περιήγησης Ιστού, επομένως απομένει ελάχιστος λόγος για να αποφύγετε τη χρήση τους. Ωστόσο, θα εξετάσουμε πιθανές επιλογές για μια εναλλακτική παρουσίαση δεδομένων που μπορούν να χρησιμοποιηθούν αντί για πίνακες ή επιπλέον αυτών. Μερικοί άλλοι τρόποι που δεν χρησιμοποιούν την έννοια των πινάκων: Χρήση προδιαμορφωμένου κειμένου. Αυτή η μέθοδος χρησιμοποιήθηκε παραδοσιακά σε πρώιμες εκδόσεις της γλώσσας HTML, όταν δεν υπήρχε ακόμη υποστήριξη πίνακα. Η χρήση του δεν έχει χάσει τη συνάφειά του με το παρόν, καθώς τέτοια κείμενα θα εμφανίζονται σωστά από οποιοδήποτε πρόγραμμα περιήγησης, συμπεριλαμβανομένων των αμιγώς κειμένου. Χρησιμοποιώντας μια εικόνα που περιέχει έναν πίνακα. Ο πίνακας μπορεί να δημιουργηθεί με οποιοδήποτε πρόγραμμα επεξεργασίας κειμένου ή ακόμη και να εμφανιστεί με ένα πρόγραμμα περιήγησης στο Web και στη συνέχεια να αποθηκευτεί ως εικόνα σε μία από τις μορφές γραφικών. Αυτή δεν είναι η καλύτερη επιλογή, καθώς χάνει όλη την ευελιξία για δυναμική προσαρμογή της εμφάνισης των πινάκων. Επιπλέον, υπάρχει ανάγκη αποθήκευσης ενός πρόσθετου αρχείου με μια εικόνα, το μέγεθος της οποίας, επιπλέον, κατά κανόνα, θα είναι πολύ μεγαλύτερο από το μέγεθος του κειμένου που περιγράφει τον πίνακα HTML. Ένας πιθανός τομέας εφαρμογής είναι πίνακες αυστηρά καθορισμένων μεγεθών, για τους οποίους η εξάρτηση της εμφάνισής του από οποιουσδήποτε εξωτερικούς παράγοντες (γραμματοσειρές, λειτουργίες προγράμματος περιήγησης κ.λπ.) είναι απαράδεκτη. Χρήση λιστών αντί για πίνακες. Για τις απλούστερες περιπτώσεις, αντί να οργανώνετε πίνακες, είναι πολύ πιθανό να τα βγάλετε πέρα ​​με έναν από τους τύπους λιστών που είναι διαθέσιμοι στη γλώσσα HTML. Προετοιμασία τραπεζιού Για την προετοιμασία πινάκων HTML, μπορούν να χρησιμοποιηθούν οποιοιδήποτε επεξεργαστές, οι περισσότεροι από τους οποίους διαθέτουν εργαλεία για την οπτική δημιουργία πινάκων. Ακολουθεί ένα παράδειγμα προετοιμασίας πίνακα στο πρόγραμμα επεξεργασίας HotDog Professional. Για να δημιουργήσετε έναν πίνακα, απλώς επιλέξτε το στοιχείο Πίνακες από το μενού Εισαγωγή, μετά το οποίο εμφανίζεται το πλαίσιο διαλόγου που φαίνεται στην Εικ. 4.19. Η δημιουργία ενός πίνακα είναι να συμπληρώσετε τα κατάλληλα πεδία στο παράθυρο. Αφού προσδιορίσετε τον αριθμό των σειρών και των στηλών στον πίνακα, μπορείτε να προχωρήσετε στην άμεση πλήρωση των επιμέρους κελιών του πίνακα, τα οποία θα εμφανίζονται στο ίδιο πλαίσιο διαλόγου. Το πλαίσιο διαλόγου έχει ένα κουμπί Προεπισκόπηση, πατώντας το οποίο σας επιτρέπει να προβάλετε τον πίνακα που προκύπτει χρησιμοποιώντας το ενσωματωμένο πρόγραμμα περιήγησης (Εικ. 4.20). Ρύζι. 4.19.Πλαίσιο διαλόγου για τη δημιουργία πινάκων Ρύζι. 4.20.Ο πίνακας εμφανίζεται χρησιμοποιώντας το ενσωματωμένο πρόγραμμα περιήγησης Όταν ολοκληρώσετε την προετοιμασία των δεδομένων για τον πίνακα, κάντε κλικ στο OK. Στη συνέχεια, ο δημιουργημένος κώδικας περιγραφής πίνακα θα εισαχθεί στο επεξεργάσιμο έγγραφο HTML. Για το παράδειγμα που φαίνεται στο σχ. 4.19, θα δημιουργηθεί ο ακόλουθος κώδικας: (μέρος του κώδικα παραλείφθηκε) Κεφαλή τραπεζιού Στήλη 1 Στήλη 2 Στήλη 3 Στήλη 4 1 2 3 4 Ομοίως, αυτή η εργασία επιλύεται χρησιμοποιώντας το στοιχείο Netscape Composer του Netscape Communicator. Στο σχ. Το 4.21 εμφανίζει ένα παράθυρο διαλόγου στο οποίο πρέπει να συμπληρώσετε τα απαιτούμενα πεδία. Για να εισαγάγετε πρόσθετες παραμέτρους ετικέτας παρέχεται το κουμπί Extra HTML. Αφού συμπληρώσετε τα πεδία του πλαισίου διαλόγου, θα πρέπει να κάνετε κλικ στο κουμπί Εφαρμογή και στη συνέχεια θα σας δοθεί η ευκαιρία να συμπληρώσετε τα κελιά του πίνακα (Εικ. 4.22). Ρύζι. 4.21.Πλαίσιο διαλόγου για τη ρύθμιση των επιλογών πίνακα Netscape Composer Ρύζι. 4.22.Αρχική θέση του δρομέα εισόδου σε έναν κενό πίνακα είναι το σώμα του τραπεζιού. Το σώμα αποτελείται από γραμμές και στήλες. Ο πίνακας συμπληρώνεται γραμμή προς γραμμή. Κάθε ετικέτα δημιουργεί μια νέα γραμμή. Επόμενο σε ένθετο χρησιμοποιείται για να περιέχει μια κεφαλίδα ομάδας σε έναν πίνακα ("κεφαλίδα πίνακα", μην συγχέεται με κεφαλίδες). Ετικέτα που χρησιμοποιείται για να περιέχει το «υποσέλιδο» του πίνακα (υποδοχή). Ετικέτα χρησιμοποιείται για να περιέχει το «σώμα» του τραπεζιού (σώμα). Στοιχείο πρέπει να χρησιμοποιείται μόνο μία φορά σε έναν πίνακα στο ακόλουθο πλαίσιο: εντός ενός στοιχείου δημιουργούνται στήλες. Μπορείτε να δημιουργήσετε πολλές στήλες. Σε αυτήν την περίπτωση, πρέπει να παρακολουθείτε τον αριθμό των στηλών σε κάθε γραμμή. Για παράδειγμα, εάν η πρώτη σειρά είχε 5 στήλες, τότε οι ακόλουθες σειρές θα πρέπει επίσης να έχουν 5 στήλες. Διαφορετικά, το τραπέζι θα επιπλέει. Είναι δυνατή η συγχώνευση κελιών. Πώς να φτιάξετε έναν πίνακα σε html Ακολουθεί ένα παράδειγμα, κώδικας html: Παράδειγμα πίνακα Στήλη 1 Στήλη 2 Δώστε προσοχή στο κελί . Χρησιμοποιούμε το ειδικό χαρακτηριστικό colspan για την οριζόντια επέκταση των κελιών. Η αριθμητική του τιμή καθορίζει τον αριθμό των στηλών προς συγχώνευση. Υπάρχει επίσης ένα ανάλογο αυτού του χαρακτηριστικού: tag (κεφαλίδα πίνακα), όπου πρέπει επίσης να γράψετε colspan. Το αποτέλεσμα θα είναι το ίδιο. Αλλά συχνά χρησιμοποιούν ένα κανονικό td. Τώρα ας δούμε αναλυτικά όλα τα χαρακτηριστικά της ετικέτας. . Χαρακτηριστικά και ιδιότητες ετικέτας Για άνοιγμα ετικέτας Μπορείτε να προσθέσετε διάφορα χαρακτηριστικά. 1. Ιδιότητα align="parameter" - ορίζει τη στοίχιση του πίνακα. Μπορεί να λάβει τις ακόλουθες τιμές: Στο παραπάνω παράδειγμα, κεντράραμε τον πίνακα με align="center" . Αυτό το χαρακτηριστικό μπορεί να εφαρμοστεί όχι μόνο στον πίνακα, αλλά και σε μεμονωμένα κελιά πίνακα. . Έτσι, η ευθυγράμμιση θα είναι διαφορετική σε διαφορετικά κελιά. για παράδειγμα , , , ή cols - η γραμμή εμφανίζεται μεταξύ των στηλών κανένα - όλα τα σύνορα είναι κρυμμένα σειρές - το περίγραμμα σχεδιάζεται μεταξύ σειρών πίνακα που δημιουργούνται μέσω της ετικέτας 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" - padding από το πλαίσιο στο περιεχόμενο του κελιού σε pixel. 7. Ιδιότητα cellpacing="number" - απόσταση μεταξύ των κελιών σε pixel. 8. Ιδιότητα cols="number" - ο αριθμός των στηλών. Εάν δεν το ρυθμίσετε, τότε το πρόγραμμα περιήγησης θα καθορίσει τον αριθμό των στηλών. Η μόνη διαφορά είναι ότι ο καθορισμός αυτής της παραμέτρου πιθανότατα θα επιταχύνει τη φόρτωση του πίνακα. 9. Ιδιότητα frame="parameter" - πώς να εμφανίζετε περιγράμματα γύρω από τον πίνακα. Μπορεί να λάβει τις ακόλουθες τιμές: κενό - μην σχεδιάζετε σύνορα περίγραμμα - το περίγραμμα γύρω από το τραπέζι πάνω - το περίγραμμα κατά μήκος της επάνω άκρης του τραπεζιού κάτω - κάτω περίγραμμα του πίνακα hsides - προσθέστε μόνο οριζόντια περιγράμματα (πάνω και κάτω μέρος του πίνακα) vsides - σχεδιάστε μόνο κάθετα περιγράμματα (στα αριστερά και δεξιά του πίνακα) rhs - περίγραμμα μόνο στη δεξιά πλευρά του πίνακα lhs - περίγραμμα μόνο στην αριστερή πλευρά του πίνακα 10. Ιδιότητα height="number" - ορίζει το ύψος του πίνακα: είτε σε pixel είτε ως ποσοστό. 11. Κανόνες ιδιοτήτων="παράμετρος" - πού εμφανίζονται τα περιγράμματα μεταξύ των κελιών. Μπορεί να λάβει τις ακόλουθες τιμές: όλα - σχεδιάζεται μια γραμμή γύρω από κάθε κελί του πίνακα ομάδες - σχεδιάζεται μια γραμμή μεταξύ των ομάδων που σχηματίζονται από τις ετικέτες . Ιδιότητες και ιδιότητες 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="παράμετρος" - κάθετη στοίχιση των περιεχομένων του κελιού. επάνω - ευθυγραμμίστε τα περιεχόμενα του κελιού στην κορυφή της σειράς μεσαία - μέση ευθυγράμμιση Ευθυγράμμιση κάτω - κάτω γραμμή βάσης - ευθυγράμμιση γραμμής βάσης Σημείωση 1 Για ετικέτα . Επιλογές για μια μεμονωμένη ετικέτα μέσα σε αυτό Πώς να αποτρέψετε τη συγκόλληση των περιγραμμάτων των κυττάρων σε έναν πίνακα Στην περίπτωση χρήσης περιγράμματος (περιγράμματος κελιού) και μηδενικής επένδυσης μεταξύ των κελιών, εξακολουθούν να είναι κολλημένα μεταξύ τους και προκύπτει διπλό περίγραμμα. Για να το αποφύγετε αυτό, πρέπει να δώσετε στυλ στον πίνακα με σύμπτυξη περιγράμματος: σύμπτυξη: ... Αγαπητέ αναγνώστη, τώρα έμαθες πολλά περισσότερα για την ετικέτα πίνακα html. Τώρα σας συμβουλεύω να προχωρήσετε στο επόμενο μάθημα. . Κάθε σειρά πίνακα τοποθετείται σε ένα στοιχείο ... . Το κελί κεφαλίδας πίνακα τοποθετείται σε ένα στοιχείο (σε αυτήν την περίπτωση, το περιεχόμενο εμφανίζεται με έντονη γραφή και στο κέντρο). Κάθε κελί δεδομένων πίνακα τοποθετείται σε ένα στοιχείο . Το όνομα του πίνακα, εάν απαιτείται, τοποθετείται μέσα στο στοιχείο (προαιρετικό στοιχείο πίνακα). Εφιστώ την προσοχή σας στο γεγονός ότι εάν σκοπεύετε να χρησιμοποιήσετε αυτό το στοιχείο στον πίνακά σας, τότε πρέπει να ακολουθήσει αμέσως το στοιχείο στο έγγραφο ... ... ... .. . Ας περάσουμε στο πρακτικό μέρος του υπολογιστικού φύλλου: border="1"> στοιχειώδες τραπέζι Επικεφαλίδα κελί 1 Επικεφαλίδα κελί 2 Επικεφαλίδα κελί 3 Κελλί δεδομένων 1 Σειρά 2 Κελλί δεδομένων 2 Σειρά 2 Κελί δεδομένων 3 Γραμμή 2 Κελλί δεδομένων 1 Σειρά 3 Κελί δεδομένων 2 Γραμμή 3 Κελί δεδομένων 3 Γραμμή 3 Σε αυτόν τον πίνακα, για λόγους σαφήνειας, προσθέσαμε το χαρακτηριστικό περίγραμμα (περίγραμμα) με τιμή "1" , το οποίο καθορίζει ότι το περίγραμμα πρέπει να εμφανίζεται γύρω από τα κελιά του πίνακα. Το χαρακτηριστικό border δεν χρησιμοποιείται σχεδόν ποτέ σε HTML, σε αυτήν την περίπτωση η χρήση CSS θα ήταν προτιμότερη και θα παρείχε μεγαλύτερη ευελιξία. Ως μέρος της μελέτης της HTML, θα μάθουμε πώς να σχηματίζουμε σωστά τους πίνακες και όταν μελετάμε CSS 3στο άρθρο "" θα μάθουμε πώς να τα διαμορφώνουμε επαγγελματικά. Το αποτέλεσμα του παραδείγματος μας: Συγχώνευση στηλών Συνδυασμός στηλών σε στοιχεία (κελί δεδομένων) ή (κελί κεφαλίδας) μπορεί να γίνει χρησιμοποιώντας το χαρακτηριστικό colspan (σε αυτήν την περίπτωση, το κελί τεντώνεται προς τα δεξιά κατά έναν δεδομένο αριθμό κελιών). border="1"> στοιχειώδες τραπέζι Επικεφαλίδα κελί 1 Επικεφαλίδα κελί 2 Κελλί δεδομένων 1 Σειρά 2 Κελλί δεδομένων 2 Σειρά 2 Κελί δεδομένων 3 Γραμμή 2 Κελλί δεδομένων 1 Σειρά 3 Κελί δεδομένων 2 Γραμμή 3 Κελί δεδομένων 3 Γραμμή 3 Το αποτέλεσμα του παραδείγματος μας: Συνένωση χορδών Συνένωση χορδών σε στοιχεία ή επιτρέπεται η χρήση του χαρακτηριστικού rowspan (το εύρος των κελιών ορίζεται από πάνω προς τα κάτω και εκτείνεται σε πολλές σειρές - το κελί είναι τεντωμένο προς τα κάτω). border="1"> στοιχειώδες τραπέζι Επικεφαλίδα κελί 1 Επικεφαλίδα κελί 2 rowspan="2">Κελλί δεδομένων 1 Σειρά 2 Κελλί δεδομένων 2 Σειρά 2 Κελί δεδομένων 2 Γραμμή 3 Κελί δεδομένων 2 Γραμμή 3 Κελί δεδομένων 3 Γραμμή 3 Το αποτέλεσμα του παραδείγματος μας: Ιδιότητες στήλης Ένα παράδειγμα χρήσης του χαρακτηριστικού span σε μεμονωμένες στήλες ενός πίνακα: span="2" style="background-color:khaki"> Αίτηση Αρ. Υπηρεσία τιμή, τρίψτε. Σύνολο 31337 Διαβάζοντας δυνατά 1 000 1 000 Το αποτέλεσμα του παραδείγματος μας: Εάν χρειάζεται να δημιουργήσετε στυλ μόνο μίας στήλης, τότε αρκεί να καθορίσετε το χαρακτηριστικό span μέσα στο στοιχείο Αίτηση Αρ. Υπηρεσία τιμή, τρίψτε. προμήθεια, τρίψτε. 31337 Διαβάζοντας δυνατά 1 000 150 Το αποτέλεσμα του παραδείγματος μας: Διαχωρισμός τραπεζιού Οι ακόλουθες ετικέτες HTML χρησιμοποιούνται για να χωρίσουν έναν πίνακα σε μέρη: Ετικέτα (ως θυγατρικό (ένθετο) στοιχείο), εάν υπάρχουν ετικέτες (ορίζει μια ομάδα στηλών σε έναν πίνακα) θα πρέπει να ακολουθήσει μετάαυτά τα στοιχεία, αλλά πριναπό οποιαδήποτε ετικέτα , και . Επιπλέον, το στοιχείο πρέπει να έχει μία ή περισσότερες ετικέτες μέσα (δοχείο για τη δημιουργία συμβολοσειράς). Στοιχεία , και δεν επηρεάζουν την προεπιλεγμένη διάταξη πίνακα. Ωστόσο, με το CSS, μπορείτε να διαμορφώσετε αυτά τα στοιχεία όπως θέλετε. (όνομα πίνακα) και style="background-color:silver"> style="background-color:coral" > style="background-color:khaki"> Υπηρεσία Τιμή Αθροισμα 3 000 Διαβάζοντας δυνατά 1 000 Παίζοντας διάτρητη 2 000 Το αποτέλεσμα του παραδείγματός μας. Καλημέρα σε όλους αγαπημένοι μου φίλοι. Πώς πάει το καλοκαίρι; Ελπίζω να πάνε όλοι καλά. Λοιπόν, σήμερα θα συνεχίσουμε να μελετάμε τα βασικά της html και σήμερα θα είναι πιθανότατα το τελευταίο μάθημα για αυτό το θέμα, γιατί τότε θα βουτήξουμε στο CSS. Οπότε, μιλώντας για html, δεν μπορώ να μην μιλήσω για πίνακες, καθώς είναι επίσης ένα αρκετά σημαντικό θέμα. Πάρε τουλάχιστον το ίδιο wordpress. Από προεπιλογή, αυτός ο κινητήρας δεν μπορεί να δημιουργήσει πίνακα. Χρειάζεστε είτε ένα ειδικό πρόσθετο (πρόσθετο) είτε έναν ειδικό κωδικό προγράμματος (script). Αλλά μπορούμε να κάνουμε ό,τι θέλουμε με απλές ετικέτες. Γενικά, σήμερα θα σας πω πώς να δημιουργήσετε έναν πίνακα σε html, καθώς αυτό μπορεί πραγματικά να σας βοηθήσει πολύ. Θυμάμαι πώς έφτιαξα τους πρώτους μου ιστότοπους χρησιμοποιώντας διάταξη πίνακα, δηλ. η κεφαλίδα, οι πλευρικές γραμμές, το υποσέλιδο και το μπλοκ περιεχομένου ήταν απλώς στοιχεία πίνακα. Το ανέφερα στο άρθρο μου στο . Είναι αλήθεια ότι σήμερα δεν συνηθίζεται πλέον να φτιάχνουμε ιστότοπους χρησιμοποιώντας πίνακες, αλλά αυτό δεν σημαίνει ότι δεν χρειάζονται. Μάλλον το αντίθετο. Το ακόμα καλύτερο είναι ότι δεν χρειάζεται καν να σχεδιάσετε τίποτα. Όλα γίνονται σε ένα κανονικό σημειωματάριο (καλά, ή άλλο, όπως το Σημειωματάριο ++), και αρκετά εύκολα. Γενικά, ας πιάσουμε δουλειά. ετικέτες Εδώ η σήμανση είναι λίγο πιο περίπλοκη από ό,τι σε άλλες ετικέτες, αλλά όλα θυμούνται γρήγορα. Παρακολουθήστε λοιπόν και μην αποσπάτε την προσοχή. Οποιοσδήποτε πίνακας περικλείεται πάντα σε μια ετικέτα ζεύγους . Εκείνοι. αυτά τα σημάδια δίνουν την εντολή ότι ο πίνακας θα βρίσκεται εδώ. Μια ετικέτα ζεύγους τοποθετείται μέσα στον πίνακα

	Μαθηματικά	ρωσική γλώσσα	Ιστορία
Μεντβέντεφ	3	5	5
Smirnov	5	5	5
Σοκόλοφ	3	2	3

Τι κάναμε εδώ; Και φτιάξαμε τέσσερις γραμμές (tr), καθεμία από τις οποίες περιέχει τέσσερις πίνακες (td). Στο πρώτο μπλοκ tr, γράψαμε το όνομα των ακαδημαϊκών κλάδων, ενώ αφήσαμε άδεια την πρώτη στήλη για να μην σπάσουμε τον πίνακα.

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



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

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



Και ας δούμε τι μπορούμε να κάνουμε με αυτό. Όπως είπα, τώρα αυτοί οι τίτλοι είναι κεντραρισμένοι και τονισμένοι. Αυτό προσπαθούσαμε.



Σε γενικές γραμμές, καταλάβαμε κάπως τις ετικέτες. Αν και υπάρχουν και άλλα (μπορείτε να δείτε το htmlbook), αλλά δεν θα εστιάσω σε αυτά.

Γνωρίσματα

Φυσικά, κάτι τέτοιο όπως οι πίνακες δεν μπορεί να κάνει χωρίς ειδικά χαρακτηριστικά, και θα σας δείξω μερικά από αυτά.

σύνορο

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

. Κάντε όπως σας έδειξα στο παρακάτω παράδειγμα, δηλαδή ορίστε την τιμή του χαρακτηριστικού σε border="1" .



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



Επένδυση και διάστιχο (κελί και διάκενο)

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

Cellpadding="« - αλλάζει την απόσταση από το ίδιο το πλαίσιο στο περιεχόμενο του κελιού. Έτσι, όλα τα κελιά του πίνακα γίνονται μεγαλύτερα. Ας γράψουμε αυτό το χαρακτηριστικό στον πίνακα και ορίζουμε την τιμή στο 5 και βλέπουμε πώς θα διαφέρει από την αρχική έκδοση.

Λυκίσκος. Βλέπω? Η απόσταση έχει αυξηθεί. Με αυτόν τον τρόπο μπορείτε να αντικαταστήσετε μόνοι σας τις επιθυμητές τιμές, επεκτείνοντας έτσι τα κελιά.

Cellspacing="" - αλλάζει το διάστημα μεταξύ των κελιών του πίνακα και οι τιμές του μετρώνται επίσης σε pixel. Ας προσπαθήσουμε να ορίσουμε αυτό το χαρακτηριστικό στο 5 και να δούμε τι συμβαίνει.



Καλά? Είναι ξεκάθαρο το θέμα; Όπως μπορείτε να δείτε, η απόσταση μεταξύ των κελιών έχει γίνει μεγαλύτερη. Αυτό ακριβώς επιδιώκουμε.



Ευθυγραμμία

Λοιπόν, πού είμαστε χωρίς αυτό το υπέροχο χαρακτηριστικό που μας επιτρέπει να ευθυγραμμίζουμε τα πάντα σε διαφορετικά μέρη; Το Align λειτουργεί ακριβώς όπως και με τις άλλες ετικέτες που έχουμε ξαναδεί και έχει τρεις τιμές:

• Κέντρο
• σωστά

Ας γράψουμε κάθε μία από τις τιμές και ας δούμε πώς θα κατανεμηθεί ο πίνακας.



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



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

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

Με εκτίμηση, Ντμίτρι Κόστιν.