Ποια είναι η σημασία των υπότιτλων πινάκων;
Οι 'Λεζάντες πινάκων' χρησιμοποιούνται για να δίνουν τίτλους σε πίνακες, έτσι ώστε ο χρήστης να μπορεί να ορίσει τι σημαίνει κάθε πίνακας και πώς να χρησιμοποιήσει τα δεδομένα που περιέχονται σε αυτόν. Οι υπότιτλοι μπορούν επίσης να βοηθήσουν στην αρίθμηση των πινάκων σε μια ιστοσελίδα για να κάνουν τα δεδομένα μέσα σε αυτούς πιο προσιτά.
Οι λεζάντες δίνουν ακριβές περιεχόμενο σε κάθε πίνακα σε ένα έγγραφο ή μια ιστοσελίδα όπου υπάρχει μεγάλος αριθμός πινάκων. Επιπλέον, οι δομημένοι λεζάντες διασφαλίζουν ότι οι αναγνώστες κατανοούν γρήγορα ποια δεδομένα περιέχονται σε κάθε πίνακα.
Πώς να χρησιμοποιήσετε μια λεζάντα πίνακα στο Tailwind CSS;
Στο Tailwind CSS, μια λεζάντα προστίθεται σε έναν πίνακα χρησιμοποιώντας το ' <λεζάντα> ετικέτα '. Αυτή η λεζάντα καθορίζει έναν τίτλο και περισσότερες πληροφορίες σχετικά με τα δεδομένα στον πίνακα.
Παράδειγμα: Προσθήκη λεζάντας πίνακα τόσο στο επάνω όσο και στο κάτω μέρος του πίνακα
Στον παρακάτω κώδικα, θα προσθέσουμε μια 'λεζάντα' τόσο στο επάνω όσο και στο κάτω μέρος του πίνακα ως εξής:
< τραπέζι >
< τραπέζι τάξη = 'min-w-full border border-gray-300 divide-y divide-grey-300' >
< το κεφάλι >
< tr >
< ου τάξη = 'py-2 px-4 bg-grey-100 border-b' >
Ονομα
< / ου >
< ου τάξη = 'py-2 px-4 bg-grey-100 border-b' >
ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ
< / ου >
< ου τάξη = 'py-2 px-4 bg-grey-100 border-b' >
ταυτότητα
< / ου >
< ου τάξη = 'py-2 px-4 bg-grey-100 border-b' >
Επικοινωνία
< / ου >
< / tr >
< / το κεφάλι >
< το σώμα >
< tr >
< td τάξη = 'py-2 px-4 border-b' > Τζέιμς < / td >
< td τάξη = 'py-2 px-4 border-b' > james@tsl.com < / td >
< td τάξη = 'py-2 px-4 border-b' > 61101-1234567-8 < / td >
< td τάξη = 'py-2 px-4 border-b' > 123-456-7890 < / td >
< / tr >
< tr >
< td τάξη = 'py-2 px-4 border-b' > Μιχαήλ < / td >
< td τάξη = 'py-2 px-4 border-b' > michael@tsl.com < / td >
< td τάξη = 'py-2 px-4 border-b' > 61101-8765432-1 < / td >
< td τάξη = 'py-2 px-4 border-b' > 098-765-4321 < / td >
< / tr >
< tr >
< td τάξη = 'py-2 px-4 border-b' > Δαβίδ < / td >
< td τάξη = 'py-2 px-4 border-b' > David@TSL.com < / td >
< td τάξη = 'py-2 px-4 border-b' > 54791-1234567-8 < / td >
< td τάξη = 'py-2 px-4 border-b' > 123-786-4290 < / td >
< / tr >
< tr >
< td τάξη = 'py-2 px-4 border-b' > Πέτρος < / td >
< td τάξη = 'py-2 px-4 border-b' > peter@tsl.com < / td >
< td τάξη = 'py-2 px-4 border-b' > 54300-1234567-8 < / td >
< td τάξη = 'py-2 px-4 border-b' > 611-239-7890 < / td >
< / tr >
< / το σώμα >
< λεζάντα >
Προσωπικά στοιχεία εργαζομένων
< / λεζάντα >
< / τραπέζι >
< λεζάντα >
Ονομα εταιρείας
< / λεζάντα >
Ακολουθήστε αυτά τα βήματα στον παραπάνω κώδικα:
- Δημιουργήστε έναν πίνακα χρησιμοποιώντας το ' <πίνακας> ετικέτα '.
- Καθορίστε τη μορφοποίηση του πίνακα μέσω της κλάσης βοηθητικού προγράμματος.
- Ορίστε τις κεφαλίδες του πίνακα 'Όνομα', 'Ηλεκτρονικό ταχυδρομείο', 'Αναγνωριστικό' και 'Επικοινωνία' μέσω του ' <κεφάλι> ' ετικέτα.
- Καθορίστε τα δεδομένα και για τα 4 μέλη του προσωπικού στον πίνακα χρησιμοποιώντας το « ' και το '
ετικέτες '. - Στη συνέχεια, καθορίστε τη λεζάντα του πίνακα χρησιμοποιώντας το ' <λεζάντα> ' Κάντε tag και κλείστε τον πίνακα.
- Τέλος, προσθέτουμε μια άλλη ετικέτα '
' στο τέλος για να εφαρμόσουμε μια λεζάντα πίνακα στο κάτω μέρος του πίνακα. - Σημείωση : Είναι τέτοια ώστε η λεζάντα του πίνακα στο επάνω μέρος του πίνακα να καθορίζεται στην ετικέτα '
', ενώ η κάτω λεζάντα πρέπει να καθοριστεί μετά την ετικέτα κλεισίματος του πίνακα.
Παραγωγή
συμπέρασμα
Οι λεζάντες των πινάκων είναι ζωτικής σημασίας για την παροχή περισσότερων πληροφοριών σχετικά με τους πίνακες και τα δεδομένα που περιέχονται σε αυτούς. Κατά συνέπεια, η προσβασιμότητα των πινάκων αυξάνεται πολλαπλά τόσο για τους χρήστες όσο και για τους αναγνώστες. Η λεζάντα παρέχει μια επιπλέον πληροφορία σχετικά με έναν πίνακα με συνοπτικό τρόπο, η οποία μπορεί να προβληθεί και στην ηλεκτρονική περιγραφή.