Πώς να κάνετε στυλ πίνακα με CSS

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

Αυτή η μελέτη θα καθοδηγήσει σχετικά με πίνακες styling με CSS.

Πώς να κάνετε στυλ πίνακα με CSS;

Για να εφαρμόσουμε στυλ στον πίνακα, θα ακολουθήσουμε τη σειρά βημάτων που δίνονται παρακάτω.

Βήμα 1: Δημιουργήστε έναν πίνακα σε HTML

< τραπέζι >
< λεζάντα > Πληροφορίες Φοιτητών < / λεζάντα >
< το κεφάλι >
< tr >
< ου > Ονομα < / ου >
< ου > Σειρά μαθημάτων < / ου >
< ου > Σημάδια < / ου >
< / tr >
< / το κεφάλι >
< το σώμα >
< tr >
< td > Γουλιέλμος < / td >
< td > Δικτύωση < / td >
< td > 89 < / td >
< / tr >
< tr >
< td > Γρύλος < / td >
< td > Εισαγωγή στη C++ < / td >
< td > 97 < / td >
< / tr >
< tr >
< td > Ιωσήφ < / td >
< td > Εισαγωγή στη Java < / td >
< td > 77 < / td >
< / tr >
< / το σώμα >
< / τραπέζι >

Για τη δημιουργία ενός πίνακα σε HTML, χρησιμοποιούνται τα ακόλουθα στοιχεία HTML:

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

' χρησιμοποιείται για την προσθήκη σειράς.

” προσδιορίζει το μέρος του σώματος του πίνακα.

Ο πίνακας που δημιουργήθηκε αυτή τη στιγμή μοιάζει με αυτό:

Ας προχωρήσουμε για να δούμε πώς να διαμορφώσετε αυτό το τραπέζι.

Βήμα 2: Στυλ στοιχείου 'body'.

σώμα {
γραμματοσειρά-οικογένεια: Verdana, Geneva, Tahoma, sans-serif;
Ιστορικό- χρώμα : rgb ( 233 , 233 , 233 ) ;
}

Το στοιχείο εφαρμόζεται με τις ακόλουθες ιδιότητες στυλ CSS:

' γραμματοσειρά-οικογένεια “ακίνητο με την αξία” Verdana, Γενεύη, Tahoma, sans-serif ' χρησιμοποιείται για την εφαρμογή της γραμματοσειράς που υποστηρίζεται από το πρόγραμμα περιήγησης. Εάν το πρόγραμμα περιήγησης δεν υποστηρίζει το πρώτο στυλ γραμματοσειράς, θα χρησιμοποιηθεί το άλλο.
' χρώμα του φόντου Η ιδιότητα ' ορίζει το χρώμα φόντου του στοιχείου.

Βήμα 3: Στοιχείο 'λεζάντα' στυλ

λεζάντα {
γραμματοσειρά- Μέγεθος : 25 px;
κείμενο- ευθυγραμμίζω : κέντρο;
Ιστορικό- χρώμα : #1C6758;
χρώμα : μετάξι καλαμποκιού;
}

Το στοιχείο

' προσδιορίστε το περιεχόμενο της επικεφαλίδας.

έχει το εξής στυλ:

' μέγεθος γραμματοσειράς Η ιδιότητα ' χρησιμοποιείται για τη ρύθμιση του μεγέθους της γραμματοσειράς.
' στοίχιση κειμένου Η ιδιότητα ' προσδιορίζει τη στοίχιση του κειμένου του στοιχείου.
' χρώμα Η ιδιότητα ' αναφέρεται στο χρώμα της γραμματοσειράς του στοιχείου.

Ακολουθεί η έξοδος του παραπάνω κώδικα:

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

Ας εφαρμόσουμε το περίγραμμα, μαζί με το padding, και ας κάνουμε περιθώριο στον πίνακα:

πίνακας, ου, τδ {
σύνορο : 2px στερεό #1C6758;
padding: 1px 6px;
περιθώριο: αυτόματο;
}

Εδώ:

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

Παραγωγή

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

Βήμα 5: Σύμπτυξη διαστήματος περιγράμματος από τον πίνακα
Τα κενά μεταξύ των περιγραμμάτων του πίνακα μπορούν να αφαιρεθούν χρησιμοποιώντας το ' σύνορα-κατάρρευση ' ιδιοκτησία με την τιμή 'σύμπτυξη':

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

Βήμα 6: Προσαρμόστε το μέγεθος του πίνακα
Ας δούμε πώς να προσαρμόσετε το μέγεθος του πίνακα:

