Φόντο κελιών πίνακα Css. Χρήση της ιδιότητας συνόρων

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Μορφοποίηση πινάκων

1. Περιγράμματα τραπεζιού

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

Πίνακας ( περίγραμμα-σύμπτυξη: σύμπτυξη; /*αφαίρεση κενών διαστημάτων μεταξύ των κελιών*/ περίγραμμα: 1 εικονοστοιχείο συμπαγές γκρι; /*ορίστε ένα εξωτερικό περίγραμμα για τον πίνακα γκρί 1 px πάχος*/ )

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

Th (περίγραμμα: 1px σταθερό γκρι;)

Σύνορα κελιώνΤα σώματα του πίνακα καθορίζονται για το στοιχείο td:

Td (περίγραμμα: 1px συμπαγές γκρι;)

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

Th, td (περίγραμμα: 1px συμπαγές γκρι;)

Μπορείτε να επισημάνετε το εξωτερικό περίγραμμα ενός πίνακα δίνοντάς του αυξημένο πλάτος:

Πίνακας (περίγραμμα: 3px σταθερό γκρι;)

Τα όρια μπορούν να τεθούν εν μέρει:

/* ορίστε ένα γκρι εξωτερικό περίγραμμα πάχους 3 εικονοστοιχείων για τον πίνακα */ πίνακα (περιθώριο-κορυφή: 3 εικονοστοιχεία συμπαγές γκρι; ) /* ορίστε ένα γκρι περίγραμμα πάχους 1 εικονοστοιχείων για το κελί του σώματος του πίνακα */ td (περιθώριο-κάτω: 1 συμπαγές εικονοστοιχείο γκρί;)

Μπορείτε να διαβάσετε περισσότερα για την ιδιοκτησία στα σύνορα.

2. Πώς να ορίσετε το πλάτος και το ύψος του τραπεζιού

Προκαθορισμένο πλάτος και ύψος τραπεζιούκαθορίζεται από το περιεχόμενο των κυττάρων του. Εάν το πλάτος δεν έχει καθοριστεί, τότε θα είναι ίσο με το πλάτος της ευρύτερης σειράς (σειράς).

Πλάτος πίνακα και στήληςορίζεται χρησιμοποιώντας την ιδιότητα πλάτος. Εάν ο πίνακας (πλάτος: 100%;) έχει καθοριστεί για έναν πίνακα, τότε το πλάτος του πίνακα θα είναι ίσο με το πλάτος του μπλοκ κοντέινερ στο οποίο βρίσκεται.

Το πλάτος του πίνακα και των στηλών καθορίζεται συνήθως σε px ή %, για παράδειγμα:

Πίνακας (πλάτος: 600 εικονοστοιχεία;) ου (πλάτος: 20%;) td:πρώτο παιδί (πλάτος: 30%;)

Ύψος τραπεζιούΔεν διευκρινίζεται. Ύψος σειράςΤα τραπέζια μπορούν να χειριστούν προσθέτοντας επάνω και κάτω γέμιση στα στοιχεία Και . Καθορίστε το ύψος χρησιμοποιώντας ιδιότητες ύψουςΔεν προτείνεται.

Th, td (επένδυση: 10px 15px;)

3. Πώς να ορίσετε το φόντο του πίνακα

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

4. Στήλες πίνακα

Μοντέλο Πίνακες CSSεπικεντρώνεται κυρίως σε γραμμές (σειρές) που σχηματίζονται με χρήση της ετικέτας

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

χρησιμοποιώντας ετικέτα

Μπορείτε να ορίσετε το φόντο για οποιονδήποτε αριθμό στηλών.

Χρησιμοποιώντας τον πίνακα επιλογής td:first-child , table td:last-child μπορείτε να ορίσετε στυλ για την πρώτη ή την τελευταία στήλη του πίνακα (εκτός από το πρώτο κελί της κεφαλίδας του πίνακα).

Χρησιμοποιώντας τον επιλογέα πίνακα td:nth-child (κανόνας επιλογής στήλης), μπορείτε να ορίσετε στυλ για οποιεσδήποτε στήλες πίνακα.

