Στυλ πλαισίου πίνακα σε html. Ένας εύκολος τρόπος για να δημιουργήσετε ένα περίγραμμα γύρω από ένα στοιχείο

Πλαίσια (παράμετροι μπλοκ)

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

Παράμετροι	Εννοια	Περιγραφή
περίγραμμα-πάνω-χρώμα περίγραμμα-δεξιά-χρώμα περίγραμμα-αριστερό-χρώμα περίγραμμα-κάτω-χρώμα χρώμα πλαισίου	χρώμα (χωρίς χρώμα Προκαθορισμένο)	Καθορίζει το χρώμα των τεσσάρων πλευρών των πλαισίων. Εάν αντικαταστήσετε ένα χρώμα με μια διεύθυνση URL εικόνας, η εικόνα θα επαναληφθεί για να σχηματίσει ένα περίγραμμα.
σύνορα-top-style σύνορο-δεξιό στυλ σύνορο-αριστερό στυλ σύνορα-κάτω-στυλ στυλ περιγράμματος	κανένα (προεπιλογή) στερεός διπλό ράβδωση κορυφογραμμή ένθεση αρχή	Καθορίζει το στυλ των τεσσάρων πλευρών των πλαισίων.
κορυφή περιγράμματος σύνορα-δεξιά σύνορα-αριστερά σύνορο-κάτω σύνορο	πλάτος πλαισίου, frame_style, χρώμα (Προκαθορισμένο: μεσαίο, κανένα, χωρίς χρώμα)	Ορίζει τις ιδιότητες των τεσσάρων πλευρών των πλαισίων. Λειτουργεί το ίδιο με τις ιδιότητες συμπλήρωσης (δείτε παρακάτω), εκτός από το ότι το περίγραμμα είναι ορατό. πλάτος πλαισίουμπορεί να είναι μέτρια, λεπτή ή παχιά ή να δίνεται σε μονάδες μέτρησης. πλαίσιο_στυλμπορεί να είναι κανένα ή συμπαγές Διαφωνία χρώμαχρησιμοποιείται για τον καθορισμό του χρώματος πλήρωσης του φόντου ενός στοιχείου κατά τη φόρτωση, καθώς και πίσω από τα διαφανή μέρη του στοιχείου. Αν αντ' αυτού περάσετε τη διεύθυνση της εικόνας, τότε το μοτίβο θα επαναληφθεί, γεμίζοντας το περίγραμμα του πλαισίου.
περίγραμμα-πάνω-πλάτος περίγραμμα-δεξιά-πλάτος περίγραμμα-αριστερό-πλάτος περίγραμμα-κάτω-πλάτος πλάτος συνόρων	λεπτός μεσαίο (προεπιλογή) πυκνός μήκος	Καθορίζει το πλάτος του περιγράμματος γύρω από το στοιχείο. Κάθε πλευρά μπορεί να ρυθμιστεί με την αντίστοιχη παράμετρο. Μπορείτε να αντικαταστήσετε τη ρύθμιση τεσσάρων μεμονωμένων ιδιοτήτων ορίζοντας μία ιδιότητα πλάτος συνόρωνόπως και για τις ιδιότητες εσοχής περιθώριο.
ciip	ορθό (/πάνω/δεξιά/κάτω/αριστερά/) αυτόματη (προεπιλογή)	Καθορίζει πόσο από ένα στοιχείο είναι ορατό. Οτιδήποτε εκτός της περιοχής που καθορίζεται από αυτήν την παράμετρο δεν είναι ορατό.
απεικόνιση	"", κανένα "" (Προκαθορισμένο)	Αυτή η παράμετρος καθορίζει εάν το στοιχείο θα αποδοθεί.
φλοτέρ	κανένα (προεπιλογή) αριστερά σωστά	Καθορίζει ότι το στοιχείο τυλίγεται γύρω από άλλα στοιχεία προς τα αριστερά ή προς τα δεξιά αντί να τα τοποθετεί κάτω από αυτά. Υποστηρίζεται από ετικέτες , ...
ύψος	αυτόματη (προεπιλογή) μήκος	Ρυθμίστε το ύψος του στοιχείου και μετρήστε το εάν χρειάζεται. Η τιμή επιστρέφεται ως συμβολοσειρά που περιλαμβάνει μονάδες (px, %, κ.λπ.). Για να λάβετε μια αριθμητική τιμή, χρησιμοποιήστε την ιδιότητα posHeight.
αριστερά	αυτόματη (προεπιλογή) μήκος ενδιαφέρον	Ορίστε την οριζόντια συντεταγμένη του στοιχείου, επιτρέποντάς σας να ορίσετε και να μετακινήσετε σωστά στοιχεία. Η τιμή επιστρέφεται ως συμβολοσειρά που περιλαμβάνει μονάδες (px, %, κ.λπ.). Η ιδιότητα posLeft χρησιμοποιείται για να ληφθεί η τιμή ως αριθμός.

