Δημιουργία καλύτερων πινάκων HTML

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

Είναι σχεδόν αδύνατο να δημιουργηθούν τέλεια τραπέζια, εκτός εάν περιέχουν τόσο λίγα στοιχεία που δεν είναι πιθανό να προκληθούν προβλήματα. Τα είδη σφαλμάτων που μπορούν να προκύψουν περιλαμβάνουν:

  • Αναδίπλωση κειμένου λανθασμένα
  • Σφάλματα αιτιολόγησης
  • Απόδοση πίνακα εκτός οθόνης
  • Προβλήματα κύλισης
  • Σφάλματα ύψους σειράς
  • Σφάλματα πλάτους στήλης
  • Γενική ασχήμια ή ακαταστασία

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

Στρατηγικές αποφυγής προς αποφυγή

Επειδή τα τραπέζια είναι τόσο δύσκολο να γίνουν σωστά, ορισμένοι προσπαθούν να αποφύγουν τη χρήση τους. Ορισμένες κοινές στρατηγικές χρησιμοποιούν το CSS για να δημιουργήσουν έναν ψεύτικο πίνακα και χρησιμοποιούν μια εικόνα του πίνακα δεδομένων χωρίς να τον εφαρμόσουν σε κώδικα.

Και οι δύο αυτές στρατηγικές αποφυγής έχουν ελαττώματα και πρέπει να αποφεύγονται. Η χρήση του CSS για απομίμηση ενός πίνακα δεν έχει τη σημασιολογική δομή που είναι εγγενής σε έναν πίνακα, η οποία μπορεί να δημιουργήσει προβλήματα ευχρηστίας και προσβασιμότητας.

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

Τα πλαίσια είναι οι φίλοι σας

Τα κοινά πλαίσια όπως το Bootstrap και το Foundation περιέχουν πολλά εργαλεία εξοικονόμησης χρόνου και οι πίνακες δεν αποτελούν εξαίρεση. Η κατασκευή ενός αριστοκρατικού τραπεζιού στο Bootstrap δεν είναι δύσκολη, αλλά έρχεται με κάποιους περιορισμούς εάν απλώς χτίσετε το ράφι χωρίς να προσθέσετε κάποια προσαρμοσμένη προσαρμογή στις προσπάθειές σας.

Τα βλέμματα δεν είναι τα πάντα

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

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

Στόχος για προσβασιμότητα

Μερικοί άνθρωποι δυσκολεύονται να δουν και να διαβάσουν έντυπο κείμενο, οπότε είναι καλή ιδέα να κάνετε τους πίνακες προσβάσιμους για αυτούς. Μπορείτε να μάθετε όλα όσα πρέπει να γνωρίζετε για να κάνετε τα τραπέζια σας πιο προσβάσιμα WebAIM.

Εξετάστε το ενδεχόμενο να δώσετε τιμές ID σε στοιχεία πίνακα

Για μέγιστο έλεγχο σε κάθε τμήμα του πίνακα (σειρές, κελιά), μπορείτε να τους δώσετε μεμονωμένες τιμές ταυτότητας. Η προσθήκη τιμών τάξης επίσης θα σας δώσει ακόμη μεγαλύτερη ευελιξία.

Κάνοντας αυτά τα πράγματα δημιουργείτε πολύ περισσότερη δουλειά για εσάς, οπότε είναι πρακτικό μόνο όταν πρέπει να είστε σε θέση να τελειοποιήσετε οποιοδήποτε στοιχείο με αναφορά. Εάν αποφασίσετε να το κάνετε αυτό, θα μπορείτε να χειριστείτε άμεσα οποιοδήποτε στοιχείο πίνακα χρησιμοποιώντας JavaScript και CSS.

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

Αποτελεσματικά σημαίνει ότι οι στήλες υπάρχουν μόνο με αφηρημένη έννοια πριν από την απόδοση της σελίδας, οπότε δεν μπορείτε να τους δώσετε κανένα είδος αναφοράς. Δίνοντας στο πρώτο στοιχείο TD στη σειρά μια κλάση, για παράδειγμα, "firstCol", παρέχετε έναν τρόπο άμεσης αναφοράς μιας στήλης.

Οι συμπαγείς πίνακες είναι οι καλύτεροι

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

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

Οι πίνακες πρέπει πάντα να έχουν δυνατότητα κύλισης

