Για να διευκολύνετε την ανάγνωση των πινάκων, είναι συχνά χρήσιμο το στυλ γραμμών με εναλλασσόμενα χρώματα φόντου. Ένας από τους πιο συνηθισμένους τρόπους για το στυλ των πινάκων είναι να ορίσετε το χρώμα φόντου κάθε άλλης σειράς. Αυτό συχνά αναφέρεται ως "ζέβρα ρίγες".
Μπορείτε να το πετύχετε αυτό, ορίζοντας κάθε άλλη σειρά με μια κλάση CSS και, στη συνέχεια, καθορίζοντας το στυλ για αυτήν την τάξη. Αυτό λειτουργεί αλλά δεν είναι ο καλύτερος ή πιο αποτελεσματικός τρόπος για να το επιτύχετε. Όταν χρησιμοποιείτε αυτήν τη μέθοδο, κάθε φορά που πρέπει να επεξεργαστείτε αυτόν τον πίνακα, ίσως χρειαστεί να επεξεργαστείτε κάθε μεμονωμένη σειρά στον πίνακα για να βεβαιωθείτε ότι κάθε σειρά είναι συνεπής με τις αλλαγές. Για παράδειγμα, εάν εισαγάγετε μια νέα σειρά στον πίνακα σας, κάθε άλλη σειρά κάτω από αυτήν πρέπει να αλλάξει η τάξη.
CSS διευκολύνει το στυλ τραπεζιού με ρίγες ζέβρα. Δεν χρειάζεται να προσθέσετε επιπλέον HTML χαρακτηριστικά ή κλάσεις CSS, απλώς χρησιμοποιείτε το: nth-of-type (n) Επιλογέας CSS.
Ο επιλογέας: nth-of-type (n) είναι μια δομική ψευδο-κλάση στο CSS που σας επιτρέπει να διαμορφώνετε στοιχεία βάσει των σχέσεών τους με τα στοιχεία γονέων και αδελφών. Μπορείτε να το χρησιμοποιήσετε για να επιλέξετε ένα ή περισσότερα στοιχεία με βάση την αρχική τους σειρά. Με άλλα λόγια, μπορεί να ταιριάζει με κάθε στοιχείο που είναι το ένατο παιδί ενός συγκεκριμένου τύπου του γονέα του.
Το γράμμα n μπορεί να είναι μια λέξη-κλειδί (όπως μονό ή ζυγό), ένας αριθμός ή ένας τύπος.
Για παράδειγμα, για το στυλ κάθε άλλης ετικέτας παραγράφου με κίτρινο χρώμα φόντου, το έγγραφο CSS θα περιλαμβάνει:
p: nth-of-type (μονό) {
φόντο: κίτρινο;
}
Ξεκινήστε με τον πίνακα HTML σας
Αρχικά, δημιουργήστε τον πίνακα σας όπως θα το γράφατε κανονικά σε HTML. Μην προσθέτετε ειδικές τάξεις στις σειρές ή τις στήλες.
Στο φύλλο στυλ σας, προσθέστε το ακόλουθο CSS:
tr: nth-of-type (μονό) {
χρώμα φόντου: #ccc;
}
Αυτό θα διαμορφώσει κάθε άλλη σειρά με γκρι χρώμα φόντου ξεκινώντας από την πρώτη σειρά.
Εναλλασσόμενες στήλες στυλ με τον ίδιο τρόπο
Μπορείτε να κάνετε το ίδιο είδος στυλ με στήλες στους πίνακες σας. Για να το κάνετε αυτό, απλώς αλλάξτε το tr στην κατηγορία CSS σε td. Για παράδειγμα:
td: nth-of-type (μονό) {
χρώμα φόντου: #ccc;
}
Χρήση τύπων σε έναν επιλογέα nth-of-type (n)
Η σύνταξη για έναν τύπο που χρησιμοποιείται στον επιλογέα είναι ένα + b.
- a είναι ένας αριθμός που αντιπροσωπεύει τον κύκλο ή το μέγεθος ευρετηρίου.
- n είναι στην πραγματικότητα το γράμμα "n" και αντιπροσωπεύει έναν μετρητή, ο οποίος έχει αστέρι στο 0.
- + είναι χειριστής, ο οποίος μπορεί επίσης να είναι "-"
- Το b είναι ακέραιος και αντιπροσωπεύει την τιμή μετατόπισης - για παράδειγμα, πόσες σειρές προς τα κάτω πρέπει ο επιλογέας να αρχίσει να εφαρμόζει το χρώμα φόντου. Αυτό απαιτείται εάν ένας χειριστής περιλαμβάνεται στον τύπο.
Για παράδειγμα, εάν θέλετε να ορίσετε ένα χρώμα φόντου για κάθε 3η σειρά, ο τύπος σας θα είναι 3n + 0. Το CSS σας μπορεί να μοιάζει με αυτό:
tr: nth-of-type (3n + 0) {
φόντο: slategray;
}
Χρήσιμα εργαλεία για τη χρήση του επιλογέα nth-of-type
Εάν αισθάνεστε λίγο απογοητευμένοι από την πτυχή της φόρμουλας της χρήσης του επιλογέα ψευδο-κλάσης nth-of-type, δοκιμάστε το: nth Tester site ως ένα χρήσιμο εργαλείο που μπορεί να σας βοηθήσει να ορίσετε τη σύνταξη για να επιτύχετε την εμφάνιση που θέλετε. Χρησιμοποιήστε το αναπτυσσόμενο μενού για να επιλέξετε nth-of-type (μπορείτε επίσης να πειραματιστείτε με άλλες ψευδο-τάξεις και εδώ, όπως το nth-child).