Παράδειγμα 1:
Αυτή η γραμμή είναι υπογραμμισμένη.Παράδειγμα 2: Διαφορετικοί τύποι κουφωμάτων.

1.κανένα-Χωρίς σύνορα (σύνορα: κανένα;)

2. στερεά-Υπάρχει ένα περίγραμμα (περίγραμμα: 1px συμπαγές;)

Παράδειγμα 4: Πλαίσιο με στρογγυλές γωνίες.

. στις φορολογικές δηλώσεις?
. πιστοποιητικά 2-NDFL;

Όλα τα παραπάνω έγγραφα υποδεικνύουν τον 11-ψήφιο κωδικό OKTMO αντί για τους κωδικούς OKATO που χρησιμοποιήθηκαν προηγουμένως.

#org { πλάτος: 80% margin-top:2em; περιθώριο-αριστερά: αυτόματο; margin-right: auto; περίγραμμα-ακτίνα: 10px 10px; -moz-border-radius: 10px 10px; -webkit-border-radius: 10px 10px; padding: 15px 20px 15px 80px; περιθώριο: 0px 0px 0px 0px; -webkit-box-shadow: 2px 2px 3px #999; -moz-box-shadow: 2px 2px 3px #999; /*IE min-height hack*/ ελάχ. ύψος: 40 px; ύψος:αυτόματο !σημαντικό; ύψος: 40 px; υπερχείλιση:ορατός; θέση:συγγενής; bottom:6px; δεξιά: 6px; περίγραμμα: 1px συμπαγές #7e5a25; /*Ορίστε τη θέση του εικόνα φόντου*/ φόντο-θέση: 20 px 50%; φόντο-επανάληψη: χωρίς επανάληψη. text-align: δικαιολογώ; μέγεθος γραμματοσειράς: 0,9 εκ χρώμα φόντου: #e8e3d4; φόντο-εικόνα: url(baba.gif); }

Από την 1η Ιανουαρίου 2014, οι νέοι κωδικοί OKTMO αναγράφονται σε: . στις φορολογικές δηλώσεις? . πιστοποιητικά 2-NDFL; . εντολές πληρωμής (πεδίο 105). . απόδειξη πληρωμής φόρων, τελών, δασμών έντυπο ΠΔ-4 φόρος. Όλα τα έγγραφα που παρατίθενται υποδεικνύουν τον 11ψήφιο κωδικό OKTMO αντί για τους κωδικούς OKATO που χρησιμοποιήθηκαν προηγουμένως.

Παράδειγμα 5: Το πλαίσιο είναι διακοσμημένο με ένθετα τραπέζια.

Suvorov A.V.

Ένθετα τραπέζια

εικόνα Τραπέζι 1 Στενό μαύρο περίγραμμα (5 εικονοστοιχεία) Παράμετροι πίνακα: table--> bgcolor=#000000 style="border:2px solid #a3852f" td--> style="padding: 5 εικονοστοιχεία"

Παράδειγμα 6: Κάθετο πλαίσιο.

Πλάτος και ύψος στοιχείων μπλοκ

Ιδιότητες CSS πλάτοςΚαι ύψος- ορίστε το πλάτος και το ύψος των στοιχείων μπλοκ.
Το πλάτος και το ύψος ενός στοιχείου μπορούν να ρυθμιστούν με τους εξής τρόπους:

• αυτο- Το μέγεθος ενός στοιχείου καθορίζεται από το περιεχόμενό του. (Προκαθορισμένο)
• % - Το μέγεθος του στοιχείου ορίζεται ως ποσοστό του ύψους/πλάτους του γονικού στοιχείου.
• px- Το μέγεθος του στοιχείου ορίζεται σε pixel ή οποιεσδήποτε άλλες μονάδες CSS.

Παράδειγμα:

Διαχείριση περιεχομένου στοιχείων

Τι να κάνετε με το περιεχόμενο ενός στοιχείου εάν υπερβαίνει το μέγεθός του;

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

Ιδιοκτησία ξεχείλισμαμπορεί να έχει τις ακόλουθες τιμές:

