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

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

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

Πίνακας jQuery Snippets

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

Στυλ πίνακες

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

Δεν υπάρχουν περισσότεροι πίνακες

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

Πίνακας σώματος με δυνατότητα κύλισης

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

Κεφαλίδα σταθερού πίνακα

Ένα άλλο τέχνασμα, όπως παραπάνω, το Fixed Table Header βοηθά να δημιουργηθεί ένας πίνακας με μια σταθερή κεφαλίδα και περιεχόμενο με δυνατότητα κύλισης. Μπορείς προσαρμόσετε τον πίνακα, συμπεριλαμβανομένων των χρωμάτων και των γραμματοσειρών, αλλά αυτό το τέχνασμα δεν είναι τόσο λεπτομερές όσο και εξηγημένο ως Scroll-able Table Body.

Pure CSS Πίνακας

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

TABLEIZER!

TABLEIZER! είναι ένα ηλεκτρονικό εργαλείο που σας επιτρέπει να να δημιουργήσετε απλά τραπέζια σε HTML χρησιμοποιώντας δεδομένα από το Excel, το Google Sheets, ή οποιοδήποτε άλλο εργαλείο υπολογιστικού φύλλου. Μπορείτε επίσης να προσαρμόσετε το τελικό τραπέζι χρησιμοποιώντας το CSS, όπως ακριβώς και οποιοσδήποτε άλλος πίνακας σε HTML.

Γεννήτρια Πινάκων HTML

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

Quackit Γεννήτρια Πινάκων HTML

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

Ταχεία πίνακες HTML γεννήτρια πίνακα

HTML Table Generator από Rapid Tables είναι ένα ακόμα εργαλείο όπως το παραπάνω εργαλείο. Παρέχει περισσότερες επιλογές προσαρμογής από το παραπάνω εργαλείο, όπως μέγεθος, περίγραμμα, χρώμα, ευθυγράμμιση και μερικά άλλα. Ωστόσο, όπως και το παραπάνω εργαλείο, υποστηρίζει μόνο δημιουργώντας τον πίνακα με μη αυτόματο τρόπο και δεν επιτρέπει την εισαγωγή αρχείων ή να πάρετε δεδομένα από ένα εργαλείο υπολογιστικών φύλλων, όπως τα Έγγραφα Google.

HTML Styler πίνακα

Ένα εργαλείο προσαρμογής πίνακα, το HTML Table Styler, σας επιτρέπει να σχεδιάζετε τα τραπέζια σας χρησιμοποιώντας επιλογές επί της οθόνης που παράγουν CSS για τον πίνακα σας σε HTML. Αυτό το εργαλείο, εκπληκτικά, δείχνει μια ζωντανή προεπισκόπηση του πίνακα, επιτρέποντάς σας να δοκιμάσετε και να δοκιμάσετε τις επιλογές styling. Επίσης, προσφέρει θέματα για γρήγορο στυλ ενός πίνακα, που μπορείτε επίσης να προσαρμόσετε.

Εργαλεία μετατροπής

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

Πίνακας HTML σε μετατροπέα Div

Ένα online εργαλείο μετατροπής, ο πίνακας HTML σε μετατροπέα Div σας επιτρέπει να μετατρέψετε τους παραδοσιακούς πίνακες σε πίνακες div, δηλ. Τους πίνακες που δημιουργήθηκαν με τη χρήση στοιχείων "div". Το μόνο που πρέπει να κάνετε είναι να το κάνετε αντιγράψτε και επικολλήστε ένα τραπέζι στη σελίδα του και πατήστε το κουμπί μετατροπής για να δημιουργήσετε έναν πίνακα div.

Χειροκίνητο

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

Dynatable.js

Ένα διαδραστικό πρόσθετο πίνακα, Dynatable.js χρησιμοποιεί HTML, jQuery και JSON για τη δημιουργία πινάκων και άλλων δομών τύπου πίνακα. Μπορείτε να δημιουργήσετε πίνακες απευθείας από το JSON και να ενσωματώσετε όλες τις βασικές λειτουργίες όπως αναζήτηση, φιλτράρισμα, καταμέτρηση αρχείων και σελίδωση.

Πίνακας εκκίνησης

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

List.js

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

jExcel

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

Πίνακες δεδομένων

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

jQuery Bootgrid

Το jQuery Bootgrid είναι ένα κομψό και διαισθητικό plugin για τη δημιουργία και τη διαχείριση πλεγμάτων όπως οι πίνακες. Παρέχει δυνατότητες όπως αναζήτηση, σελίδωση, κλπ. Μαζί με προσαρμόσιμα πρότυπα.

jQuery-Tabledit

Το jQuery-Tabledit είναι ένα ηλεκτρονικό πρόγραμμα επεξεργασίας για πίνακες HTML συμβατού με Bootstrap που επιτρέπει στους χρήστες να επεξεργάζονται δεδομένα μέσα στους πίνακες. Μπορείτε να παράσχετε για εναλλαγή μεταξύ λειτουργίας προβολής και επεξεργασίας, να συμπεριλάβετε κουμπιά διαγραφής και επαναφοράς και να προσαρμόσετε τους πίνακες χρησιμοποιώντας το CSS.

