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

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

Χαρακτηριστικό σύνορο, δίνοντάς του μια τιμή διαφορετική από το μηδέν.

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

Επάνω αριστερό κελί	Πάνω δεξιά κελί
Κάτω αριστερό κελί	Κάτω δεξιά κελί

Αποτέλεσμα στο πρόγραμμα περιήγησης:

Πώς να αφαιρέσετε τα περιγράμματα του πίνακα

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

Το χαρακτηριστικό σάς επιτρέπει να δημιουργείτε αλλά όχι να διαχειρίζεστε περιγράμματα. Σας επιτρέπει μόνο να αλλάξετε το πάχος τους.

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

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

Επάνω αριστερό κελί	Πάνω δεξιά κελί
Κάτω αριστερό κελί	Κάτω δεξιά κελί

Αποτέλεσμα στο πρόγραμμα περιήγησης:

Τώρα ας προσθέσουμε περιγράμματα και για κάθε κελί. Για να το κάνετε αυτό, απλώς προσθέστε στυλ:

Αποτέλεσμα στο πρόγραμμα περιήγησης:

Πώς να αφαιρέσετε το padding μεταξύ των κελιών σε έναν πίνακα HTML

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

Ωστόσο, είναι πολύ πιθανό να απαλλαγείτε από τέτοια σύνορα, τα οποία ονομάζονται διπλά, εάν χρησιμοποιείτε CSS- περιουσία στα σύνορα-κατάρρευση. Στην πράξη, μοιάζει με αυτό:

Πίνακας ( περίγραμμα: συμπαγές 1 εικονοστοιχείο μπλε, περίγραμμα-σύμπτυξη: σύμπτυξη; ) ...

Ως αποτέλεσμα, η απόσταση μεταξύ των κελιών αφαιρείται:

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

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

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

. Ωστόσο, υπάρχει μια άλλη, πιο προτιμώμενη επιλογή: css.

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

Μπορείτε να ορίσετε ακριβώς πόσα pixel θα πρέπει να έχουν εσοχή. Ας δώσουμε ένα παράδειγμα στο οποίο θα είναι η κάτω εσοχή 20 pixel, και όλα τα υπόλοιπα θα είναι 10 . Τέτοιος css-ο κωδικός θα μοιάζει με αυτό:

Td ( padding: 10px; padding-bottom: 20px; )

Και ο πλήρης κώδικας στυλ σε αυτό το στάδιο:

Πίνακας ( περίγραμμα: συμπαγές 1 εικονοστοιχείο μπλε, περίγραμμα-σύμπτυξη: σύμπτυξη; ) td ( περίγραμμα: συμπαγές 1 εικονοστοιχείο μπλε, γέμιση: 10 εικονοστοιχεία, συμπλήρωση-κάτω: 20 εικονοστοιχεία; )

Αποτέλεσμα στο πρόγραμμα περιήγησης:

Γέμισμα μεταξύ των κυττάρων

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

Οι εσοχές στους πίνακες δεν βρίσκονται μόνο μέσα στα κελιά. Μπορεί επίσης να υπάρχουν μεταξύ των ίδιων των κυττάρων.

Υπάρχουν δύο επιλογές για εσοχή κελιών:

1. χρησιμοποιώντας χαρακτηριστικό κελιάγια ετικέτα

.

χρησιμοποιώντας css-ιδιότητες απόσταση συνόρων.

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

Ας δούμε ένα παράδειγμα:

Πίνακας ( περίγραμμα: συμπαγές 1 εικονοστοιχεία μπλε, σύμπτυξη περιγράμματος: ξεχωριστό, διάστιχο: 5 εικονοστοιχεία; ) td ( περίγραμμα: συμπαγές 1 εικονοστοιχεία μπλε, επένδυση: 10 εικονοστοιχεία, συμπλήρωση-κάτω: 20 εικονοστοιχεία; )

Και για το αποτέλεσμα που προκύπτει:

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

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

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