• ορατός- Το στοιχείο τεντώνεται στο απαιτούμενο μέγεθος. (Προκαθορισμένο)
• κρυμμένος- Το περιεχόμενο του στοιχείου «κόβεται» μόνο εκείνο το τμήμα του που χωράει στο στοιχείο είναι ορατό.
• πάπυρος- Προστίθενται γραμμές κύλισης (πάντα! ακόμα κι αν το περιεχόμενο ταιριάζει στο στοιχείο).
• αυτο- Εάν χρειάζεται, προστίθενται γραμμές κύλισης.

Παράδειγμα:

Αποτέλεσμα

css

css(Αγγλικά Cascading Style Sheets - cascading style sheets) - μια επίσημη γλώσσα για την περιγραφή της εμφάνισης ενός εγγράφου γραμμένου με χρήση γλώσσας σήμανσης. Τρόποι συμπερίληψης CSS σε ένα έγγραφο
Οι κανόνες CSS είναι γραμμένοι στην επίσημη γλώσσα CSS και βρίσκονται σε φύλλα στυλ, δηλαδή, τα φύλλα στυλ περιέχουν κανόνες CSS. Αυτά τα φύλλα στυλ μπορούν να βρίσκονται στο ίδιο το έγγραφο web, εμφάνισηπου περιγράφουν και σε ξεχωριστά αρχεία που έχουν τη μορφή CSS. (Ουσιαστικά, η μορφή CSS είναι η συνηθισμένη αρχείο κειμένου. Το αρχείο .css δεν περιέχει τίποτα άλλο παρά μια λίστα κανόνων CSS και σχόλια για αυτούς.) Δηλαδή, αυτά τα φύλλα στυλ μπορούν να συμπεριληφθούν, ενσωματωμένα στο έγγραφο ιστού που περιγράφουν με τέσσερις διαφορετικούς τρόπους:

1. Όταν το φύλλο στυλ είναι μέσα ξεχωριστό αρχείο, μπορεί να προσαρτηθεί σε ένα έγγραφο web χρησιμοποιώντας την ετικέτα , που βρίσκεται σε αυτό το έγγραφο μεταξύ των ετικετών Και.
   (Ετικέτα θα έχει οριστεί ένα χαρακτηριστικό href στη διεύθυνση αυτού του φύλλου στυλ). Όλοι οι κανόνες σε αυτόν τον πίνακα ισχύουν σε ολόκληρο το έγγραφο.

   
   .....
   
   

2. Όταν ένα φύλλο στυλ βρίσκεται σε ξεχωριστό αρχείο, μπορεί να συμπεριληφθεί σε ένα έγγραφο web χρησιμοποιώντας την οδηγία @import που βρίσκεται σε αυτό το έγγραφο μεταξύ των ετικετών Και) αμέσως μετά την ετικέτα
   

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

   
   .....
   
   

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

   αγοράστε έναν ελέφαντα

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

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

Μέσα στην ετικέτα

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

Ευθυγράμμιση περιεχομένου στήλης με ετικέτα

λειτουργεί στο πρόγραμμα περιήγησης Internet Explorerκαι δεν λειτουργεί μέσα Πρόγραμμα περιήγησης Firefoxκαι μερικοί άλλοι.

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

Δημιουργούμε μια κλάση στυλ, για παράδειγμα, με το όνομα jewel και την εφαρμόζουμε στα κελιά της αριστερής στήλης (παράδειγμα 3).

Παράδειγμα 3: Ευθυγράμμιση με Στυλ

ή

