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

Σύνταξη

διάστιχο: τιμή [τιμή]

Επιχειρήματα

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





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










12
34


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

Ρύζι. 1. Εφαρμογή της επιλογής απόστασης περιγραμμάτων

Σημείωση

Εάν θέλετε να προσθέσετε ετικέτα

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

τραπέζια

  • Το border-collapse ορίζει τον τρόπο εμφάνισης περιγραμμάτων γύρω από τα κελιά του πίνακα. Αυτή η παράμετρος παίζει ρόλο όταν έχει οριστεί ένα πλαίσιο για τα κελιά, τότε θα ληφθεί μια γραμμή διπλού πάχους στη διασταύρωση των κελιών. Η προσθήκη της τιμής σύμπτυξης αναγκάζει το πρόγραμμα περιήγησης να αναλύσει αυτές τις θέσεις στον πίνακα και να αφαιρέσει τις διπλές γραμμές σε αυτόν.
  • Το table-layout καθορίζει τον τρόπο με τον οποίο το πρόγραμμα περιήγησης πρέπει να υπολογίζει το ύψος και το πλάτος των κελιών του πίνακα με βάση το περιεχόμενό του.
  • Το διάστιχο ορίζει την απόσταση μεταξύ των περιγραμμάτων κελιών σε έναν πίνακα. Το χαρακτηριστικό διάστιχο δεν λειτουργεί όταν ο πίνακας έχει οριστεί ως σύμπτυξη περιγράμματος.

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

    σύνορα-σύμπτυξη: ξεχωριστό - κάθε κελί έχει το δικό του περίγραμμα (προεπιλογή)

    σύνορο-κατάρρευση: κατάρρευση - γενικό περίγραμμα

    border-collapse: inherit - η τιμή λαμβάνεται από γονικό στοιχείο

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

    Στυλ:

    και και το στυλ τους.

    Παράδειγμα επισήμανσης στήλης πίνακα

    1
    2
    3
    4
    5
    6

    		 Σελίδα

    Εργασία για το σπίτι.

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

    1. Δημιουργήστε τρεις πίνακες, ο καθένας με μια γραμμή και τρεις στήλες (στήλες).
    2. Στον πρώτο πίνακα, τοποθετήστε την κεφαλίδα ή την "κεφαλίδα" της σελίδας (δεν πρέπει να συγχέεται με την "κεφαλίδα" του εγγράφου HTML), στον δεύτερο - το αριστερό και το δεξί μενού, καθώς και το κύριο περιεχόμενο (περιεχόμενο) , στο τρίτο - Υποσέλιδο ή "υποσέλιδο" της σελίδας.
    3. Αφήστε το πλάτος της πρώτης και της τελευταίας στήλης κάθε πίνακα να είναι σταθερό.
    4. Σπουδαίος. Χρησιμοποιήστε την ετικέτα μόνο για να δημιουργήσετε τέσσερα κουμπιά οριζόντιο μενούστην κεφαλίδα της σελίδας. Σε άλλες περιπτώσεις, αφήστε τις εικόνες να πάνε στο παρασκήνιο και στα δεύτερα κελιά των πινάκων χρησιμοποιούνται γενικά μόνο χρώματα και στον πρώτο και τελευταίο πίνακα είναι #99FF99.
    5. Αφήστε το κείμενο του περιεχομένου της σελίδας να ευθυγραμμιστεί και στις δύο πλευρές του κελιού του πίνακα, με τον τίτλο στο κέντρο.
    6. Όσον αφορά τις αποστάσεις μεταξύ των κελιών των πινάκων, καθώς και τις εσοχές των κελιών, σκεφτείτε μόνοι σας πού πρέπει να αφαιρεθούν εντελώς και πού να αυξηθούν.

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

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

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

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

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

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

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

    Παράδειγμα στρογγυλοποίησης γωνίας κυψέλης
    ΕτικέταΠεριγραφή
    .
    Ορίζει τα περιεχόμενα του πίνακα.
    Καθορίζει το όνομα του πίνακα.
    Καθορίζει το κελί κεφαλίδας ενός πίνακα.
    Ορίζει μια σειρά πίνακα.
    Ορίζει ένα κελί δεδομένων πίνακα.
    Χρησιμοποιείται για να περιέχει μια κεφαλίδα ομάδας σε έναν πίνακα (κεφαλίδα πίνακα).
    Χρησιμοποιείται για να περιέχει το «σώμα» του τραπεζιού.
    Χρησιμοποιείται για να περιέχει το «υποσέλιδο» του πίνακα (υποσέλιδο).
    Καθορίζει τις δοσμένες ιδιότητες στήλης για κάθε στήλη εντός της ετικέτας
    Ορίζει μια ομάδα στηλών σε έναν πίνακα.

    Εργασία με εσοχές σε πίνακα

    Χρήση επένδυσης σε τραπέζι
    Εσοχές πίνακα
    1 2 3 4
    2
    3
    4

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

    • Τοποθετήσαμε το τραπέζι στο κέντρο χρησιμοποιώντας την τεχνική οριζόντιας κεντραρίσματος με εξωτερικά περιθώρια (περιθώριο : 0 auto ).
    • Για το όνομα του πίνακα (ετικέτα
    ) ορίσαμε το κάτω padding στα 19 pixel. Ελπίζω να μην σας μπερδεύουν οι άνισοι αριθμοί :)

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

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

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

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

    Αλλαγή της απόστασης μεταξύ των πινάκων
    Διάστιχο περιγράμματος: 30 px 10 px;
    1 2 3
    2
    3
    διάστιχο: 0;
    1 2 3
    2
    3
    διάστιχο:0,2em;
    1 2 3
    2
    3

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

    • float : αριστερά ). Εάν χάσατε το θέμα των αιωρούμενων στοιχείων, μπορείτε πάντα να επιστρέψετε σε αυτό σε αυτόν τον οδηγό - "".
    • Επιπλέον, ορίζουμε το δεξί περιθώριο των πινάκων στα 30 εικονοστοιχεία και ορίζουμε την κατακόρυφη στοίχιση των πινάκων (η κορυφή του στοιχείου ευθυγραμμίζεται με την κορυφή του ψηλότερου στοιχείου). Θα επιστρέψουμε σε μια λεπτομερή συζήτηση αυτής της ιδιότητας σε αυτό το άρθρο.
    ) είναι τολμηρή.
  • Για τα κελιά του πίνακα (κεφαλίδα και κελιά δεδομένων), ορίσαμε ένα συμπαγές περίγραμμα 1 px με εξάγωνο χρώμα #F50 και ορίσαμε paddings 19 px σε όλες τις πλευρές.
  • Για το πρώτο τραπέζι με την τάξη .πρώταορίσαμε το διάστημα μεταξύ των κελιών πίνακα (ιδιότητα διαστήματος περιγράμματος) σε 30 px 10 px , για τον δεύτερο πίνακα με την κλάση .δεύτεροςίσο με μηδέν, για τον τρίτο πίνακα με την κλάση .τρίτοςίσο με 0,2em .

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

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

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

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

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

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

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

    Παράδειγμα εμφάνισης περιγραμμάτων γύρω από κελιά πίνακα
    διάστιχο: 0;
    1 2 3
    2
    3
    σύνορα-κατάρρευση: κατάρρευση;
    1 2 3
    2
    3

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

    • Κάναμε τα τραπέζια μας να επιπλέουν και μετακινηθήκαμε προς τα αριστερά (float : αριστερά ), ορίσαμε το εξωτερικό τους δεξιό περιθώριο στα 30 px .
    • Ορισμός για το όνομα του πίνακα (ετικέτα
    ) είναι τολμηρή.
  • Για τα κελιά του πίνακα (κεφαλίδα και κελιά δεδομένων) ορίσαμε ένα συμπαγές περίγραμμα 5 εικονοστοιχείων με δεκαεξαδικό χρώμα #F50 και ορίσαμε σταθερό πλάτος 50 εικονοστοιχεία και ύψος 75 εικονοστοιχεία.
  • Για το πρώτο τραπέζι με την τάξη .πρώταμηδενίζουμε την απόσταση μεταξύ των κελιών του πίνακα (διάστημα περιγράμματος : 0 ;) και για τον δεύτερο πίνακα με την κλάση .δεύτεροςορίστε την ιδιότητα σύμπτυξης περιγράμματος σε σύμπτυξη , η οποία συγχωνεύει τα περιγράμματα κελιών σε ένα όταν είναι δυνατόν.

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

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

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

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

    Παράδειγμα εμφάνισης κενών κελιών πίνακα
    άδεια-κελιά: εμφάνιση;
    1 2 3
    2 ☺
    3 ☺
    άδεια-κελιά: απόκρυψη;
    1 2 3
    2 ☺
    3 ☺

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

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

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

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

    Ένα παράδειγμα χρήσης της ιδιότητας στην πλευρά της λεζάντας
    Τίτλος πάνω από τον πίνακα
    ΟνομαΤιμή
    Ψάρι350 ρούβλια
    Κρέας250 ρούβλια

    Τίτλος κάτω από το τραπέζι
    ΟνομαΤιμή
    Ψάρι350 ρούβλια
    Κρέας250 ρούβλια

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Ένα παράδειγμα χρήσης της ιδιότητας table-layout
    διάταξη πίνακα: αυτόματη;
    Ονομα 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

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

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

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

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

    Ένα παράδειγμα χρήσης της ψευδο-τάξης :nth-child με πίνακες
    1 2 3 4 5 6 7 8 9 10 11 12 13 14
    2
    3
    4

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

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

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

    Ένα παράδειγμα styling σειρών σε πίνακες
    ΥπηρεσίαΤιμή
    Αθροισμα 15 000
    1 1 000
    2 2 000
    3 3 000
    4 4 000
    5 5 000

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

    • Ορίσαμε το πλάτος του πίνακα στο 100% του πλάτους του γονικού στοιχείου, για την κεφαλίδα και τα κελιά δεδομένων ορίσαμε ένα συμπαγές περίγραμμα πλάτους 1 px.
    • Σετ για στοιχείο
    1 2 3 4 5

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

    • Κεντράρουμε τον πίνακα με εξωτερικά περιθώρια, ορίζουμε το πλάτος και το ύψος των κελιών κεφαλίδας σε 50 εικονοστοιχεία , καθορίζεται διαφανήςπερίγραμμα 5 pixel.
    • Διαπιστώθηκε ότι όταν τοποθετείτε το δείκτη του ποντικιού (ψευδοκλάση :hover) στο κελί της κεφαλίδας, εμφανίζεται το φόντο μπλεχρωματιστά, Πορτοκάλιχρώμα κειμένου, περίγραμμα πορτοκάλιχρώματα 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 (ψευδοκλάση :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. Καταργήσαμε το κενό μεταξύ των κελιών χρησιμοποιώντας την ιδιότητα σύμπτυξης περιγράμματος με την τιμή .
    • Και έτσι, χρησιμοποιώντας το ::after pseudo-στοιχείο προσθέτουμε περιεχόμενο μετά από κάθε στοιχείο σε αιώρηση. Το ψευδοστοιχείο ::after πρέπει να χρησιμοποιηθεί μαζί με την ιδιότητα περιεχομένου, χάρη στην οποία εισάγουμε ένα στοιχείο σε επίπεδο μπλοκ που έχει χρώμα φόντου πράσινο του δάσουςκαι έχει απόλυτη τοποθέτηση.
    • Η απόλυτη τοποθέτηση εδώ είναι απαραίτητη για τη μετατόπιση του στοιχείου σε σχέση με το καθορισμένο άκρο του προγόνου του, ενώ ο πρόγονος πρέπει να έχει μια τιμή θέσης διαφορετική από την προεπιλεγμένη - στατική , διαφορετικά η καταμέτρηση θα είναι σχετική με την καθορισμένη άκρη του παραθύρου του προγράμματος περιήγησης, για αυτό λόγος που στήσαμε για το τραπέζι σχετική τοποθέτηση(συγγενής ).
    • Ορίζουμε την επάνω ιδιότητα για το μπλοκ που δημιουργήθηκε, η οποία καθορίζει την κατεύθυνση μετατόπισης του τοποθετημένου στοιχείου από την επάνω άκρη και την ιδιότητα κάτω, η οποία καθορίζει την κατεύθυνση μετατόπισης του τοποθετημένου στοιχείου από την κάτω άκρη. Και οι δύο ιδιότητες ορίστηκαν σε 0 , επομένως το μπλοκ θα καταλαμβάνει πλήρως το στοιχείο από το κάτω και το πάνω μέρος του πίνακα, το πλάτος αυτού του μπλοκ ορίστηκε στο 25%, αυτή η τιμή αντιστοιχεί στην τιμή του πλάτους του ίδιου του κελιού.
    • Και η τελική ιδιότητα που ορίσαμε για αυτό το μπλοκ: z-index με τιμή "-1" καθορίζει τη σειρά των τοποθετημένων στοιχείων σε άξονας Z. Αυτή η ιδιότητα είναι απαραίτητη ώστε το κείμενο να βρίσκεται μπροστά από αυτό το μπλοκ και όχι πίσω από αυτό, εάν δεν ορίσετε τιμή μικρότερη από το μηδέν, τότε το μπλοκ θα κλείσει το κείμενο.

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

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

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

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


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


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