Σε αυτό το άρθρο, θα σας παρουσιάσω τις περιπλοκές του styling πίνακες HTML, και θα μάθετε νέες ιδιότητες CSS που έχουν σχεδιαστεί για την επίτευξη αυτών των στόχων.

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

(«υποσέλιδο» του πίνακα) χρώμα φόντου – κοράλλι, για στοιχείο ("κεφαλίδα" του πίνακα) ορίστε το χρώμα φόντου ασήμι.

Για στοιχεία

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

Το αποτέλεσμα του παραδείγματός μας:

Ρύζι. 153 Παράδειγμα στυλ γραμμής σε πίνακες

Το ακόλουθο παράδειγμα εξετάζει την εφαρμογή στρογγυλοποίησης γωνίας στα κελιά του πίνακα (ιδιότητα).

) ορίσαμε το κάτω padding στα 19 pixel. Ελπίζω να μην σας μπερδεύουν οι άνισοι αριθμοί :)

Το αποτέλεσμα του παραδείγματός μας:

Διάστημα μεταξύ των κελιών

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

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

Διάστιχο περιγράμματος: 30 px 10 px;

1	2	3
2
3

διάστιχο: 0;

1	2	3
2
3

διάστιχο:0,2em;

1	2	3
2
3

Σε αυτό το παράδειγμα, εμείς:

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

) είναι τολμηρή.

Για τα κελιά του πίνακα (κεφαλίδα και κελιά δεδομένων), ορίσαμε ένα συμπαγές περίγραμμα 1 px με δεκαεξαδικό χρώμα #F50 και ορίσαμε το padding σε 19 px σε όλες τις πλευρές.

Για το πρώτο τραπέζι με την τάξη .πρώταορίζουμε το κενό μεταξύ των κελιών του πίνακα (ιδιότητα απόσταση συνόρων) ίσο με 30px 10px , για τον δεύτερο πίνακα με την κλάση .δεύτεροςίσο με μηδέν, για τον τρίτο πίνακα με την κλάση .τρίτοςίσο με 0,2em .

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

Το αποτέλεσμα του παραδείγματός μας:

Εμφάνιση περιγραμμάτων γύρω από τα κελιά του πίνακα

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

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

Για αυτό πρέπει να χρησιμοποιήσετε Ιδιότητα CSS σύνορα-κατάρρευση. Παραδόξως, αλλά χρησιμοποιώντας την ιδιοκτησία σύνορα-κατάρρευσημε την τιμή κατάρρευσης είναι ο καλύτερος τρόποςπώς μπορώ να αφαιρέσω το κενό μεταξύ των κελιών και ταυτόχρονα να μην έχω διπλά όρια μεταξύ τους.

Εξετάστε το ενδεχόμενο να συγκρίνετε τη συμπεριφορά των περιγραμμάτων κατά τη χρήση της ιδιότητας απόσταση συνόρωνμε τιμή 0 και ιδιότητες σύνορα-κατάρρευσημε τιμή σύμπτυξης:

διάστιχο: 0;

1	2	3
2
3

σύνορα-κατάρρευση: κατάρρευση;

1	2	3
2
3

Σε αυτό το παράδειγμα, εμείς:

• Κάναμε τα τραπέζια μας να επιπλέουν και μετακινηθήκαμε προς τα αριστερά ( φλοτέρ: αριστερά), ορίστε το δεξί τους περιθώριο σε 30 εικονοστοιχεία.
• Ορισμός για το όνομα του πίνακα (ετικέτα

) είναι τολμηρή.

Για τα κελιά του πίνακα (κεφαλίδα και κελιά δεδομένων) ορίσαμε ένα συμπαγές περίγραμμα 5 εικονοστοιχείων με εξάγωνο χρώμα #F50 και ορίσαμε σταθερό πλάτος 50 εικονοστοιχεία και ύψος 75 εικονοστοιχεία.

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