. Είναι τα κελιά που περιέχουν όλο το περιεχόμενο του πίνακα που εμφανίζεται στην ιστοσελίδα. πλαίσιο τραπεζιού Από προεπιλογή, ένας πίνακας HTML σε μια ιστοσελίδα εμφανίζεται χωρίς περίγραμμα, για να προσθέσετε ένα περίγραμμα στον πίνακα, καθώς και σε όλα τα άλλα στοιχεία, χρησιμοποιήστε την ιδιότητα CSS περιγράμματος. Αλλά θα πρέπει να δώσετε προσοχή στο γεγονός ότι εάν προσθέσετε ένα περίγραμμα μόνο στο στοιχείο , τότε θα εμφανιστεί σε ολόκληρο τον πίνακα. Προκειμένου τα κελιά του πίνακα να έχουν επίσης πλαίσιο, θα πρέπει να ορίσετε την ιδιότητα περιγράμματος για τα στοιχεία , προστίθεται στο δοχείο Και . Table, th, td ( περίγραμμα: 1px συμπαγές μαύρο; ) Δοκιμάστε » Τώρα τόσο ο πίνακας όσο και τα κελιά έχουν περιθώρια και κάθε κελί και πίνακας έχουν τα δικά τους περιγράμματα. Ως αποτέλεσμα, εμφανίστηκε ένας κενός χώρος μεταξύ των πλαισίων, η ιδιότητα περίγραμμα διαστήματος, η οποία έχει οριστεί για ολόκληρο τον πίνακα, σας επιτρέπει να ελέγχετε το μέγεθος αυτού του χώρου. Με άλλα λόγια, δεν μπορείτε να ελέγξετε την απόσταση μεταξύ διαφορετικών κελιών ξεχωριστά. Ακόμα κι αν αφαιρέσετε τα κενά μεταξύ των κελιών με την ιδιότητα περίγραμμα διαστήματος ρυθμισμένη στο 0, τα περιγράμματα των κελιών θα αγγίζουν το ένα το άλλο, διπλασιάζοντας. Η ιδιότητα σύμπτυξης περιγράμματος χρησιμοποιείται για τη συγχώνευση περιγραμμάτων κελιών. Μπορεί να πάρει δύο τιμές: ξεχωριστό: είναι η προεπιλεγμένη τιμή. Τα κελιά εμφανίζονται στο μικρή απόστασηχώρια, κάθε κελί έχει το δικό του περίγραμμα. σύμπτυξη: συγχωνεύει γειτονικά πλαίσια σε ένα, όλα τα κενά μεταξύ των κελιών, καθώς και μεταξύ των κελιών και του πλαισίου του πίνακα, αγνοούνται. Ονομα Επώνυμο Όμηρος Simpson Περιθώριο Simpson Ονομα Επώνυμο Όμηρος Simpson Περιθώριο Simpson Προσπαθήστε " Μέγεθος τραπεζιού Μετά την προσθήκη περιγραμμάτων στα κελιά του πίνακα, έγινε αντιληπτό ότι τα περιεχόμενα των κελιών ήταν πολύ κοντά στις άκρες. Μπορείτε να χρησιμοποιήσετε την ιδιότητα padding για να προσθέσετε κενό διάστημα μεταξύ των άκρων των κελιών και των περιεχομένων τους: Th, td ( padding: 7px; ) Δοκιμάστε » Το μέγεθος ενός τραπεζιού εξαρτάται από το περιεχόμενό του, αλλά συχνά υπάρχουν περιπτώσεις όπου το τραπέζι είναι πολύ στενό και καθίσταται απαραίτητο να το τεντώσετε. Το πλάτος και το ύψος του πίνακα μπορούν να αλλάξουν χρησιμοποιώντας τις ιδιότητες πλάτους και ύψους, ορίζοντας τις επιθυμητές διαστάσεις είτε για τον ίδιο τον πίνακα είτε για τα κελιά: Πίνακας ( πλάτος: 70%; ) ου ( ύψος: 50 px; ) Δοκιμάστε » Στοίχιση κειμένου Από προεπιλογή, το κείμενο στα κελιά κεφαλίδας του πίνακα είναι κεντραρισμένο και στα κανονικά κελιά το κείμενο αφήνεται στοιχισμένο, χρησιμοποιώντας την ιδιότητα text-align μπορείτε να ελέγξετε την οριζόντια στοίχιση του κειμένου. Η ιδιότητα CSS κάθετης στοίχισης σάς επιτρέπει να ελέγχετε την κάθετη στοίχιση του περιεχομένου κειμένου. Από προεπιλογή, το κείμενο στοιχίζεται κατακόρυφα στο κέντρο των κελιών. Η κατακόρυφη στοίχιση μπορεί να παρακαμφθεί χρησιμοποιώντας μία από τις τιμές ιδιοτήτων κάθετης στοίχισης: κορυφή: το κείμενο στοιχίζεται στην κορυφή του κελιού μέση: στοιχίζει το κείμενο στο κέντρο (προεπιλογή) bottom: το κείμενο στοιχίζεται στο κάτω περίγραμμα του κελιού Ονομα Επώνυμο Όμηρος Simpson Περιθώριο Simpson Προσπαθήστε " Εναλλαγή χρώματος φόντου σειρών πίνακα Όταν προβάλλετε μεγάλους πίνακες που περιέχουν πολλές σειρές με πολλές πληροφορίες, μπορεί να είναι δύσκολο να παρακολουθείτε ποια δεδομένα αφορούν μια συγκεκριμένη σειρά. Για να βοηθήσετε τους χρήστες να προσανατολιστούν, μπορείτε να χρησιμοποιήσετε δύο διαφορετικά χρώματα φόντου εναλλάξ. Για να δημιουργήσετε το περιγραφόμενο εφέ, μπορείτε να χρησιμοποιήσετε τον επιλογέα κλάσης, προσθέτοντάς τον σε κάθε δεύτερη σειρά του πίνακα: Ονομα Επώνυμο Θέση Όμηρος Simpson πατέρας Περιθώριο Simpson μητέρα Μπαρτ Simpson Ενας γιος Λίζα Simpson κόρη Προσπαθήστε " Προσθήκη χαρακτηριστικό κλάσηςσε κάθε δεύτερη γραμμή είναι μια μάλλον κουραστική εργασία. Στο CSS3, η ψευδο-κλάση :nth-child έχει προστεθεί για να λύσει αυτό το πρόβλημα με έναν εναλλακτικό τρόπο. Τώρα το αποτέλεσμα της εναλλαγής μπορεί να επιτευχθεί μόνο χρησιμοποιώντας CSSχωρίς αλλαγή της σήμανσης HTML του εγγράφου. Με την ψευδο-κλάση :nth-child, μπορείτε να επιλέξετε όλες τις ζυγές ή περιττές σειρές σε έναν πίνακα χρησιμοποιώντας μία από τις λέξεις-κλειδιά: άρτιος (άρτιος) ή περιττός (μονός): Tr:nth-child(odd) (χρώμα φόντου: #EAF2D3; ) Δοκιμάστε » Αλλαγή φόντου σειράς κατά την τοποθέτηση του δείκτη Ένας άλλος τρόπος για να βελτιώσετε την αναγνωσιμότητα των δεδομένων σε πίνακα είναι να αλλάξετε το χρώμα φόντου μιας σειράς όταν τοποθετείτε το δείκτη του ποντικιού πάνω της με το ποντίκι. Αυτό θα βοηθήσει στην επισήμανση του επιθυμητού περιεχομένου του πίνακα και θα αυξήσει την οπτική αντίληψη των δεδομένων. Η εφαρμογή αυτού του εφέ είναι πολύ απλή, το μόνο που χρειάζεται να κάνετε είναι να προσθέσετε την ψευδο-κλάση :hover στον επιλογέα σειρών του πίνακα και να ορίσετε το επιθυμητό χρώμα φόντου: Tr:hover (χρώμα φόντου: #E0E0FF; ) Δοκιμάστε » Στοίχιση στο κέντρο του πίνακα Η στοίχιση ενός πίνακα HTML στο κέντρο είναι δυνατή μόνο εάν το πλάτος του πίνακα είναι μικρότερο από το πλάτος του γονικού στοιχείου του. Για να ευθυγραμμίσετε τον πίνακα στο κέντρο, πρέπει να χρησιμοποιήσετε την ιδιότητα περιθωρίου, ρυθμίζοντάς την σε τουλάχιστον δύο τιμές: η πρώτη τιμή θα είναι υπεύθυνη για το εξωτερικό περιθώριο του πίνακα από πάνω και κάτω και η δεύτερη - για αυτόματη ισοπέδωσηκέντρο: Πίνακας ( περιθώριο: 10 px auto; ) Δοκιμάστε » Εάν χρειάζεστε διαφορετικά περιθώρια στο επάνω και στο κάτω μέρος του πίνακα, τότε μπορείτε να ορίσετε την ιδιότητα περιθωρίου σε τρεις τιμές: η πρώτη θα είναι υπεύθυνη για το επάνω περιθώριο, η δεύτερη για την οριζόντια στοίχιση και η τρίτη για το κάτω περιθώριο: Πίνακας ( περιθώριο: 10 px auto 30 px; ) Ενώ οι γραμμές μεταξύ των κελιών καθιστούν δυνατό τον ξεκάθαρο διαχωρισμό ενός δεδομένων από το άλλο, ο λευκός χώρος γύρω από το κείμενο κάνει την ίδια δουλειά. Και για να ξεχωρίζει το τραπέζι στις ιστοσελίδες, ορίστε για αυτό συγκεκριμένο χρώμαΙστορικό. Σε αυτήν την περίπτωση, επιτρέπεται να ορίσετε τον τίτλο διαφορετικού χρώματος, όπως φαίνεται στο Σχ. ένας. Για να αλλάξετε το χρώμα φόντου ενός πίνακα, χρησιμοποιήστε την ιδιότητα φόντου προσθέτοντάς την στον επιλογέα TABLE. Για ομορφιά, σχεδιάστε μια γραμμή στο κάτω μέρος του πίνακα χρησιμοποιώντας την ιδιότητα περίγραμμα-κάτω (παράδειγμα 1). Παράδειγμα 1: Δημιουργία πίνακα χωρίς περίγραμμα 2004 2005 2006 Ρουμπίνια 43 51 79 σμαράγδια 28 34 48 Ζαφείρια 29 57 36 Επειδή το περιεχόμενο της ετικέτας αρχικά ευθυγραμμίζεται στο κέντρο και στη συνέχεια για να αλλάξει αυτό το χαρακτηριστικό αυτό το παράδειγμαη ιδιότητα στυλ στοίχισης κειμένου εφαρμόζεται με την τιμή αριστερά . Μπορείτε να κάνετε το αντίθετο και να ορίσετε την κεντρική στοίχιση για τα κελιά . Αλλά τα περιεχόμενα της πρώτης στήλης με τα ονόματα των λίθων είναι καλύτερα να μείνουν ευθυγραμμισμένα προς τα αριστερά. Για να ορίσετε διαφορετική στοίχιση περιεχομένου για διαφορετικές στήλες, εξετάστε δύο τρόπους. Η πρώτη μέθοδος είναι να χρησιμοποιήσετε την ετικέτα και ορίζει, ειδικότερα, τη στοίχιση για μεμονωμένες στήλες (παράδειγμα 2). Παράδειγμα 2: Ευθυγράμμιση με ετικέτα 2004 2005 2006 Ρουμπίνια 43 51 79 σμαράγδια 28 34 48 Ζαφείρια 29 57 36 Το χαρακτηριστικό align της ετικέτας

	2004	2005	2006
