CSS: τραπέζι σχεδιασμού. παραδείγματα της καταχώρισης

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

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

πίνακας σύνορα

CSS σχεδιασμού στυλ πίνακα περιλαμβάνει πάντα ένα παιχνίδι με ένα περίγραμμα (καρέ). Όλες οι προεπιλεγμένες πίνακες δεν είναι το πλαίσιο περίγραμμα. Δηλαδή, είναι ίσο με 0 pixel. Αλλά αυτό μπορεί να διορθωθεί με την ιδιοκτησία των συνόρων.

Μπορείτε να καθορίσετε το εξωτερικό πλαίσιο για το σύνολο του πίνακα:

τραπέζι {border: 3px συμπαγές μαύρο? }

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

th, td {σύνορα: 3px συμπαγές μαύρο?}

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

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

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

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

τραπέζι {border-top: 1px στερεό κόκκινο? }

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

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

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

Ο τίτλος αυτός εμφανίζεται με τον ίδιο τρόπο ως πρότυπο σε βιβλία (όπως «Πίνακα 1»).

Μπορείτε να καθορίσετε τη θέση του λεζάντα την πλευρά τίτλος και ιδιότητα (επάνω ή κάτω). Ευθυγράμμιση το αριστερό ή το δεξί ορίζεται από την ιδιότητα text-align.

πίνακες φόντο

Υπόβαθρο του πίνακα μπορεί να είναι οποιοδήποτε χρώμα ή μοτίβο. Χρώμα θέτει ένα ακίνητο background-color. Τα ονόματα των ιδιοτήτων συνάδει πλήρως με χρήσεις στην ομιλία. Αυτό διευκολύνει την αποθήκευση πολλές φορές.

Το χρώμα μπορεί να οριστεί ως το όνομα, και διαφορετικές κωδικοποιήσεις. Επιπλέον, μπορείτε να καθορίσετε τα εξής:

• Διάφανο - Διάφανο.
• Κληρονομούν - το χρώμα είναι το ίδιο με αυτό της μητρικής στοιχείου.
• Αρχική - προεπιλογή.

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

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

url (διεύθυνση URL)

Η διαδρομή προς το αρχείο μπορεί να είναι είτε σχετική ή απόλυτη.

Πιο περίπλοκη πλήρωσης μπορεί να γίνει με μια κλίση:

• γραμμική βαθμίδωση ()?
• ακτινική-κλίση ()?
• επαναλαμβάνοντας-γραμμική βαθμίδωση-() και επαναλαμβάνοντας-ακτινικής-κλίση () - βαθμίδωση επαναλαμβάνεται.

κυττάρων φόντο

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

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

• tr: nth-παιδιού (ακόμη) {...} - καθορίσετε interlaced?
• tr: nth-παιδιού (1) {...} - ένδειξη των ιδιοτήτων του μια συγκεκριμένη σειρά?
• td: νιοστής παιδί (ακόμη) {...} - μια ένδειξη των εναλλασσόμενων στηλών?
• td: νιοστής παιδί (1) {...} - ένδειξη των ιδιοτήτων του μια συγκεκριμένη στήλη.

Εκτός μπορούν να καθοριστούν αλληλουχία και τους αριθμούς - το πρώτο (td: πρώτα-παιδί) ή το τελευταίο (td: τελευταία-παιδί).

Το χάσμα μεταξύ των κυττάρων

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

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

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

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

σύνορα κατάρρευση: ξεχωριστή

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

σύνορα απόσταση: 20px.

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

σύνορα απόσταση: 10px20px.

Η διαφορά στα προγράμματα περιήγησης

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

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

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

στυλ περιγράμματος διαφέρουν επίσης σημαντικά.

Ως εκ τούτου, η ανάπτυξη βλέπετε πάντα το αποτέλεσμα σε διαφορετικά προγράμματα περιήγησης.

Σε CSS πίνακες σχεδιασμού συνιστάται να ελέγξετε τον τύπο του προγράμματος περιήγησης. Ιδιαίτερα μεγάλο πρόβλημα που χρησιμοποιείται για να είναι σε χρήστες με παλαιότερες εκδόσεις του Internet Explorer.

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

Τα περισσότερα προβλήματα προκύπτουν από τις σκιές.

CSS: Παραδείγματα Πίνακας Format

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

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

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

Οι ακμές μπορούν να γίνουν στρογγυλεμένες. Φαίνεται πολύ ωραίο.

συμπέρασμα

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

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

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