Το αποτέλεσμα του παραδείγματός μας:

Συμπεριφορά κενών κελιών

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

Ας προχωρήσουμε σε ένα παράδειγμα:

άδεια-κελιά: εμφάνιση;

1	2	3
2		☺
3	☺

άδεια-κελιά: απόκρυψη;

1	2	3
2		☺
3	☺

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

Θέση κεφαλίδας πίνακα

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

Ας δούμε ένα παράδειγμα χρήσης αυτής της ιδιότητας:

Τίτλος πάνω από τον πίνακα

Ονομα	Τιμή
Ψάρι	350 ρούβλια
Κρέας	250 ρούβλια

Τίτλος κάτω από το τραπέζι

Ονομα	Τιμή
Ψάρι	350 ρούβλια
Κρέας	250 ρούβλια

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

Το αποτέλεσμα του παραδείγματός μας:

Οριζόντια και κάθετη ευθυγράμμιση

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

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

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

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

Το αποτέλεσμα του παραδείγματός μας:

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

Λάβετε υπόψη ότι όταν εργάζεστε με κελιά πίνακα, ισχύουν μόνο οι ακόλουθες τιμές * αυτής της ιδιότητας:

* - Οι τιμές Sub, super, text-top, text-bottom, length και % που εφαρμόζονται σε ένα κελί πίνακα θα συμπεριφέρονται σαν να χρησιμοποιούν μια τιμή γραμμής βάσης.

Ας δούμε ένα παράδειγμα χρήσης:

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

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

Αλγόριθμος για την τοποθέτηση της διάταξης του πίνακα από το πρόγραμμα περιήγησης

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

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

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

Ας δούμε τη χρήση αυτής της ιδιότητας με το ακόλουθο παράδειγμα:

διάταξη πίνακα: αυτόματη;

Ονομα	2009	2010	2011	2012	2013	2014	2015	2016
Σιτάρι	125	215	2540	33287	695878	1222222	125840000	125

διάταξη πίνακα: σταθερό;

Ονομα	2009	2010	2011	2012	2013	2014	2015	2016
Σιτάρι	125	215	2540	33287	695878	1222222	125840000	125

Σε αυτό το παράδειγμα, εμείς:

Στυλ πίνακα σειρών και στηλών

Εσείς και εγώ έχουμε ήδη αγγίξει εν μέρει τις μεθόδους διαμόρφωσης γραμμών και στηλών ενός πίνακα στο άρθρο "". Σε αυτό το άρθρο, εξετάσαμε τη χρήση μιας ψευδο-κλάσης ομάδας που σας επιτρέπει να παρεμβάλλετε στυλ σειρών σε πίνακες χρησιμοποιώντας τιμές ακόμη και (τίμιος) και Περιττός (Περιττός), ή κατά στοιχειώδες ΜΑΘΗΜΑΤΙΚΟΣ ΤΥΠΟΣ.

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

1	2	3	4	5	6	7	8	9	10	11	12	13	14
2
3
4

Σε αυτό το παράδειγμα, εμείς:

Το αποτέλεσμα του παραδείγματός μας:

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

Υπηρεσία	Τιμή
Αθροισμα	15 000
1	1 000
2	2 000
3	3 000
4	4 000
5	5 000

Σε αυτό το παράδειγμα, εμείς:

• Ρυθμίστε το πλάτος του τραπεζιού στο 100% του πλάτους γονικό στοιχείο, για κελιά κεφαλίδας και δεδομένων ορίστε ένα συμπαγές περίγραμμα με πλάτος 1 εικονοστοιχείο.
• Σετ για στοιχείο