Ρουμπίνια	43	51	79
σμαράγδια	28	34	48
Ζαφείρια	29	57	36

Αυτό το παράδειγμα αλλάζει το χρώμα φόντου και τη στοίχιση για όλα τα κελιά όπου έχει οριστεί το χαρακτηριστικό class="jewel". Το αποτέλεσμα του παραδείγματος φαίνεται στο Σχ. 2.

Οποιοσδήποτε webmaster, λόγω των επαγγελματικών του δραστηριοτήτων, πρέπει να δημιουργήσει ορισμένα σύνθετα στοιχεία στον ιστότοπο
(Για παράδειγμα: αναδίπλωση γραφικών με κείμενο, δημιουργία στηλών με κείμενο, επιδιόρθωση στοιχείων τοποθεσίας).
Ωστόσο, το πρότυπο html έχει μικρό αριθμό τυπικών στοιχείων σχεδίασης σελίδας και δεν εμφανίζονται όλα τα στοιχεία εξίσου διαφορετικά προγράμματα περιήγησης. Κάθε εταιρεία προσπαθεί να αναπτύξει το δικό της html, μερικές φορές απέχει πολύ από τη βασική ιδέα html που αναπτύχθηκε από την κοινοπραξία WWW.
Επομένως, ο webmaster πρέπει να πειραματιστεί με στοιχεία που είναι κοινά σε όλα τα προγράμματα περιήγησης.
Οι πίνακες είναι οι πιο κατάλληλοι, γιατί είναι βολικό να τοποθετούνται πληροφορίες στα κελιά του πίνακα.
Επιπλέον, οι πίνακες σε html έχουν το χαρακτηριστικό "border="0" - αυτό το χαρακτηριστικό με την τιμή "0" κρύβει τα όρια του πίνακα, δηλαδή τα περιεχόμενα του κελιού παραμένουν ορατά και το ίδιο το πλαίσιο δεν είναι ορατό.
Ας δούμε τώρα ένα παράδειγμα ανάπτυξης σχεδίασης πινάκων.

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