Μπορείτε να διαβάσετε περισσότερα για τους επιλογείς CSS.

5. Πώς να προσθέσετε έναν τίτλο πίνακα

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

...

Πίνακας Νο. 1

Εταιρία	Q1	Ε2	Ε3	Q4

λεζάντα ( στην πλευρά της λεζάντας: κάτω, στοίχιση κειμένου: δεξιά, συμπλήρωση: 10 εικονοστοιχεία 0, μέγεθος γραμματοσειράς: 14 εικονοστοιχεία; ) Ρύζι. 2. Παράδειγμα εμφάνισης κεφαλίδας κάτω από πίνακα

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

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

Σύνταξη

Πίνακας (σύμπτυξη συνόρων: σύμπτυξη;)
Ρύζι. 3. Παράδειγμα πινάκων με συγχωνευμένα και ξεχωριστά πλαίσια κελιών

7. Πώς να αυξήσετε τον χώρο μεταξύ των πλαισίων κελιών

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

Σύνταξη

Πίνακας (σύμπτυξη περιγράμματος: ξεχωριστό, διάστιχο: 10 εικονοστοιχεία 20 εικονοστοιχεία;) πίνακας (σύμπτυξη περιγράμματος: ξεχωριστό, διάστιχο: 10 εικονοστοιχεία;) Ρύζι. 4. Παράδειγμα πινάκων με αυξημένα κενά μεταξύ των πλαισίων κελιών

8. Πώς να αποκρύψετε τα άδεια κελιά του πίνακα

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

Εταιρία	Q1	Ε2	Ε3
Microsoft	20.3	30.5
Google	50.2	40.63	45.23