Είναι μια καλή πρακτική να ορίζετε πάντα την τιμή υπερχείλισης ενός πίνακα σε αυτόματο, αλλά όχι στον ίδιο τον πίνακα. Αντ 'αυτού, τυλίξτε το τραπέζι μέσα σε ένα div, κάτι σαν αυτό:

Τότε υπάρχει πολύς κώδικας PHP που κατασκευάζει το σώμα του πίνακα, κλείνοντας με αυτό:

Το μέρος που κάνει τη δουλειά του να κάνει κύλιση του πίνακα είναι στην πρώτη γραμμή, όπου το div-wrap table έχει ένα σταθερό ύψος και έχει ρυθμίσει την τιμή υπερχείλισης σε αυτόματο. Εάν το κάνετε αυτό στο ίδιο το τραπέζι, αντί για ένα περιτύλιγμα γύρω από το τραπέζι, μπορεί να έχει ακούσια εφέ.

Καλέστε τα βαρύ χτύπημα αν χρειαστεί

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

Η πιο εντυπωσιακή επιλογή που θέλετε για έναν ιστότοπο WordPress είναι wpDataTables, μια προσθήκη πίνακα WordPress που διευκολύνει τη δουλειά σας με πίνακες, γραφήματα και διαχείριση δεδομένων. Με αυτό, μπορείτε να δημιουργήσετε αποκριτικούς πίνακες και γραφήματα WordPress.

πρόσθετο wpdatatables

Η προσθήκη λειτουργεί πολύ γρήγορα με μεγάλους πίνακες, έως και εκατομμύρια σειρές, αλλά μπορείτε επίσης να κάνετε πολλές προσαρμογές και φιλτράρισμα στους πίνακες σχεδόν σαν να βρίσκεστε στο Excel ή στο Google Spreadsheets.

Το μεγαλύτερο και πιθανότατα καλύτερο είναι Flexigrid. Έχει παρόμοια εμφάνιση με έναν πίνακα Java Swing και λειτουργεί με παρόμοιο τρόπο.

Τα χαρακτηριστικά του Flexigrid μπορεί να είναι πάρα πολύ για αυτό που χρειάζεστε, οπότε σε αυτήν την περίπτωση θα μπορούσατε να σκεφτείτε Επιτραπέζιος ταξινομητής, το οποίο είναι λίγο πιο απλό.

Ενώ οι δυνατότητες αυτών των ειδών εργαλείων μπορεί να είναι συναρπαστικές, είναι σημαντικό να προσθέσουν ακόμη περισσότερο στον χρόνο φόρτωσης της σελίδας σας. Είναι καλύτερο να αποθηκεύσετε τέτοιου είδους πράγματα όταν πρέπει πραγματικά να το έχετε.

Τα αυτοματοποιημένα εργαλεία μετατροπής συνήθως δεν δίνουν καλύτερα αποτελέσματα

Υπάρχουν διαθέσιμες προσθήκες CMS που σας επιτρέπουν να μετατρέπετε πίνακες εγγράφων σε πίνακες HTML. Αυτά δεν είναι πουθενά τόσο όμορφα όσο το να φτιάξετε τον πίνακα μόνοι σας με το χέρι, οπότε αν θέλετε καλύτερα αποτελέσματα, αυτοματοποίηση αυτού του είδους δεν είναι ο τρόπος να πάτε.

Ωστόσο, ο δικός σας οικιακός αυτοματισμός είναι εντάξει

Η χρήση της PHP για τη δημιουργία πινάκων από πληροφορίες βάσης δεδομένων είναι πάντα καλή ιδέα και σίγουρα προτιμάται να πληκτρολογείτε τα πάντα με μη αυτόματο τρόπο. Η διαφορά εδώ είναι ότι έχετε τον πλήρη έλεγχο του τρόπου λειτουργίας του αυτοματισμού.

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

Χρησιμοποιήστε κατάλληλα τραπέζια και θα σας ανταμείψουν

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

Η εικόνα της κεφαλίδας είναι ευγενική προσφορά του

Μπογκντάν Ράνσα

Ο Bogdan είναι ιδρυτικό μέλος του Inspired Mag, έχοντας συγκεντρώσει σχεδόν 6 χρόνια εμπειρίας κατά τη διάρκεια αυτής της περιόδου. Στον ελεύθερο χρόνο του αρέσει να μελετά την κλασική μουσική και να εξερευνά εικαστικές τέχνες. Είναι επίσης πολύ παθιασμένος με τους fixies. Έχει ήδη 5.