Το χαρακτηριστικό "border" πρέπει να είναι ίσο με "0". Το διάστημα κελιών ορίστηκε σε "2" (όσο μεγαλύτερος είναι ο αριθμός, τόσο πιο φαρδύ θα είναι το πλαίσιο του πίνακα).
Το χαρακτηριστικό "cellspacing" χρησιμοποιείται για να υποδείξει την απόσταση μεταξύ δύο κελιών. Σε αυτήν την περίπτωση, θα υποδεικνύει την απόσταση μεταξύ των δύο πινάκων.
Γεμίστε τον πίνακα με μαύρο χρησιμοποιώντας το χαρακτηριστικό "bgcolor" Γενικά, μπορείτε να επιλέξετε οποιοδήποτε άλλο χρώμα, ανάλογα με το χρώμα του περιγράμματός σας.

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

Εισάγουμε έναν άλλο πίνακα στο κελί του πίνακα μας.

Κείμενο

Καθορίστε το χρώμα φόντου του πίνακα. Σε αυτή την περίπτωση, χρειαζόμαστε λευκό φόντο.

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

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

Κείμενο

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

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

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

Πώς να φτιάξετε έναν πίνακα σε html

Ας πάρουμε ένα παράδειγμα, κώδικας html:

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

Στήλη 1