thead th {
πλάτος : 160 px;
}

Το προστιθέμενο ' πλάτος Η ιδιότητα με το στοιχείο

θα προσαρμόσει αυτόματα το μέγεθος του πίνακα σύμφωνα με αυτό::

Μπορούμε επίσης να εφαρμόσουμε στυλ στο συγκεκριμένο κελί πίνακα. Ας τα συζητήσουμε!

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

< td τάξη = 'αποκορύφωμα' > 99 < / td >

Τώρα, αποκτήστε πρόσβαση στο κελί χρησιμοποιώντας το όνομα της κλάσης στο αρχείο CSS:

.αποκορύφωμα {
Ιστορικό- χρώμα : #0f90d5;
}

Ο ' .αποκορύφωμα ” αναφέρεται στην επισήμανση κλάσης του στοιχείου

. Αυτό το στοιχείο εφαρμόζεται με το ' χρώμα του φόντου ιδιότητα για να καθορίσετε το χρώμα στο φόντο.

Όπως μπορούμε να δούμε, το καθορισμένο κελί πίνακα έχει διαμορφωθεί με επιτυχία:

Βήμα 8: Ορίστε την οικογένεια γραμματοσειρών και το μέγεθος του πίνακα

τραπέζι {
γραμματοσειρά-οικογένεια: cursive;
γραμματοσειρά- Μέγεθος : 18 px;
κείμενο- ευθυγραμμίζω : κέντρο;
}

Οι ακόλουθες ιδιότητες CSS εφαρμόζονται στο στοιχείο πίνακα:

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

Εδώ είναι η έξοδος:

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

\
tbody tr:nth-child ( ακόμη και ) {
Ιστορικό- χρώμα : #FFB200;
}

Εδώ:

Ο ' :nth-child (ακόμα) Ο ψευδοεπιλογέας χρησιμοποιείται για να ληφθεί ένα όρισμα που καθορίζει το μοτίβο στο οποίο θα εφαρμοστεί το στυλ.
' χρώμα του φόντου Η ιδιότητα ' χρησιμοποιείται για τον ορισμό του χρώματος φόντου του στοιχείου.

Μπορεί να παρατηρηθεί ότι το χρώμα φόντου εφαρμόζεται με επιτυχία στις ζυγές σειρές:

Αυτό αφορούσε το στυλ των τραπεζιών με CSS

συμπέρασμα

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

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

,

Πώς να κάνετε στυλ πίνακα με CSS

Πώς να κάνετε στυλ πίνακα με CSS;

συμπέρασμα

Κατηγορία

Δημοφιλείς Αναρτήσεις

Πώς να μπείτε σε ασφαλή λειτουργία σε φορητό υπολογιστή;

Πώς να εγκαταστήσετε ένα Oracle Instant Client for Toad για Oracle;

Απλά και προηγμένα Παραδείγματα Εντολής Ψευδώνυμου και Επεξήγηση

Ελέγξτε εάν το αντικείμενο δεν είναι παράδειγμα κλάσης σε JavaScript

Πώς να καθαρίσετε τη μνήμη Arduino

Πώς να χρησιμοποιήσετε τη σύνοψη συνομιλίας στο LangChain;

Πώς να ελέγξετε εάν το Docker Daemon εκτελείται στο Mac σας

Προγραμματισμός Socket σε C++

Πώς να παρακολουθείτε ένα iPhone χρησιμοποιώντας το Android;

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

Windows 7 Σας επιτρέπει να αλλάξετε την εικόνα φόντου σύνδεσης - Winhelponline

Πώς να εφαρμόσετε τη διακόσμηση κειμένου με αιώρηση, εστίαση και ενεργές καταστάσεις του ουράνιου ανέμου

Πώς να μετρήσετε τον αριθμό των αρχείων σε έναν κατάλογο στο Linux

Πώς να μετατρέψετε ένα σύνολο σε λίστα στην Java

Πώς να χρησιμοποιήσετε τη συνάρτηση PHP getdate().

Πώς να χρησιμοποιήσετε το PowerShell αντικατάσταση για να αντικαταστήσετε κείμενο με παραδείγματα

Top 5 δωρεάν βελτιστοποιητές συστήματος για ενίσχυση του υπολογιστή σας

5 DIY τρόποι για να δροσίσετε φορητό υπολογιστή

Πώς να εκτελέσετε αριστερές εξωτερικές συνδέσεις – LINQ σε C#

Λεξικό Swift