Πώς να δημιουργήσετε πίνακες Zebra με CSS

Χρησιμοποιώντας: nth-of-type (n) Με τους πίνακες

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

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

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

Το CSS καθιστά εύκολο το στυλ των τραπεζιών με λωρίδες ζέβρας. Δεν χρειάζεται να προσθέσετε επιπλέον χαρακτηριστικά HTML ή κλάσεις CSS, απλώς χρησιμοποιείτε τον επιλογέα nth-of-type (n) CSS .

Ο επιλογέας n: n-type (n) είναι μια δομική ψευδο-τάξη στο CSS που σας επιτρέπει να διαμορφώνετε στοιχεία βασισμένα στις σχέσεις τους με γονικά και αδέρφια στοιχεία. Μπορείτε να το χρησιμοποιήσετε για να επιλέξετε ένα ή περισσότερα στοιχεία βάσει της πηγής τους. Με άλλα λόγια, μπορεί να ταιριάξει με κάθε στοιχείο που είναι το n το παιδί ενός συγκεκριμένου τύπου του γονέα του.

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

Για παράδειγμα, για να διαμορφώσετε κάθε άλλη ετικέτα παραγράφου με κίτρινο χρώμα φόντου, το έγγραφο CSS θα περιλαμβάνει:

p: nth-of-type (περίεργο) {
φόντο: κίτρινο;
}}

Ξεκινήστε με τον Πίνακα HTML

Καταρχήν, δημιουργήστε το τραπέζι σας, όπως συνήθως θα το γράψετε σε HTML. Μην προσθέτετε ειδικές κλάσεις στις σειρές ή στις στήλες.

Στο φύλλο στυλ σας, προσθέστε το ακόλουθο CSS:

tr: nth-of-type (περίεργο) {
χρώμα φόντου: #ccc;
}}

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

Στυλ Alternating Columns με τον ίδιο τρόπο

Μπορείτε να κάνετε το ίδιο στυλ σε στήλες στους πίνακες σας. Για να το κάνετε αυτό, απλά αλλάξτε το tr στην τάξη CSS σας στο td. Για παράδειγμα:

td: n-ο-τύπου (περίεργο) {
χρώμα φόντου: #ccc;
}}

Χρησιμοποιώντας τους τύπους σε έναν n-type (n) Selector

Η σύνταξη για έναν τύπο που χρησιμοποιείται στον επιλογέα είναι ένα + b.

Για παράδειγμα, εάν θέλετε να ορίσετε ένα χρώμα φόντου για κάθε 3η γραμμή, ο τύπος σας θα είναι 3n + 0. Το CSS σας μπορεί να μοιάζει με αυτό:

tr: n-ο-τύπου (3n + 0) {
φόντο: slategray;
}}

Χρήσιμα εργαλεία για τη χρήση του n-type επιλογέα

Εάν αισθάνεστε λίγο απογοητευμένοι από την πτυχή του φόρμουλα της χρήσης του pseudo-class επιλογέα nth-type, δοκιμάστε το nth site Tester ως ένα χρήσιμο εργαλείο που μπορεί να σας βοηθήσει να καθορίσετε τη σύνταξη για να επιτύχετε την εμφάνιση που θέλετε. Χρησιμοποιήστε το αναπτυσσόμενο μενού για να επιλέξετε nth-of-type (μπορείτε επίσης να πειραματιστείτε με άλλες ψευδο-κατηγορίες εδώ, όπως nth-child).