Παραδόξως, μια από τις πιο δύσκολες τεχνολογίες ιστού που πρέπει να μάθετε είναι μια από τις πρώτες που είναι διαθέσιμες για το πρόγραμμα περιήγησης μετά από απλό κείμενο και εικόνες. Το πρόβλημα είναι ακόμη μεγαλύτερο σήμερα με τόσους διαφορετικούς τύπους συσκευών που πρέπει να μελετηθούν.
Είναι σχεδόν αδύνατο να δημιουργηθούν τέλεια τραπέζια, εκτός εάν περιέχουν τόσο λίγα στοιχεία που δεν είναι πιθανό να προκληθούν προβλήματα. Τα είδη σφαλμάτων που μπορούν να προκύψουν περιλαμβάνουν:
- Αναδίπλωση κειμένου λανθασμένα
- Σφάλματα αιτιολόγησης
- Απόδοση πίνακα εκτός οθόνης
- Προβλήματα κύλισης
- Σφάλματα ύψους σειράς
- Σφάλματα πλάτους στήλης
- Γενική ασχήμια ή ακαταστασία
Σε αυτό το άρθρο θα ρίξουμε μια ματιά στο πώς να αποφύγουμε τέτοια προβλήματα, έτσι ώστε τα τραπέζια σας να έχουν τις καλύτερες πιθανότητες να δημιουργήσουν μια καλή εντύπωση.
Στρατηγικές αποφυγής προς αποφυγή
Επειδή τα τραπέζια είναι τόσο δύσκολο να γίνουν σωστά, ορισμένοι προσπαθούν να αποφύγουν τη χρήση τους. Ορισμένες κοινές στρατηγικές χρησιμοποιούν το CSS για να δημιουργήσουν έναν ψεύτικο πίνακα και χρησιμοποιούν μια εικόνα του πίνακα δεδομένων χωρίς να τον εφαρμόσουν σε κώδικα.
Και οι δύο αυτές στρατηγικές αποφυγής έχουν ελαττώματα και πρέπει να αποφεύγονται. Η χρήση του CSS για απομίμηση ενός πίνακα δεν έχει τη σημασιολογική δομή που είναι εγγενής σε έναν πίνακα, η οποία μπορεί να δημιουργήσει προβλήματα ευχρηστίας και προσβασιμότητας.
Μια εικόνα ενός πίνακα δεν θα υποστεί τα προβλήματα που παρατίθενται στην εισαγωγή, αλλά υποβαθμίζει το δυναμικό SEO σας και δεν μπορεί εύκολα να τροποποιηθεί εάν τα δεδομένα σας χρειάζονται ενημέρωση. Εισάγει επίσης προβλήματα χρηστικότητας και προσβασιμότητας.
Τα πλαίσια είναι οι φίλοι σας
Τα κοινά πλαίσια όπως το Bootstrap και το Foundation περιέχουν πολλά εργαλεία εξοικονόμησης χρόνου και οι πίνακες δεν αποτελούν εξαίρεση. Η κατασκευή ενός αριστοκρατικού τραπεζιού στο Bootstrap δεν είναι δύσκολη, αλλά έρχεται με κάποιους περιορισμούς εάν απλώς χτίσετε το ράφι χωρίς να προσθέσετε κάποια προσαρμοσμένη προσαρμογή στις προσπάθειές σας.
Τα βλέμματα δεν είναι τα πάντα
Επειδή το περιεχόμενο και το στυλ πρέπει να είναι πάντα ανεξάρτητα, είναι λογικό να δημιουργήσετε πρώτα τον πίνακα σας σε απλό HTML, απλώς για να βεβαιωθείτε ότι θα φαίνεται καλό πριν εφαρμοστεί οποιοδήποτε ειδικό στυλ πίνακα.
Αυτό μπορεί επίσης να σας βοηθήσει να σας υπενθυμίσουμε ότι η καλή κατασκευή τραπεζιού απαιτεί περισσότερα από το να κάνει το τραπέζι να φαίνεται ωραίο. Θα πρέπει επίσης να είναι χρήσιμο σεformatσύστημα παροχής ιόντων. Αν ο στόχος του πίνακα δεν είναι να μεταφέρει μέσαformation, τότε δεν πρέπει να χρησιμοποιείτε τραπέζι για ό,τι κι αν κάνετε.
Στόχος για προσβασιμότητα
Μερικοί άνθρωποι δυσκολεύονται να δουν και να διαβάσουν έντυπο κείμενο, οπότε είναι καλή ιδέα να κάνετε τους πίνακες προσβάσιμους για αυτούς. Μπορείτε να μάθετε όλα όσα πρέπει να γνωρίζετε για να κάνετε τα τραπέζια σας πιο προσβάσιμα WebAIIM.
Εξετάστε το ενδεχόμενο να δώσετε τιμές ID σε στοιχεία πίνακα
Για μέγιστο έλεγχο σε κάθε μέρος του πίνακα (σειρές, κελιά), μπορείτε να τα δώσετεdiviτιμές διπλής ταυτότητας. Η προσθήκη τιμών τάξης επίσης θα σας δώσει ακόμη μεγαλύτερη ευελιξία.
Κάνοντας αυτά τα πράγματα δημιουργείτε πολύ περισσότερη δουλειά για εσάς, οπότε είναι πρακτικό μόνο όταν πρέπει να είστε σε θέση να τελειοποιήσετε οποιοδήποτε στοιχείο με αναφορά. Εάν αποφασίσετε να το κάνετε αυτό, θα μπορείτε να χειριστείτε άμεσα οποιοδήποτε στοιχείο πίνακα χρησιμοποιώντας JavaScript και CSS.
Μία από τις πολυπλοκότητες της δημιουργίας πινάκων είναι ότι δηλώνουμε σειρές αλλά όχι στήλες. Οι στήλες δημιουργούνται δυναμικά, υπολογίζονται σύμφωνα με πόσα στοιχεία δεδομένων τοποθετείτε σε κάθε σειρά. Αυτός είναι ο λόγος που οι πίνακες προσθέτουν στο χρόνο φόρτωσης της σελίδας σας.
Αποτελεσματικά σημαίνει ότι οι στήλες υπάρχουν μόνο με αφηρημένη έννοια πριν από την απόδοση της σελίδας, οπότε δεν μπορείτε να τους δώσετε κανένα είδος αναφοράς. Δίνοντας στο πρώτο στοιχείο TD στη σειρά μια κλάση, για παράδειγμα, "firstCol", παρέχετε έναν τρόπο άμεσης αναφοράς μιας στήλης.
Οι συμπαγείς πίνακες είναι οι καλύτεροι
Έχει γίνει μοντέρνο να κατασκευάζουμε τα πάντα με μεγάλα στοιχεία υψηλής ορατότητας. Από την άποψη της προσβασιμότητας, αυτό είναι υπέροχο. Όσον αφορά τη χρηστικότητα, ωστόσο, δεν είναι πάντα ο καλύτερος τρόπος, γιατί μπορεί να οδηγήσει σε προβλήματα.
Οι προγραμματιστές του Bootstrap πειραματίστηκαν responsive πίνακες, αλλά πίνακες και responsiveδεν πάνε καλά μαζί. Ο σχεδιασμός των τραπεζιών σας από την αρχή ώστε να χωρούν σε μια οθόνη κινητού σε κατακόρυφη λειτουργία είναι μια έξυπνη κίνηση.
Οι πίνακες πρέπει πάντα να έχουν δυνατότητα κύλισης
Είναι μια καλή πρακτική να ορίζετε πάντα την τιμή υπερχείλισης ενός πίνακα σε αυτόματο, αλλά όχι στον ίδιο τον πίνακα. Αντ 'αυτού, τυλίξτε το τραπέζι μέσα σε ένα div, κάτι σαν αυτό:
Τότε υπάρχει πολύς κώδικας PHP που κατασκευάζει το σώμα του πίνακα, κλείνοντας με αυτό:
Το μέρος που κάνει τη δουλειά του να κάνει κύλιση του πίνακα είναι στην πρώτη γραμμή, όπου το div-wrap table έχει ένα σταθερό ύψος και έχει ρυθμίσει την τιμή υπερχείλισης σε αυτόματο. Εάν το κάνετε αυτό στο ίδιο το τραπέζι, αντί για ένα περιτύλιγμα γύρω από το τραπέζι, μπορεί να έχει ακούσια εφέ.
Καλέστε τα βαρύ χτύπημα αν χρειαστεί
Για απλούς πίνακες, αυτό είναι υπερβολικό, αλλά όταν έχετε έναν πίνακα που χρειάζεται πραγματικά πλεονεκτήματα όπως ρυθμιζόμενα πλάτη στηλών και ταξινόμηση στηλών, υπάρχουν μερικές ισχυρές εφαρμογές jQuery που έχουν κατασκευαστεί για να βοηθήσουν στο έργο της κατασκευής σύνθετων πινάκων.
Η πιο εντυπωσιακή επιλογή που θέλετε για έναν ιστότοπο WordPress είναι wpDataTables, ένας πίνακας WordPress plugin που διευκολύνει την εργασία σας με πίνακες, γραφήματα και διαχείριση δεδομένων. Με αυτό, μπορείτε να δημιουργήσετε responsive Πίνακες και γραφήματα WordPress.
Η plugin λειτουργεί πολύ γρήγορα με μεγάλους πίνακες, έως και εκατομμύρια σειρές, αλλά μπορείτε επίσης να κάνετε πολλές προσαρμογές και φιλτράρισμα στους πίνακες σχεδόν σαν να βρίσκεστε στο Excel ή στα Υπολογιστικά φύλλα Google.
Το μεγαλύτερο και πιθανότατα καλύτερο είναι Flexigrid. Έχει παρόμοια εμφάνιση με έναν πίνακα Java Swing και λειτουργεί με παρόμοιο τρόπο.
Τα χαρακτηριστικά του Flexigrid μπορεί να είναι πάρα πολύ για αυτό που χρειάζεστε, οπότε σε αυτήν την περίπτωση θα μπορούσατε να σκεφτείτε Επιτραπέζιος ταξινομητής, το οποίο είναι λίγο πιο απλό.
Ενώ οι δυνατότητες αυτών των ειδών εργαλείων μπορεί να είναι συναρπαστικές, είναι σημαντικό να προσθέσουν ακόμη περισσότερο στον χρόνο φόρτωσης της σελίδας σας. Είναι καλύτερο να αποθηκεύσετε τέτοιου είδους πράγματα όταν πρέπει πραγματικά να το έχετε.
Τα αυτοματοποιημένα εργαλεία μετατροπής συνήθως δεν δίνουν καλύτερα αποτελέσματα
Υπάρχουν διαθέσιμες προσθήκες CMS που σας επιτρέπουν να μετατρέπετε πίνακες εγγράφων σε πίνακες HTML. Αυτά δεν είναι πουθενά τόσο όμορφα όσο το να φτιάξετε τον πίνακα μόνοι σας με το χέρι, οπότε αν θέλετε καλύτερα αποτελέσματα, αυτοματοποίηση αυτού του είδους δεν είναι ο τρόπος να πάτε.
Ωστόσο, ο δικός σας οικιακός αυτοματισμός είναι εντάξει
Χρησιμοποιώντας PHP για την κατασκευή των πινάκων σας από τη βάση δεδομένωνformatΤο ion είναι πάντα μια καλή ιδέα και σίγουρα προτιμάται από το να πληκτρολογείτε τα πάντα χειροκίνητα. Η διαφορά εδώ είναι ότι έχετε τον πλήρη έλεγχο του τρόπου λειτουργίας του αυτοματισμού.
Όταν χρησιμοποιείτε αυτοματοποίηση τρίτων, ο τρίτος συντάκτης πρέπει να κάνει υποθέσεις σχετικά με τον πίνακα σας. Αυτό σημαίνει ότι θα καταλήξετε σε έναν γενικό πίνακα που μπορεί να μην διαθέτει πολλές δυνατότητες σε σύγκριση με τη δημιουργία του πίνακα μόνοι σας.
Χρησιμοποιήστε κατάλληλα τραπέζια και θα σας ανταμείψουν
Τα καλά τραπέζια σχεδιάζονται, δεν γίνονται απλά. Όταν σχεδιάζετε ένα informatσύστημα παροχής ιόντων, θέλετε να είναι αποτελεσματικό και αποτελεσματικό. Βεβαιωθείτε ότι τα τραπέζια σας έχουν σχεδιαστεί για να είναι ακριβώς αυτό και ο ιστότοπός σας θα έχει το μέγιστο όφελος από τη συμπερίληψή τους.
Η εικόνα της κεφαλίδας είναι ευγενική προσφορά του
Σχόλια απαντήσεις 0