Ετικέτα	Περιγραφή
. Ορίζει τα περιεχόμενα του πίνακα. Καθορίζει το όνομα του πίνακα. Καθορίζει το κελί κεφαλίδας ενός πίνακα. Ορίζει μια σειρά πίνακα. Ορίζει ένα κελί δεδομένων πίνακα. Χρησιμοποιείται για να περιέχει μια κεφαλίδα ομάδας σε έναν πίνακα (κεφαλίδα πίνακα). Χρησιμοποιείται για να περιέχει το «σώμα» του τραπεζιού. Χρησιμοποιείται για να περιέχει το «υποσέλιδο» του πίνακα (υποσέλιδο). Καθορίζει τις δοσμένες ιδιότητες στήλης για κάθε στήλη εντός της ετικέτας Ορίζει μια ομάδα στηλών σε έναν πίνακα. Εργασία με εσοχές σε πίνακα Εσοχές πίνακα 1 2 3 4 2 3 4 ΣΤΟ αυτό το παράδειγμαεμείς: Τοποθετήσαμε το τραπέζι στο κέντρο, χρησιμοποιώντας τη μέθοδο κεντραρίσματος οριζόντια με εξωτερικές εσοχές ( περιθώριο: 0 αυτόματο). Για το όνομα του πίνακα (ετικέτα

1	2	3	4	5

Σε αυτό το παράδειγμα, εμείς:

• Κεντράρουμε τον πίνακα με εξωτερικά περιθώρια, ορίζουμε το πλάτος και το ύψος των κελιών κεφαλίδας σε 50 εικονοστοιχεία , καθορίζεται διαφανήςπερίγραμμα 5 pixel.
• Βρέθηκε ότι κατά την αιώρηση (ψευδοκατηγορία :φτερουγίζω) στο κελί της κεφαλίδας παίρνει το φόντο μπλεχρωματιστά, Πορτοκάλιχρώμα κειμένου, περίγραμμα πορτοκάλιχρώματα 5 pixel και ακτίνα στρογγυλοποίησης 100%.
• διαφανές περίγραμμαείναι απαραίτητο για να κρατήσετε ένα μέρος για το περίγραμμα, το οποίο θα εμφανίζεται στο hover, εάν αυτό δεν γίνει, ο πίνακας θα "πηδήξει".

Το αποτέλεσμα του παραδείγματός μας:

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

Αίτηση Αρ.	Υπηρεσία	τιμή, τρίψτε.	Σύνολο
1	Τραγούδι	6 000	6 000
2	το πλύσιμο των πιάτων	2 000	2 000
3	Καθάρισμα	1 000	1 000
4	Γκρίνια	1 500	1 500
5	ΑΝΑΓΝΩΣΗ	3 000	3 000

Σε αυτό το παράδειγμα, εμείς:

Το αποτέλεσμα του παραδείγματός μας:

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

Στο προηγούμενο παράδειγμα, συνειδητοποιήσαμε ότι το στοιχείο HTML μπορείτε να εφαρμόσετε μόνο μία ιδιότητα CSS - το χρώμα του φόντου ( χρώμα του φόντου), αλλά ταυτόχρονα ρυθμίστε το χρώμα φόντου στο hover (ψευδοκλάση :φτερουγίζω) δεν μπορεί να εφαρμοστεί απευθείας σε αυτό το στοιχείο. Σε αυτό το παράδειγμα, θα δούμε πώς να επισημάνετε μια στήλη πίνακα χρησιμοποιώντας μόνο CSS.

Αίτηση Αρ.	Υπηρεσία	τιμή, τρίψτε.	Σύνολο
1	Τραγούδι	6 000	6 000
2	το πλύσιμο των πιάτων	2 000	2 000
3	Καθάρισμα	1 000	1 000
4	Γκρίνια	1 500	1 500
5	ΑΝΑΓΝΩΣΗ	3 000	3 000

Σε αυτό το παράδειγμα, εμείς:

• Ορίσαμε ότι ο πίνακάς μας καταλαμβάνει το 100% του γονικού στοιχείου, τα κελιά του πίνακα καταλαμβάνουν το 25% του γονικού στοιχείου και έχουν ένα συμπαγές περίγραμμα 1 pixel πράσινου, το ύψος της κεφαλίδας και των κελιών δεδομένων είναι 45 px. Καταργήσαμε το κενό μεταξύ των κελιών χρησιμοποιώντας την ιδιότητα σύνορα-κατάρρευσημε νόημα .
• Και έτσι, χρησιμοποιώντας ψευδοστοιχείο ::μετάπροσθέστε περιεχόμενο μετά από κάθε στοιχείο σε αιώρηση. Ψευδοστοιχείο ::μετάπρέπει να χρησιμοποιείται μαζί με το ακίνητο περιεχόμενο, χάρη στο οποίο εισάγουμε ένα στοιχείο μπλοκ που έχει χρώμα φόντου πράσινο του δάσουςκαι έχει απόλυτη τοποθέτηση.
• Η απόλυτη τοποθέτηση εδώ είναι απαραίτητη για να αντισταθμίσει το στοιχείο σε σχέση με τη δεδομένη άκρη του προγόνου του, ενώ ο πρόγονος πρέπει να έχει την τιμή θέσηδιαφορετικό από το προεπιλεγμένο - static , διαφορετικά η καταμέτρηση θα είναι σχετική με την καθορισμένη άκρη του παραθύρου του προγράμματος περιήγησης, για αυτόν τον λόγο έχουμε ορίσει για τον πίνακα σχετική τοποθέτηση(συγγενής ).
• Ορίσαμε την ιδιότητα για το μπλοκ που δημιουργήθηκε μπλουζα, το οποίο καθορίζει την κατεύθυνση μετατόπισης του τοποθετημένου στοιχείου από την επάνω άκρη και την ιδιότητα κάτω μέρος A που καθορίζει την κατεύθυνση στην οποία το τοποθετημένο στοιχείο μετατοπίζεται από το κάτω άκρο. Και οι δύο ιδιότητες ορίστηκαν σε 0, επομένως το μπλοκ θα καταλαμβάνει πλήρως το στοιχείο από το κάτω και το πάνω μέρος του πίνακα, το πλάτος αυτού του μπλοκ ορίστηκε στο 25%, αυτή η τιμή αντιστοιχεί στην τιμή του πλάτους του ίδιου του κελιού.
• Και η τελική ιδιότητα που ορίσαμε για αυτό το μπλοκ: z-δείκτηςμε τιμή "-1" καθορίζει τη σειρά με την οποία είναι τοποθετημένα τα στοιχεία άξονας Z. Αυτή η ιδιότητα είναι απαραίτητη ώστε το κείμενο να βρίσκεται μπροστά από αυτό το μπλοκ και όχι πίσω από αυτό, εάν δεν ορίσετε τιμή μικρότερη από το μηδέν, τότε το μπλοκ θα κλείσει το κείμενο.

Το αποτέλεσμα του παραδείγματός μας:

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

Ερωτήσεις και εργασίες για το θέμα

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

Εάν δυσκολεύεστε να κάνετε πρακτική εργασία, Μπορείτε πάντα να ανοίξετε το παράδειγμα σε ξεχωριστό παράθυρο και να επιθεωρήσετε τη σελίδα για να δείτε τι CSS χρησιμοποιήθηκε.

2016-2020 Denis Bolshakov, μπορείτε να στείλετε σχόλια και προτάσεις στον ιστότοπο στη διεύθυνση [email protected]

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

Χρώμα φόντου κελιού

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

Παράδειγμα 2.3. Χρώμα του φόντου

Επικεφαλίδα 1	Επικεφαλίδα 2
Κύτταρο 3	Κύτταρο 4

Σε αυτό το παράδειγμα, παίρνουμε ένα μπλε χρώμα φόντου για τα κελιά (ετικέτα ) και κόκκινο στον τίτλο (ετικέτα ). Αυτό συμβαίνει επειδή το στυλ για τον επιλογέα TH δεν έχει οριστεί, επομένως το φόντο του γονέα, σε αυτήν την περίπτωση του επιλογέα TABLE, "εμφανίζεται μέσω". Και το χρώμα για τον επιλογέα TD καθορίζεται ρητά, επομένως τα κελιά "γεμίζονται" με μπλε.

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

Ρύζι. 2.4. Αλλαγή χρώματος φόντου

Περιθώρια μέσα στα κύτταρα

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

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

Παράδειγμα 2.4. Πεδία σε πίνακες

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Επικεφαλίδα 1	Επικεφαλίδα 2
Κύτταρο 3	Κύτταρο 4

Σε αυτό το παράδειγμα, ομαδοποιώντας επιλογείς, τα πεδία ρυθμίζονται ταυτόχρονα για τον επιλογέα TD και TH . Το αποτέλεσμα του παραδείγματος φαίνεται στο Σχ. 2.5.

Ρύζι. 2.5. Πεδία σε κελιά

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

αγνόησε.

Απόσταση μεταξύ των κυττάρων

Για να αλλάξετε το διάστημα μεταξύ των κελιών, χρησιμοποιήστε το χαρακτηριστικό cellpacing της ετικέτας

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

Η ιδιότητα διαστήματος περιγράμματος έχει αποτέλεσμα μόνο εάν ο επιλογέας TABLE δεν έχει ορίσει τη σύμπτυξη περιγράμματος σε σύμπτυξη (Παράδειγμα 2-5).

Παράδειγμα 2.5. Απόσταση μεταξύ των ορίων κελιών

XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

Λεονάρντο	5	8
Ραφαήλ	4	11
Μιχαήλ Άγγελος	24	9
Ντονατέλο	2	13

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

Ρύζι. 2.6. Εμφάνιση πίνακα κατά τη χρήση της απόστασης περιγραμμάτων

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

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

Σύνορα και πλαίσια

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

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

Χρήση του χαρακτηριστικού κελιάς διαστήματος

Είναι γνωστό ότι το χαρακτηριστικό spacepacing της ετικέτας

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

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

Εφαρμογή της ιδιότητας συνόρων

Η ιδιότητα στυλ περιγράμματος ορίζει ταυτόχρονα το χρώμα του περιγράμματος, το στυλ του και το πλάτος γύρω από το στοιχείο. Όταν θέλετε να δημιουργήσετε ξεχωριστές γραμμές στο διαφορετικές πλευρές, είναι καλύτερα να χρησιμοποιείτε παράγωγα - border-left , border-right , border-top και border-bottom , αυτές οι ιδιότητες ορίζουν αντίστοιχα το περίγραμμα στα αριστερά, δεξιά, πάνω και κάτω.

Εφαρμόζοντας την ιδιότητα περιγράμματος στον επιλογέα TABLE, προσθέτουμε ένα περίγραμμα γύρω από τον πίνακα ως σύνολο, και στον επιλογέα TD ή TH, προσθέτουμε ένα περίγραμμα γύρω από τα κελιά (Παράδειγμα 2-6).

Παράδειγμα 2.6. Προσθήκη διπλού περιγράμματος

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Επικεφαλίδα 1	Επικεφαλίδα 2
Κύτταρο 3	Κύτταρο 4

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

Ρύζι. 2.7. Περίγραμμα γύρω από τραπέζι και κελιά

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

. Αν και αυτό το χαρακτηριστικό δεν εμφανίζεται πουθενά στον κώδικα του παραδείγματος, το πρόγραμμα περιήγησης το χρησιμοποιεί από προεπιλογή. Αν ορίσετε , τότε δεν παίρνουμε διπλές, αλλά μονές γραμμές, αλλά διπλασιασμένου πάχους. Για να αλλάξετε αυτήν τη δυνατότητα, εφαρμόστε την ιδιότητα στυλ σύμπτυξης περιγράμματος με την τιμή σύμπτυξη , η οποία προστίθεται στον επιλογέα TABLE (Παράδειγμα 2-7).

Παράδειγμα 2.7. Δημιουργία ενός ενιαίου πλαισίου

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Επικεφαλίδα 1	Επικεφαλίδα 2
Κύτταρο 3	Κύτταρο 4

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

Ρύζι. 2.8. Σύνορα γύρω από το τραπέζι

Ευθυγράμμιση περιεχομένων κελιών

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

Παράδειγμα 2.8. Ευθυγραμμίστε τα περιεχόμενα του κελιού οριζόντια

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Επικεφαλίδα 1	Κύτταρο 1	Κύτταρο 2
Επικεφαλίδα 2	Κύτταρο 3	Κύτταρο 4

Σε αυτό το παράδειγμα, το περιεχόμενο της ετικέτας είναι αριστερή στοίχιση και τα περιεχόμενα της ετικέτας - στο κέντρο. Το αποτέλεσμα του παραδείγματος φαίνεται παρακάτω (Εικόνα 2.9).

Ρύζι. 2.9. Στοίχιση κειμένου σε κελιά

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

Παράδειγμα 2.9. Ευθυγραμμίστε τα περιεχόμενα των κελιών κατακόρυφα

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Επικεφαλίδα 1	Επικεφαλίδα 2
Κύτταρο 1	Κύτταρο 2

Αυτό το παράδειγμα ορίζει το ύψος της κεφαλίδας όπως 40 pixel και η στοίχιση κειμένου είναι κάτω. Το αποτέλεσμα του παραδείγματος φαίνεται στο Σχ. 2.10.

Ρύζι. 2.10. Στοίχιση κειμένου σε κελιά

Άδεια κελιά

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

Τα παλαιότερα προγράμματα περιήγησης δεν εμφάνιζαν το χρώμα φόντου των κενών κελιών προβολής , οπότε στην περίπτωση που έπρεπε να αφήσετε το κελί χωρίς περιεχόμενο, αλλά να εμφανιστεί το χρώμα φόντου, προστέθηκε ένα μη διαχωρισμένο διάστημα () μέσα στο κελί. Ο χώρος δεν είναι πάντα κατάλληλος, ειδικά όταν πρέπει να ορίσετε το ύψος του κελιού σε 1-2 pixel, γι' αυτό και το διαφανές σχέδιο ενός εικονοστοιχείου έχει γίνει ευρέως διαδεδομένο. Πράγματι, μια τέτοια εικόνα μπορεί να κλιμακωθεί κατά την κρίση σας, αλλά δεν εμφανίζεται με κανέναν τρόπο στην ιστοσελίδα.

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

Για τον έλεγχο της εμφάνισης κενών κελιών, χρησιμοποιείται η ιδιότητα κενών κελιών· όταν έχει οριστεί ως απόκρυψη, το περίγραμμα και το φόντο στα κενά κελιά δεν εμφανίζονται. Εάν όλα τα κελιά σε μια σειρά είναι άδεια, τότε ολόκληρη η σειρά είναι κρυμμένη. Ένα κελί θεωρείται κενό στις ακόλουθες περιπτώσεις:

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

Η προσθήκη ενός διαστήματος χωρίς διακοπή αντιμετωπίζεται ως ορατό περιεχόμενο, π.χ. το κελί δεν θα είναι πλέον κενό (παράδειγμα 2.10).

Παράδειγμα 2.10. Άδεια κελιά

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Λεονάρντο	5	8
Ραφαήλ		11
Μιχαήλ Άγγελος	24
Ντονατέλο		13

Η προβολή του πίνακα στο πρόγραμμα περιήγησης Safari φαίνεται στην εικ. 2.11α. Ο ίδιος πίνακας στο IE7 φαίνεται στο Σχ. 2.11β.

ένα. Στο πρόγραμμα περιήγησης Safari, Firefox, Opera, IE8, IE9

σι. Στο πρόγραμμα περιήγησης IE7

Ρύζι. 2.11. Προβολή πίνακα με άδεια κελιά