Στήλη 2

Δώστε προσοχή στο κελί . Χρησιμοποιούμε το ειδικό χαρακτηριστικό colspan για την οριζόντια επέκταση των κελιών. Η αριθμητική του τιμή καθορίζει τον αριθμό των στηλών προς συγχώνευση. Υπάρχει επίσης ένα ανάλογο αυτού του χαρακτηριστικού: tag (κεφαλίδα πίνακα), όπου πρέπει επίσης να γράψετε colspan. Το αποτέλεσμα θα είναι το ίδιο. Αλλά συχνά χρησιμοποιούν ένα κανονικό td.

Τώρα ας δούμε αναλυτικά όλα τα χαρακτηριστικά της ετικέτας.

.

Χαρακτηριστικά και ιδιότητες ετικέτας

Για άνοιγμα ετικέτας

Μπορείτε να προσθέσετε διάφορα χαρακτηριστικά.

1. Ιδιότητα align="parameter" - ορίζει τη στοίχιση του πίνακα. Μπορεί να λάβει τις ακόλουθες τιμές:

Στο παραπάνω παράδειγμα, κεντράραμε τον πίνακα με align="center" .

Αυτό το χαρακτηριστικό μπορεί να εφαρμοστεί όχι μόνο στον πίνακα, αλλά και σε μεμονωμένα κελιά πίνακα.

. Έτσι, σε διαφορετικά κύτταραη ευθυγράμμιση θα είναι διαφορετική.

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

, , , ή

cols - η γραμμή εμφανίζεται μεταξύ των στηλών

κανένα - όλα τα σύνορα είναι κρυμμένα

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

12. Ιδιότητα width="number" - ορίζει το πλάτος του πίνακα: είτε σε pixel είτε ως ποσοστό.

13. Ιδιότητα class="class_name" - μπορείτε να καθορίσετε το όνομα της κλάσης στην οποία ανήκει ο πίνακας.

14. Ιδιότητα style="styles" - τα στυλ μπορούν να οριστούν ξεχωριστά για κάθε πίνακα.

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

Και Οι ίδιες επιλογές είναι διαθέσιμες όπως για θα εφαρμοστεί ιεραρχικά σε όλους