πίνακας ( περίγραμμα: 1px συμπαγές #69c; περίγραμμα-σύμπτυξη: ξεχωριστό; κενά κελιά: απόκρυψη; ) th, td (περίγραμμα: 2px συμπαγές #69c;) Ρύζι. 5. Παράδειγμα απόκρυψης κενού κελιού πίνακα

9. Σχεδιάστε έναν πίνακα χρησιμοποιώντας την ιδιότητα table-layout

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

Σύνταξη

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

10. Καλύτερες διατάξεις τραπεζιών

1. Οριζόντιος μινιμαλισμός

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

Υπάλληλος	Μισθός	Δώρο	Επόπτης
Stephen C. Cox	$300	$50	Βαρίδι
Ζοζεφίν Ταν	$150	-	η Άννυ
Τζόις Μινγκ	$200	$35	Άντι
James A. Pentel	$175	$25	η Άννυ

πίνακας ( γραμματοσειρά-οικογένεια: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; μέγεθος γραμματοσειράς: 14 px; φόντο: λευκό; μέγ. πλάτος: 70%; πλάτος: 70%; περίγραμμα-σύμπτυξη: σύμπτυξη; κείμενο -στοίχιση: αριστερά; ) th (βάρος γραμματοσειράς: κανονικό; χρώμα: #039; κάτω περιθώριο: 2 εικονοστοιχεία συμπαγές #6678b1; γέμιση: 10 εικονοστοιχεία 8 εικονοστοιχεία; ) td (χρώμα: #669; γέμιση: 9 εικονοστοιχεία 8 εικονοστοιχεία; μετάβαση: 0,3 s. γραμμικό ) tr:hover td (χρώμα: #6699ff;)

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

Td ( περίγραμμα-κάτω: 1px συμπαγές #cccc; χρώμα: #669; padding: 9px 8px; μετάβαση: .3s γραμμικό; )/*ο υπόλοιπος κώδικας είναι όπως στο παραπάνω παράδειγμα*/

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

Th ( βάρος γραμματοσειράς: κανονικό; χρώμα: #039; συμπλήρωση: 10 εικονοστοιχεία 15 εικονοστοιχεία; ) td (χρώμα: #669; περίγραμμα κορυφής: 1 εικονοστοιχείο συμπαγές #e8edff; επένδυση: 10 εικονοστοιχεία 15 εικονοστοιχεία; ) tr:hover td (φόντο: #e8edff ;)

2. Κάθετος μινιμαλισμός

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

Th ( βάρος γραμματοσειράς: κανονικό; περίγραμμα-κάτω: 2 εικονοστοιχεία συμπαγές #6678b1; περίγραμμα-δεξιά: 30 εικονοστοιχεία συμπαγές #fff; περίγραμμα-αριστερά: 30 εικονοστοιχεία στερεά #fff; χρώμα: #039; επένδυση: 8 εικονοστοιχεία 2 εικονοστοιχεία; ) td ( περίγραμμα- δεξιά: 30px συμπαγές #fff;

3. Στυλ σε κουτί

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

Th ( μέγεθος γραμματοσειράς: 13 εικονοστοιχεία; βάρος γραμματοσειράς: κανονικό; φόντο: #b9c9fe; περίγραμμα κορυφής: 4 εικονοστοιχεία συμπαγές #aabcfe; κάτω περιγράμματος: 1 εικονοστοιχεία συμπαγές #fff; χρώμα: #039; γέμιση: 8 εικονοστοιχεία; ) td ( φόντο : #e8edff;

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

Πίνακας ( γραμματοσειρά-οικογένεια: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; μέγεθος γραμματοσειράς: 14 px; μέγιστο πλάτος: 70%; πλάτος: 70%; στοίχιση κειμένου: κέντρο; σύμπτυξη περιγράμματος: σύμπτυξη όριο-κορυφή: 7px συμπαγής #9baff1; συμπαγές #9baff1, padding: 8px;

4. Οριζόντια ζέβρα

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

Th ( βάρος γραμματοσειράς: κανονικό; χρώμα: #039; συμπλήρωση: 10 εικονοστοιχεία 15 εικονοστοιχεία; ) td (χρώμα: #669; περίγραμμα κορυφής: 1 εικονοστοιχείο συμπαγές #e8edff; επένδυση: 10 εικονοστοιχεία 15 εικονοστοιχεία; ) tr:nth-child(2n) ( φόντο: #e8edff;)

5. Στυλ εφημερίδας

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

Πίνακας (περίγραμμα: 1px συμπαγές #69c;) th (βάρος γραμματοσειράς: κανονικό; χρώμα: #039; κάτω περιγράμματος: 1px διακεκομμένη #69c; padding: 12px 17px; ) td (χρώμα: #669; padding: 7px 17px; ) tr:hover td (φόντο: #ccddff;)

Πίνακας (περίγραμμα: 1px συμπαγές #69c;) th (βάρος γραμματοσειράς: κανονικό; χρώμα: #039; γέμιση: 10 εικονοστοιχεία; ) td (χρώμα: #669; περίγραμμα κορυφής: 1 εικονοστοιχείο διακεκομμένη #fff; επένδυση: 10 εικονοστοιχεία; φόντο: #ccddff ) tr:hover td (φόντο: #99bcff;)

Πίνακας (περίγραμμα: 1px συμπαγές #6cf;) th (βάρος γραμματοσειράς: κανονικό; μέγεθος γραμματοσειράς: 13 εικονοστοιχεία; χρώμα: #039; μετατροπή κειμένου: κεφαλαία; περίγραμμα-δεξιά: 1 εικονοστοιχείο συμπαγές #0865c2; περίγραμμα-πάνω: 1px συμπαγές #0865c2 αριστερό περιθώριο: 1px συμπαγές #0865c2: 1px συμπαγές #fff;

6. Φόντο πίνακα

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

Jpg") χωρίς επανάληψη, θέση φόντου: 100% 55 εικονοστοιχεία; ) th ( βάρος γραμματοσειράς: κανονικό; χρώμα: #339; padding: 10 px 12 px; ) td ( φόντο: url("https://site/images/ back..png"); φόντο: διαφανές; )

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

πλάτος και ύψος

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

. Οι τιμές ορίζονται σε οποιεσδήποτε μονάδες Μήκη CSS, αλλά συχνά χρησιμοποιούνται pixel ( px) και το ενδιαφέρον ( % ). Ο τελευταίος ορίζει το πλάτος σε σχέση με το γονικό στοιχείο, ενώ ο πρώτος ορίζει την απόλυτη τιμή.

Πίνακας (πλάτος: 450 px, ύψος: 80%;)

στην πλευρά της λεζάντας

Καθορίζει πού θα τοποθετηθεί η κεφαλίδα του πίνακα που περιγράφεται από την ετικέτα

. Η ιδιοκτησία μπορεί να οριστεί σε:

• μπλουζα- τοποθετήστε πάνω από το τραπέζι.
• κάτω μέρος- τοποθετήστε το κάτω από το τραπέζι.

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

Πίνακας (πλευρά λεζάντας: επάνω;)

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

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

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

απόσταση συνόρων

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

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

Δίνει στον πίνακα την ακόλουθη εμφάνιση:

άδεια-κελιά

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

• προβολή- εμφάνιση περιγραμμάτων και φόντου (προεπιλογή).
• κρύβω- κρύψτε τα. Εάν όλα τα κελιά μιας σειράς είναι άδεια, τότε ολόκληρη η σειρά θα είναι κρυφή. Αν δοθεί κανόνας στον πίνακα σύνορα-κατάρρευση: κατάρρευση;, τότε το ακίνητο αγνοείται.

διάταξη πίνακα

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

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

Παράδειγμα σχεδίασης τραπεζιού

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

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

Παράδειγμα πίνακα

Τιμές	2014	2015	2016
Ψωμί	16	18	21
Ζάχαρη	35	44	50
Αλας	8	8,50	9

Στο πρόγραμμα περιήγησης, ο πίνακας θα μοιάζει όπως παρακάτω.

πλάτος: 50%;

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

λεζάντα: κάτω;

Τοποθετούμε τον τίτλο στο κάτω μέρος, κάτω από το τραπέζι.

περίγραμμα: 4px στερεό #006400;

Στρώνουμε το τραπέζι χρωματιστό πλαίσιοΠάχος 4 pixel.

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

Συγχώνευση περιγραμμάτων κελιών.

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

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

μέγεθος γραμματοσειράς: 13px;

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

βάρος γραμματοσειράς: έντονη γραφή;

Κάντε το κείμενο μέσα τους με έντονη γραφή.

φόντο: #ADFF2F;

Ορίστε το χρώμα φόντου των κελιών.

περίγραμμα-κορυφή: 4px στερεά #006400; περίγραμμα-κάτω: 3px συμπαγές #FF8C00;

Ρύθμιση του επάνω και του κάτω πλαισίου.

χρώμα: #039;

Καθορίστε το χρώμα του κειμένου.

padding: 8px;

Ρυθμίστε την απόσταση από τα περιεχόμενα των κελιών έως τα περιθώρια τους σε οκτώ pixel.

Πίνακας δεδομένων- πληροφορίες που μπορούν να εμφανιστούν σε έναν πίνακα και να χωριστούν λογικά σε στήλες και σειρές. Χρησιμοποιείται για την εμφάνιση δεδομένων σε πίνακα σε ιστοσελίδες. Ετικέτα HTML

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

Μέσα σε μια ετικέτα

Εντοπίζονται τα κελιά πίνακα που αντιπροσωπεύονται από ετικέτες

ή

. Είναι τα κελιά που περιέχουν όλο το περιεχόμενο του πίνακα που εμφανίζεται στην ιστοσελίδα. Πλαίσιο τραπεζιού Από προεπιλογή, ένας πίνακας HTML σε μια ιστοσελίδα εμφανίζεται χωρίς περίγραμμα για την προσθήκη περιγράμματος στον πίνακα, καθώς και σε όλα τα άλλα στοιχεία Ιδιότητα CSSσύνορο . Αλλά αξίζει να δώσετε προσοχή στο γεγονός ότι εάν προσθέσετε ένα πλαίσιο μόνο σε ένα στοιχείο , τότε θα εμφανιστεί σε ολόκληρο τον πίνακα. Προκειμένου τα κελιά του πίνακα να έχουν επίσης περίγραμμα, θα πρέπει να ορίσετε την ιδιότητα περιγράμματος για τα στοιχεία , οπότε όταν θέλετε να αφήσετε ένα κελί κενό αλλά να εμφανίσετε το χρώμα του φόντου, προστέθηκε ένα μη διαχωρισμένο διάστημα () μέσα στο κελί. Ο χώρος δεν είναι πάντα κατάλληλος, ειδικά όταν χρειάζεται να ρυθμίσετε το ύψος του κελιού σε 1-2 pixel, γι' αυτό και τα διαφανή γραφικά ενός εικονοστοιχείου έχουν γίνει ευρέως διαδεδομένα. Πράγματι, μια τέτοια εικόνα μπορεί να κλιμακωθεί κατά την κρίση σας, αλλά δεν εμφανίζεται με κανέναν τρόπο στην ιστοσελίδα. Ευτυχώς, η εποχή των σχεδίων ενός εικονοστοιχείου και όλων των ειδών των διαχωριστών που βασίζονται σε αυτά έχει περάσει. Τα προγράμματα περιήγησης λειτουργούν αρκετά σωστά με πίνακες ακόμη και χωρίς την παρουσία περιεχομένων κελιών. Για να ελέγξετε την εμφάνιση των κενών κελιών, χρησιμοποιήστε την ιδιότητα κενών κελιών όταν έχει οριστεί για απόκρυψη, το περίγραμμα και το φόντο δεν εμφανίζονται σε κενά κελιά. Εάν όλα τα κελιά σε μια σειρά είναι άδεια, τότε ολόκληρη η σειρά είναι κρυμμένη. Το κελί θεωρείται κενό στις ακόλουθες περιπτώσεις: δεν υπάρχουν καθόλου σύμβολα. το κελί περιέχει μόνο μια νέα γραμμή, καρτέλα ή κενό. η ορατότητα έχει οριστεί σε κρυφή. Πρόσθεση μη σπάζοντας χώροεκλαμβάνεται ως ορατό περιεχόμενο, δηλ. το κελί δεν θα είναι πλέον άδειο (παράδειγμα 2.10). Παράδειγμα 2.10. Άδεια κελιά XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx Και . Table, th, td ( περίγραμμα: 1px συμπαγές μαύρο; ) Δοκιμάστε » Τώρα τόσο ο πίνακας όσο και τα κελιά έχουν περιθώρια και κάθε κελί και πίνακας έχουν τα δικά τους περιγράμματα. Ως αποτέλεσμα, εμφανίστηκε κενός χώρος μεταξύ των πλαισίων, το μέγεθος αυτού του διαστήματος μπορεί να ελεγχθεί από την ιδιότητα περιγράμματος, η οποία έχει οριστεί για ολόκληρο τον πίνακα. Με άλλα λόγια, δεν μπορείτε να ελέγξετε την απόσταση μεταξύ διαφορετικών κελιών ξεχωριστά. Ακόμα κι αν αφαιρέσετε τα κενά μεταξύ των κελιών χρησιμοποιώντας την τιμή της ιδιότητας διάστιχο περιγράμματος 0, τα περιγράμματα των κελιών θα ακουμπήσουν το ένα το άλλο, διπλασιάζοντας το μέγεθος. Για να συνδυάσετε περιγράμματα κελιών, χρησιμοποιήστε την ιδιότητα σύμπτυξη περιγράμματος. Μπορεί να έχει δύο έννοιες: ξεχωριστό: είναι η προεπιλογή. Τα κελιά εμφανίζονται στο σε μικρή απόστασητο ένα από το άλλο, κάθε κελί έχει τα δικά του σύνορα. σύμπτυξη: ενώνει γειτονικά πλαίσια σε ένα, όλα τα κενά μεταξύ των κελιών, καθώς και μεταξύ των κελιών και του πλαισίου του πίνακα, αγνοούνται. Ονομα Επώνυμο Όμηρος Simpson Περιθώριο Simpson Ονομα Επώνυμο Όμηρος Simpson Περιθώριο Simpson Δοκιμάστε " Μέγεθος τραπεζιού Μετά την προσθήκη περιγραμμάτων στα κελιά του πίνακα, έγινε αντιληπτό ότι τα περιεχόμενα των κελιών ήταν πολύ κοντά στις άκρες. Για προσθήκη ελεύθερος χώροςΜπορείτε να χρησιμοποιήσετε την ιδιότητα padding μεταξύ των άκρων των κελιών και των περιεχομένων τους: Th, td ( padding: 7px; ) Δοκιμάστε » Το μέγεθος ενός τραπεζιού εξαρτάται από το περιεχόμενό του, αλλά συχνά προκύπτουν καταστάσεις όταν το τραπέζι είναι πολύ στενό και καθίσταται απαραίτητο να το τεντώσετε. Το πλάτος και το ύψος του πίνακα μπορούν να αλλάξουν χρησιμοποιώντας τις ιδιότητες πλάτους και ύψους καθορίζοντας απαιτούμενα μεγέθηή τον ίδιο τον πίνακα ή τα κελιά: Πίνακας (πλάτος: 70%; ) ο (ύψος: 50 εικονοστοιχεία; ) Δοκιμάστε » Στοίχιση κειμένου Από προεπιλογή, το κείμενο στα κελιά της κεφαλίδας του πίνακα είναι στοίχιση στο κέντρο, ενώ το κείμενο στα κανονικά κελιά είναι αριστερό στοίχιση χρησιμοποιώντας την ιδιότητα στοίχιση κειμένου, μπορείτε να ελέγξετε την οριζόντια στοίχιση του κειμένου. Η ιδιότητα CSS κάθετης στοίχισης σάς επιτρέπει να ελέγχετε την κατακόρυφη στοίχιση του περιεχομένου κειμένου. Από προεπιλογή, το κείμενο στοιχίζεται κατακόρυφα στο κέντρο των κελιών. Κατακόρυφη στοίχισημπορεί να παρακαμφθεί χρησιμοποιώντας μία από τις τιμές της ιδιότητας κάθετης στοίχισης: κορυφή: το κείμενο στοιχίζεται στο επάνω περίγραμμα του κελιού μέση: στοιχίζει το κείμενο στο κέντρο (προεπιλογή) bottom: το κείμενο στοιχίζεται στο κάτω περίγραμμα του κελιού Ονομα Επώνυμο Όμηρος Simpson Περιθώριο Simpson Δοκιμάστε " Εναλλαγή του χρώματος φόντου των σειρών του πίνακα Κατά την προβολή μεγάλων πινάκων που περιέχουν πολλές σειρές με μεγάλο ποσόπληροφορίες, μπορεί να είναι δύσκολο να παρακολουθείτε ποια δεδομένα ανήκουν σε μια συγκεκριμένη σειρά. Για να βοηθήσετε τους χρήστες να βρουν τον δρόμο τους, μπορείτε να χρησιμοποιήσετε δύο διαφορετικά χρώματα φόντου εναλλάξ. Για να δημιουργήσετε το εφέ που περιγράφεται, μπορείτε να χρησιμοποιήσετε τον επιλογέα κλάσης, προσθέτοντάς τον σε κάθε δεύτερη σειρά του πίνακα: Ονομα Επώνυμο Θέση Όμηρος Simpson πατέρας Περιθώριο Simpson μητέρα Μπαρτ Simpson υιός Λίζα Simpson κόρη Δοκιμάστε " Προσθήκη κλάσησε κάθε δεύτερη γραμμή είναι αρκετά κουραστική εργασία. Το pseudo-class:nth-child προστέθηκε στο CSS3 για να παρέχει μια εναλλακτική λύση σε αυτό το πρόβλημα. Τώρα το εφέ εναλλαγής μπορεί να επιτευχθεί αποκλειστικά χρησιμοποιώντας CSSχωρίς αλλαγή της σήμανσης HTML του εγγράφου. Χρησιμοποιώντας την ψευδο-κλάση:nth-child, μπορείτε να επιλέξετε όλες τις ζυγές ή περιττές σειρές ενός πίνακα χρησιμοποιώντας μία από τις λέξεις-κλειδιά: άρτιος (άρτιος) ή περιττός (μονός): Tr:nth-child(odd) (χρώμα φόντου: #EAF2D3; ) Δοκιμάστε » Αλλαγή φόντου σειράς κατά την τοποθέτηση του δείκτη Ένας άλλος τρόπος για να βελτιώσετε την αναγνωσιμότητα των δεδομένων σε πίνακα είναι να αλλάξετε χρώμα του φόντουγραμμή όταν τοποθετείτε τον κέρσορα του ποντικιού πάνω της. Αυτό θα βοηθήσει στην επισήμανση του επιθυμητού περιεχομένου του πίνακα και θα αυξήσει την οπτική αντίληψη των δεδομένων. Η εφαρμογή ενός τέτοιου εφέ είναι πολύ απλή για να γίνει αυτό, πρέπει να προσθέσετε μια ψευδο-κλάση: τοποθετήστε το δείκτη του ποντικιού στον επιλογέα σειρών του πίνακα και να ορίσετε το επιθυμητό χρώμα φόντου: Tr:hover (χρώμα φόντου: #E0E0FF; ) Δοκιμάστε » Ευθυγράμμιση ενός τραπεζιού στο κέντρο Στοίχιση HTMLΤο κεντράρισμα ενός πίνακα είναι δυνατό μόνο εάν το πλάτος του πίνακα είναι μικρότερο από το πλάτος του γονικού του στοιχείου. Για να ευθυγραμμίσετε τον πίνακα στο κέντρο, πρέπει να χρησιμοποιήσετε την ιδιότητα περιθωρίου, δίνοντάς του τουλάχιστον δύο τιμές: η πρώτη τιμή θα είναι υπεύθυνη για το εξωτερικό περιθώριο του πίνακα στο επάνω και κάτω μέρος και η δεύτερη τιμή θα είναι υπεύθυνη για αυτόματη ευθυγράμμιση στο κέντρο: Πίνακας ( περιθώριο: 10 px auto; ) Δοκιμάστε » Εάν χρειάζεστε διαφορετικά περιθώρια στο επάνω και στο κάτω μέρος του πίνακα, μπορείτε να ορίσετε την ιδιότητα περιθωρίου σε τρεις τιμές: η πρώτη θα είναι υπεύθυνη για το επάνω περιθώριο, η δεύτερη για την οριζόντια στοίχιση και η τρίτη για το κάτω περιθώριο: Πίνακας ( περιθώριο: 10 px auto 30 px; ) Οι ίδιοι οι πίνακες φαίνονται μάλλον φτωχοί και τα προγράμματα περιήγησης εμφανίζουν ορισμένα χαρακτηριστικά πίνακα, ιδίως τα πλαίσια, με τον δικό τους τρόπο. Ταυτόχρονα, αυτές οι ελλείψεις μπορούν εύκολα να διορθωθούν χρησιμοποιώντας τη δύναμη των στυλ. Ταυτόχρονα, τα μέσα για τη σχεδίαση πινάκων διευρύνονται σημαντικά, γεγονός που σας επιτρέπει να ενσωματώνετε με επιτυχία πίνακες στη σχεδίαση του ιστότοπου και να παρουσιάζετε τα δεδομένα πινάκων με μεγαλύτερη σαφήνεια. Χρώμα φόντου κελιού Το χρώμα φόντου όλων των κελιών του πίνακα ταυτόχρονα ορίζεται μέσω της ιδιότητας φόντου, η οποία εφαρμόζεται στον επιλογέα TABLE. Σε αυτήν την περίπτωση, θα πρέπει να θυμάστε τους κανόνες για τη χρήση στυλ, ιδίως την κληρονομικότητα των ιδιοτήτων των στοιχείων. Αν και η ιδιότητα φόντου δεν κληρονομείται, η προεπιλεγμένη τιμή φόντου για τα κελιά είναι διαφανής, π.χ. διαφάνεια, επομένως το εφέ πλήρωσης φόντου επιτυγχάνεται και για τα κελιά. Εάν, ταυτόχρονα με το TABLE, ορίσετε ένα χρώμα για τον επιλογέα TD ή TH, τότε αυτό το χρώμα θα οριστεί ως φόντο του κελιού (παράδειγμα 2.3). Παράδειγμα 2.3. Χρώμα του φόντου Επικεφαλίδα 1 Επικεφαλίδα 2 Κύτταρο 3 Κύτταρο 4 ΣΕ σε αυτό το παράδειγμαπαίρνουμε Μπλε χρώμαφόντο κελιού (ετικέτα ) και κόκκινο στον τίτλο (ετικέτα ). Αυτό συμβαίνει επειδή το στυλ για τον επιλογέα TH δεν έχει οριστεί, επομένως το φόντο του γονέα, σε αυτήν την περίπτωση του επιλογέα TABLE, "εμφανίζεται μέσω". Και το χρώμα για τον επιλογέα TD καθορίζεται ρητά, επομένως τα κελιά "γεμίζονται" με μπλε. Το αποτέλεσμα αυτού του παραδείγματος φαίνεται στο Σχ. 2.4. Ρύζι. 2.4. Αλλαγή χρώματος φόντου Περιθώρια μέσα στα κύτταρα Το περιθώριο είναι η απόσταση μεταξύ της άκρης του περιεχομένου ενός κελιού και του περιγράμματός του. Συνήθως το χαρακτηριστικό cellpadding μιας ετικέτας χρησιμοποιείται για αυτόν τον σκοπό. . Καθορίζει την τιμή του περιθωρίου σε pixel σε όλες τις πλευρές του κελιού. Επιτρέπεται η χρήση στυλ ιδιότητα παραγεμίσματοςπροσθέτοντάς το στον επιλογέα 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. Προβολή πίνακα κατά τη χρήση της απόστασης συνόρων Πρόγραμμα περιήγησης Internet ExplorerΟι εκδόσεις μέχρι και συμπεριλαμβανομένης της έκδοσης 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. Στοίχιση κειμένου σε κελιά Άδεια κελιά Τα προγράμματα περιήγησης εμφανίζουν διαφορετικά ένα κελί χωρίς τίποτα μέσα του. Το "Τίποτα" σε αυτήν την περίπτωση σημαίνει ότι δεν προστέθηκε ούτε εικόνα ούτε κείμενο μέσα στο κελί και ότι ο χώρος δεν λαμβάνεται υπόψη. Φυσικά, η εμφάνιση των κελιών διαφέρει μόνο εάν οριστεί ένα όριο γύρω τους. Όταν χρησιμοποιείτε ένα αόρατο περίγραμμα, η εμφάνιση των κελιών, ανεξάρτητα από το αν υπάρχει κάτι σε αυτά ή όχι, είναι η ίδια. Τα παλαιότερα προγράμματα περιήγησης δεν εμφάνιζαν το χρώμα φόντου των κενών κελιών προβολής Λεονάρντο 5 8 Ραφαήλ 11 Μιχαήλ Άγγελος 24 Ντονατέλο 13 Προβολή πίνακα μέσα Πρόγραμμα περιήγησης Safariφαίνεται στο Σχ. 2.11α. Ο ίδιος πίνακας στο πρόγραμμα περιήγησης IE7 φαίνεται στο Σχ. 2.11β. ΕΝΑ. Στο πρόγραμμα περιήγησης Safari, Firefox, Opera, IE8, IE9 σι. Στο πρόγραμμα περιήγησης IE7 Ρύζι. 2.11. Άποψη πίνακα με άδεια κελιά Συνιστούμε να διαβάσετε Χρησιμοποιώντας το Windows Equalizer Σήμερα θα δούμε: Οι αληθινοί γνώστες της μουσικής γνωρίζουν ότι για την ποιότητα... Κατεβάστε παραδείγματα Excel με τύπους και συναρτήσεις Αρχεία *.xlsx με παραδείγματα υπολογισμών τύπων και συναρτήσεων. Και επίσης δωρεάν... Χρησιμοποιώντας το Windows Equalizer Τα λειτουργικά συστήματα Windows που ξεκινούν με Vista χρησιμοποιούν ενσωματωμένο... Μπλουζα Παιδικά είδη Αυτο ΗΛΕΚΤΡΟΝΙΚΑ ΕΙΔΗ Εργαλείο Συσκευές Παιδικά είδη × Αναζήτηση ιστότοπου