Saltar al contenido

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

18 de abril de 2021

Για να διευκολύνετε την ανάγνωση των πινάκων, είναι συχνά χρήσιμο να σχεδιάζετε σειρές με εναλλασσόμενα χρώματα φόντου. Ένας από τους πιο συνηθισμένους τρόπους για να σχεδιάσετε πίνακες είναι να ορίσετε το χρώμα φόντου κάθε άλλης σειράς. Αυτό αναφέρεται συχνά ως «ζέβρα ρίγες». Μπορείτε να το πετύχετε αυτό, ορίζοντας κάθε άλλη σειρά με μια κλάση CSS και, στη συνέχεια, καθορίζοντας το στυλ για αυτήν την τάξη. Αυτό λειτουργεί αλλά δεν είναι ο καλύτερος ή πιο αποτελεσματικός τρόπος για να το επιτύχετε. Όταν χρησιμοποιείτε αυτήν τη μέθοδο, κάθε φορά που πρέπει να επεξεργαστείτε αυτόν τον πίνακα, ίσως χρειαστεί να επεξεργαστείτε κάθε μεμονωμένη σειρά στον πίνακα για να βεβαιωθείτε ότι κάθε σειρά είναι συνεπής με τις αλλαγές. Για παράδειγμα, εάν εισαγάγετε μια νέα σειρά στον πίνακα σας, κάθε άλλη σειρά κάτω από αυτήν πρέπει να αλλάξει η τάξη. Το CSS διευκολύνει το στυλ τραπεζιού με ρίγες ζέβρα. Δεν χρειάζεται να προσθέσετε επιπλέον χαρακτηριστικά HTML ή κλάσεις CSS, απλώς χρησιμοποιείτε τον επιλογέα: nth-of-type (n) CSS. Ο επιλογέας: nth-of-type (n) είναι μια δομική ψευδο-κλάση στο CSS που σας επιτρέπει να διαμορφώνετε στοιχεία βάσει των σχέσεών τους με τα στοιχεία γονέων και αδελφών. Μπορείτε να το χρησιμοποιήσετε για να επιλέξετε ένα ή περισσότερα στοιχεία με βάση την αρχική τους σειρά. Με άλλα λόγια, μπορεί να ταιριάζει με κάθε στοιχείο που είναι το ένατο παιδί ενός συγκεκριμένου τύπου του γονέα του. Το γράμμα n μπορεί να είναι μια λέξη-κλειδί (όπως μονό ή ζυγό), ένας αριθμός ή ένας τύπος. Για παράδειγμα, για το στυλ κάθε άλλης ετικέτας παραγράφου με κίτρινο χρώμα φόντου, το έγγραφο CSS θα περιλαμβάνει: p: nth-of-type (odd) {
φόντο: κίτρινο;
}

type = «code»>

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

Αρχικά, δημιουργήστε τον πίνακα σας όπως θα το γράφατε κανονικά σε HTML. Μην προσθέτετε ειδικές τάξεις στις σειρές ή τις στήλες. Στο φύλλο στυλ σας, προσθέστε το ακόλουθο CSS: tr: nth-of-type (odd) {
χρώμα φόντου: #ccc;
}

type = «code»> Αυτό θα διαμορφώσει κάθε άλλη σειρά με γκρι χρώμα φόντου ξεκινώντας από την πρώτη σειρά.

Εναλλασσόμενες στήλες στυλ με τον ίδιο τρόπο

Μπορείτε να κάνετε το ίδιο είδος στυλ με στήλες στους πίνακες σας. Για να το κάνετε αυτό, απλώς αλλάξτε το tr στην κατηγορία CSS σε td. Για παράδειγμα: td: nth-of-type (odd) {
χρώμα φόντου: #ccc;
}

type = «code»>

Χρήση τύπων σε έναν επιλογέα nth-of-type (n)

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

  • a είναι ένας αριθμός που αντιπροσωπεύει τον κύκλο ή το μέγεθος ευρετηρίου.
  • n είναι στην πραγματικότητα το γράμμα «n» και αντιπροσωπεύει έναν μετρητή, ο οποίος έχει αστέρι στο 0.
  • + είναι χειριστής, ο οποίος μπορεί επίσης να είναι «-«
  • Το b είναι ακέραιος και αντιπροσωπεύει την τιμή μετατόπισης – για παράδειγμα, πόσες σειρές κάτω πρέπει ο επιλογέας να αρχίσει να εφαρμόζει το χρώμα φόντου. Αυτό απαιτείται εάν ένας χειριστής περιλαμβάνεται στον τύπο.

Για παράδειγμα, εάν θέλετε να ορίσετε ένα χρώμα φόντου για κάθε 3η σειρά, ο τύπος σας θα είναι 3n + 0. Το CSS σας μπορεί να μοιάζει με αυτό: tr: nth-of-type (3n + 0) {
φόντο: slategray;
}

type = «code»>

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

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