ή γραμμές
...		...	... 2. Ιδιότητα background="URL" - σύνολα εικόνα φόντου. Αντί για διεύθυνση URL, θα πρέπει να γραφτεί η διεύθυνση της εικόνας φόντου. Παράδειγμα Παράδειγμα πίνακα Στήλη 1 Στήλη 2 Μεταμορφώνεται στη σελίδα στο εξής: Στο παραπάνω παράδειγμα, η εικόνα φόντου μας βρίσκεται στο φάκελο img (ο οποίος βρίσκεται στον ίδιο κατάλογο με τη σελίδα html) και η εικόνα ονομάζεται fon.gif . Παρατηρήστε ότι στην ετικέτα προσθέσαμε style="color:white;" . Δεδομένου ότι το φόντο είναι σχεδόν μαύρο, για να μην μπλέκει το κείμενο με το φόντο, κάναμε το κείμενο λευκό. 3. Ιδιότητα bgcolor="color" - ορίζει το χρώμα φόντου του πίνακα. Ως χρώμα, μπορείτε να επιλέξετε οποιαδήποτε από ολόκληρη την παλέτα (δείτε κωδικούς και ονόματα χρωμάτων html) 4. Ιδιότητα border="number" - ορίζει το πάχος του πλαισίου του τραπεζιού. Στα προηγούμενα παραδείγματα, καθορίσαμε border="1" , που σημαίνει ότι το περίγραμμα έχει πάχος 1 pixel. 5. Ιδιότητα bordercolor="color" - ορίζει το χρώμα του περιγράμματος. Αν border="0" , τότε δεν θα υπάρχει περίγραμμα και το χρώμα του περιγράμματος δεν θα έχει νόημα. 6. Ιδιότητα cellpadding="number" - padding από το πλαίσιο στο περιεχόμενο του κελιού σε pixel. 7. Ιδιότητα cellpacing="number" - απόσταση μεταξύ των κελιών σε pixel. 8. Ιδιότητα cols="number" - ο αριθμός των στηλών. Εάν δεν το ρυθμίσετε, τότε το πρόγραμμα περιήγησης θα καθορίσει τον αριθμό των στηλών. Η μόνη διαφορά είναι ότι ο καθορισμός αυτής της παραμέτρου πιθανότατα θα επιταχύνει τη φόρτωση του πίνακα. 9. Ιδιότητα frame="parameter" - πώς να εμφανίζετε περιγράμματα γύρω από τον πίνακα. Μπορεί να λάβει τις ακόλουθες τιμές: κενό - μην σχεδιάζετε σύνορα περίγραμμα - το περίγραμμα γύρω από το τραπέζι πάνω - το περίγραμμα κατά μήκος της επάνω άκρης του τραπεζιού κάτω - κάτω περίγραμμα του πίνακα hsides - προσθέστε μόνο οριζόντια περιγράμματα (πάνω και κάτω μέρος του πίνακα) vsides - σχεδιάστε μόνο κάθετα περιγράμματα (στα αριστερά και δεξιά του πίνακα) rhs - περίγραμμα μόνο στη δεξιά πλευρά του πίνακα lhs - περίγραμμα μόνο στην αριστερή πλευρά του πίνακα 10. Ιδιότητα height="number" - ορίζει το ύψος του πίνακα: είτε σε pixel είτε ως ποσοστό. 11. Κανόνες ιδιοτήτων="παράμετρος" - πού εμφανίζονται τα περιγράμματα μεταξύ των κελιών. Μπορεί να λάβει τις ακόλουθες τιμές: όλα - σχεδιάζεται μια γραμμή γύρω από κάθε κελί του πίνακα ομάδες - σχεδιάζεται μια γραμμή μεταξύ των ομάδων που σχηματίζονται από τις ετικέτες
. Ιδιότητες και ιδιότητες
1. Ιδιότητα align="parameter" - ορίζει τη στοίχιση ενός ξεχωριστού κελιού πίνακα. Μπορεί να λάβει τις ακόλουθες τιμές: αριστερή - αριστερή στοίχιση ευθυγράμμιση κέντρου - κέντρου δεξιά - δεξιά στοίχιση 2. Ιδιότητα background="URL" - ορίζει την εικόνα φόντου του κελιού. Αντί για διεύθυνση URL, θα πρέπει να γραφτεί η διεύθυνση της εικόνας φόντου. 3. Ιδιότητα bgcolor="color" - ορίζει το χρώμα φόντου του κελιού. 4. Ιδιότητα bordercolor="color" - ορίζει το χρώμα του περιγράμματος του κελιού. 5. Ιδιότητα char="letter" - ορίζει το γράμμα από το οποίο πρέπει να γίνει η στοίχιση. Η τιμή του χαρακτηριστικού align πρέπει να οριστεί σε char. 6. Ιδιότητα colspan="number" - ορίζει τον αριθμό των συγχωνευμένων οριζόντιων κελιών. 7. Ιδιότητα height="number" - ορίζει το ύψος του πίνακα: είτε σε pixel είτε ως ποσοστό. 8. Ιδιότητα width="number" - ορίζει το πλάτος του πίνακα: είτε σε pixel είτε ως ποσοστό. 9. Ιδιότητα rowspan="number" - ορίζει τον αριθμό των κάθετων κελιών που θα συγχωνευθούν. 10. Ιδιότητα valign="παράμετρος" - κάθετη στοίχιση των περιεχομένων του κελιού. επάνω - ευθυγραμμίστε τα περιεχόμενα του κελιού στην κορυφή της σειράς μεσαία - μέση ευθυγράμμιση Ευθυγράμμιση κάτω - κάτω γραμμή βάσης - ευθυγράμμιση γραμμής βάσης Σημείωση 1 Για ετικέτα
. Επιλογές για μια μεμονωμένη ετικέτα
μέσα σε αυτό Πώς να αποτρέψετε τη συγκόλληση των περιγραμμάτων των κυττάρων σε έναν πίνακα Στην περίπτωση χρήσης περιγράμματος (περιγράμματος κελιού) και μηδενικής επένδυσης μεταξύ των κελιών, εξακολουθούν να είναι κολλημένα μεταξύ τους και προκύπτει διπλό περίγραμμα. Για να το αποφύγετε αυτό, πρέπει να δώσετε στυλ στον πίνακα με σύμπτυξη περιγράμματος: σύμπτυξη: ... Αγαπητέ αναγνώστη, τώρα έμαθες πολλά περισσότερα ετικέτα htmlτραπέζι. Τώρα σας συμβουλεύω να προχωρήσετε στο επόμενο μάθημα.