Καλύτεροι τρόποι ενσωμάτωσης πινάκων και υπολογιστικών φύλλων σε ιστοσελίδες | Tech | el.estacion506cr.com

Καλύτεροι τρόποι ενσωμάτωσης πινάκων και υπολογιστικών φύλλων σε ιστοσελίδες



Είναι εύκολο να ενσωματώσετε πίνακες δεδομένων σε ιστοσελίδες. Μπορείτε είτε να χρησιμοποιήσετε το πρότυπο

Ετικέτα HTML ή μπορείτε να εισάγετε τα δεδομένα πίνακα σε ένα υπολογιστικό φύλλο - όπως Excel Online ή Τα υπολογιστικά φύλλα Google - και να ενσωματώσετε το φύλλο στις ιστοσελίδες σας.

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

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

Αν έχετε πρόσβαση σε ένα πρόγραμμα επεξεργασίας WYSIWYG όπως το Dreamweaver, μπορείτε εύκολα να δημιουργήσετε έναν πίνακα HTML χρησιμοποιώντας τους ενσωματωμένους οδηγούς, αλλά προτιμώ να χρησιμοποιώ το Markdown για τη δημιουργία πινάκων καθώς δεν απαιτεί ετικέτες. Πηγαίνετε στο gist.github.com (δεν χρειάζεστε καν έναν λογαριασμό εδώ) και εισάγετε τον πίνακα με την ακόλουθη μορφή:

Στήλη Α | Στήλη Β -------- | ------- Κυψέλη A1 Κύτταρο Β1 Κύτταρο Α2 | Το κύτταρο Β2

Κάθε στήλη διαχωρίζεται με ένα σωλήνα (|) ενώ οι παύλες (-) υποδεικνύουν τις επικεφαλίδες του πίνακα. Ονομάστε το gist table.md (.md υποδεικνύει τη γλώσσα σήμανσης) και κάντε κλικ στο κουμπί "Create Secret Gist" για να καταστήσετε το markdown ως πίνακα.

Μόλις κάνετε κλικ στο Αποθηκεύσετε , η ουσία θα σας δείξει το οπτικό τραπέζι το οποίο μπορείτε να αντιγράψετε-επικολλήσετε σε οποιονδήποτε επεξεργαστή εμπλουτισμένου κειμένου όπως το παράθυρο σύνταξης του Gmail. Εναλλακτικά, μπορείτε να κάνετε δεξί κλικ στον πίνακα στο Github και να επιλέξετε Ελέγξτε το Στοιχείο για να δείτε τις πραγματικές ετικέτες HTML για αυτόν τον πίνακα.



Tableizer είναι ένα άλλο απλό εργαλείο για τη μετατροπή δεδομένων υπολογιστικού φύλλου σε κώδικα πίνακα HTML. Δημιουργήστε έναν πίνακα μέσα στο Excel ή την εφαρμογή Numbers στην επιφάνεια εργασίας σας, αντιγράψτε τα κελιά και επικολλήστε τα μέσα στο Tableizer. Θα δημιουργήσει τον κώδικα HTML που μπορεί να χρησιμοποιηθεί στο ιστολόγιό σας ή στον ιστότοπό σας.

Ενσωματώστε τα Φύλλα Google στον ιστότοπό σας

Μια δημοφιλής επιλογή για την ενσωμάτωση των πινακοποιημένων δεδομένων σε μια ιστοσελίδα είναι μέσω των Εγγράφων Google (Spreadsheets). Το πλεονέκτημα με αυτήν την προσέγγιση είναι ότι μπορείτε να τροποποιήσετε τα δεδομένα στο υπολογιστικό φύλλο και ο ενσωματωμένος πίνακας θα ενημερωθεί για να αντικατοπτρίζει τις αλλαγές. Δεν χρειάζεται να επεξεργαστείτε την ιστοσελίδα που περιέχει τον πίνακα.

Μεταβείτε στη διεύθυνση spreadsheets.google.com, καταχωρίστε ορισμένα δεδομένα στο φύλλο και επιλέξτε το Δημοσιεύστε στον ιστό από το μενού Αρχείο. Επιλέγω Ξεκινήστε τη δημοσίευση και το Google Drive θα σας προσφέρει τον κώδικα ενσωμάτωσης IFRAME για αυτό το συγκεκριμένο φύλλο.

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

Ενσωματώστε φύλλα Excel σε ιστοσελίδες

Αυτή είναι η αγαπημένη μου μέθοδος για την ενσωμάτωση δεδομένων υπολογιστικών φύλλων στην ιστοσελίδα και σύντομα θα εξηγήσω γιατί.

Πηγαίνετε στο office.live.com και δημιουργήστε νέο κενό βιβλίο εργασίας. Καταχωρίστε τα πινακοποιημένα δεδομένα μέσα στο φύλλο του Excel και στη συνέχεια επιλέξτε Αρχείο -> Κοινή χρήση -> Ενσωμάτωση -> Δημιουργία HTML.

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

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

Σχετικά: Καταγράψτε τους πίνακες Web στο Excel

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

Αν θέλετε να πάτε με στατικούς πίνακες HTML, αντί για πίνακες με διαδραστικό υπολογιστικό φύλλο, μπορείτε να προσθέσετε το κουμπί Excel που θα κάνει τους πίνακες HTML διαδραστικό.

Έχετε τον κανονικό κώδικα HTML για το δικό σας

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

Στήλη Α Στήλη Β
Cell A1 Κύτταρο Β1
Το κύτταρο Α2 Το κύτταρο Β2

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

HTML πίνακες ή υπολογιστικά φύλλα;

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

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

Σχετικός οδηγός: Πώς να ενσωματώσετε οτιδήποτε σε μια ιστοσελίδα

Προηγούμενο Άρθρο

Πώς να ελέγξετε αν η μπαταρία σας είναι καλή!

Επόμενο Άρθρο

Κωδικός σφάλματος της Sony TV - Έξι αναλαμπές.