jsGrid

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

Έξυπνο τραπέζι

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

HighchartTable

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

TableExport

TableExport είναι μια απλή βιβλιοθήκη για να εξαγωγή ενός πίνακα HTML σε αρχεία CSV, TXT ή Excel. Χρησιμοποιώντας αυτήν τη βιβλιοθήκη, μπορείτε εύκολα να δημιουργήσετε πίνακες με τη δυνατότητα εξαγωγής σε αρχείο.

Πινακοποιητής

Το Tabulator είναι ένα plugin jQuery για δημιουργώντας διαδραστικούς πίνακες από πίνακα HTML, πίνακα JavaScript, JSON κλπ. Υποστηρίζει σχεδόν όλες τις τυπικές λειτουργίες πίνακα όπως αναζήτηση, ταξινόμηση, φιλτράρισμα κ.λπ. και προσφέρει πολλά χαρακτηριστικά, όπως θέματα, επανάκλησεις και εντοπισμός.

FancyGrid

Μια βιβλιοθήκη πλέγματος, το FancyGrid σας επιτρέπει να δημιουργείτε όμορφα τραπέζια μαζί με γραφήματα και γραφήματα. Υποστηρίζει πολλές πηγές δεδομένων συμπεριλαμβανομένου του JSON, περιλαμβάνει διάφορες λειτουργίες όπως sorting, search, κ.λπ., επιτρέπει το θέμα και modularization, και φέρνει πολλά άλλα χαρακτηριστικά.

KingTable

Το KingTable σάς επιτρέπει να χτίσετε διοικητικούς πίνακες με ελάχιστη κωδικοποίηση. Έρχεται με ένα αξιοσημείωτο πλήθος χαρακτηριστικών, όπως αναζήτηση, ταξινόμηση, φιλτράρισμα και περισσότερες κοινές λειτουργίες από πλευράς πελάτη ή διακομιστή. Μπορείτε να προσαρμόσετε την εμφάνιση και την αίσθηση του τραπεζιού, προσθέστε προσαρμοσμένα φίλτρα και εξαγάγετε τα δεδομένα σε διάφορες μορφές όπως CSV, JSON και Excel.

stacktable.js

Ένα plugin jQuery για πίνακες, το stacktable.js σας επιτρέπει μετατρέψτε οποιοδήποτε τραπέζι με ευρεία εμφάνιση σε πίνακα με 2 στήλες. Είναι μια ιδανική λύση για την προβολή μεγάλων τραπεζιών σε μικρές οθόνες όπως αυτές των κινητών συσκευών. Επίσης, μπορείτε να στοιβάζετε σειρές ή στήλες όπως απαιτείται.

Tabella.js

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

TablePress

Το TablePress είναι ένα φανταστικό plugin για το WordPress που σας επιτρέπει δημιουργήστε και ενσωματώστε πίνακες σε αναρτήσεις, σελίδες και widget κειμένου χρησιμοποιώντας ένα shortcode. Οι πίνακες μπορούν να επεξεργαστούν σε μια διεπαφή τύπου υπολογιστικού φύλλου και μπορούν να περιέχουν όλους τους τύπους δεδομένων, συμπεριλαμβανομένων και των τύπων. Μπορείτε επίσης να προσθέσετε λειτουργίες όπως αναζήτηση, ταξινόμηση και εξαγωγή δεδομένων σε διάφορες μορφές.

Πίνακες δεδομένων γεννήτρια από Supsystic

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

Πίνακας τιμών από το Supsystic

Ένα άλλο πρόσθετο από το Supsystic, πίνακας τιμολόγησης, σας επιτρέπει να δημιουργείτε πίνακες τιμολόγησης χωρίς εμπόδια. Μπορείς να επιλέξετε ένα πρότυπο, να επεξεργαστείτε το περιεχόμενο τιμολόγησης και να το δημοσιεύσετε στο WordPress. Επίσης, οι πίνακες που δημιουργήθηκαν με αυτό το πρόσθετο έχουν απόκριση και κομψότητα σε όλες τις συσκευές.

Magic Liquidizer Ανταπόκριση πίνακα

Ένα πρόσθετο πίνακα για το WordPress, Magic Liquidizer Response Table μετατρέπει οποιοδήποτε συνηθισμένο τραπέζι σε πίνακα κινητής απόκρισης. Μπορείτε να εισαγάγετε εικόνες, κείμενα κ.λπ. στα τραπέζια σας και να τα εμφανίσετε όπως συμβαίνει σε όλες τις συσκευές - ακόμα και σε αυτές με μικρές οθόνες.

Φορητοί δίσκοι

Το Copytables είναι μια επέκταση για το Google Chrome που επιτρέπει την αντιγραφή πινάκων από ιστοσελίδες. Μπορείς επιλέξτε κελιά πίνακα, γραμμές ή στήλες σε οποιαδήποτε ιστοσελίδα και αντιγράψτε τις απευθείας .