Οι πίνακες δεδομένων παραθέτουν διάφορες πληροφορίες σε στήλες και σειρές για εύκολη ανάγνωση. Τα δεδομένα είναι συνήθως εν μέρει αριθμητικά με ετικέτες κειμένου. Ένα παράδειγμα είναι ένας πίνακας δεδομένων που δείχνει πόσες θερμίδες κάποιος τρώει κάθε μέρα. Η δημιουργία ενός πίνακα δεδομένων online μπορεί να γίνει με HTML ή την πιο περίπλοκη γλώσσα του προγράμματος περιήγησης CSS. Ο τελικός πίνακας μοιάζει με έναν πίνακα δεδομένων που δημιουργήθηκε σε υπολογιστικό φύλλο ή σε χαρτί. Η μόνη διαφορά είναι η κωδικοποίηση παρασκηνίου, η οποία δεν εμφανίζεται εκτός εάν κοιτάξει τον πηγαίο κώδικα. Η κωδικοποίηση μπορεί να δημιουργηθεί με επεξεργαστές HTML, κείμενο ή με άλλους τρόπους. Υπάρχουν πολλοί ιστότοποι στο διαδίκτυο που προσφέρουν τη δυνατότητα εισαγωγής δεδομένων, ορισμού ορισμένων χαρακτηριστικών και δημιουργίας όλων των κωδικοποιήσεων πίνακα για εσάς. Οι διαδικτυακοί πίνακες δεδομένων χρησιμοποιούνται συνήθως ως μέρος μιας ιστοσελίδας. Οι πίνακες δεδομένων χρησιμοποιούνται συχνά για τη δημιουργία λιστών στοιχείων με κατηγορίες, όπως αντικείμενα προς πώληση. Ορισμένες ιστοσελίδες τις χρησιμοποιούν για την εμφάνιση στατιστικών πληροφοριών. Ενώ οι πίνακες δεδομένων μπορούν να χρησιμοποιηθούν εκτός σύνδεσης για εκτύπωση ή σε αναφορές, είναι συνήθως καλύτερο να το χρησιμοποιήσετε λογισμικό υπολογιστικών φύλλων, όπως το Microsoft Office Excel, το οποίο προσφέρει πολλές άλλες δυνατότητες για εργασία με δεδομένα. Αυτός ο οδηγός δείχνει πώς να δημιουργήσετε έναν πίνακα δεδομένων HTML με το Σημειωματάριο.
Ανοίξτε ένα πρόγραμμα επεξεργασίας HTML ή απλά ένα συνηθισμένο έγγραφο κειμένου Notepad για να εισαγάγετε κώδικα HTML. Το Σημειωματάριο λειτουργεί καλά αν είστε συνηθισμένοι στην κωδικοποίηση HTML. Οι επεξεργαστές HTML κάνουν τα επαναλαμβανόμενα καθήκοντα γρηγορότερα, αλλά μερικά, όπως το Frontpage, προσθέτουν επιπλέον, περιττή κωδικοποίηση που μπορεί να επιβραδύνει τις ιστοσελίδες. Το καλύτερο που πρέπει να κάνετε είναι να κωδικοποιήσετε πρώτα έναν επεξεργαστή HTML και μετά να επιστρέψετε και να επεξεργαστείτε τον κώδικα με το χέρι για να τον καθαρίσετε.
Αποφασίστε τα χαρακτηριστικά πίνακα για το περίγραμμα, το πλάτος, το χρώμα φόντου και τα χρώματα γραμματοσειράς. Πρέπει να λάβετε υπόψη τη διάταξη της ιστοσελίδας, το πλάτος, τα χρώματα και άλλα χαρακτηριστικά για να κάνετε τον πίνακα ευανάγνωστο. Πρέπει επίσης να αποφασίσετε πόσες σειρές και στήλες χρειάζονται για τα δεδομένα. Αρχίστε να ορίζετε τα χαρακτηριστικά του πίνακα. (Το παράδειγμά μας δείχνει τον αριθμό των θερμίδων που τρώγονται στο μεσημεριανό γεύμα και το δείπνο κάθε καθημερινή. Χρειαζόμαστε τρεις στήλες (Ημέρα, Μεσημεριανό και Δείπνο) και επτά σειρές (δύο για ετικέτες και μία για κάθε καθημερινή).
Προσθέστε ένα περίγραμμα γύρω από τον πίνακα και τα κελιά δεδομένων. Τα περιγράμματα διαχωρίζουν τα δεδομένα σε κελιά για εύκολη προβολή. Μετράται σε pixel και μπορεί να έχει τιμή 0 για να μην τα χρησιμοποιήσετε. Ένα περίγραμμα ενός ή δύο pixel είναι γενικά εντάξει. Η ετικέτα για το περίγραμμα είναι
bgcolor = περίγραμμα = "CHOSEN_BORDER_WIDTH"
Το χρώμα περιγράμματος μπορεί να αλλάξει με την ετικέτα
bordercolor = "CHOSEN_COLOR"
που χρησιμοποιεί τους βασικούς όρους χρωμάτων, όπως κόκκινο ή μαύρο ή εξαψήφιο δεκαεξαδικό χρωματικό κώδικα. Τα δεκαεξαδικά προσφέρουν περισσότερα χρώματα. Το παράδειγμά μας χρησιμοποιεί περίγραμμα = "2" και bordercolor = "μαύρο".
Προσδιορίστε το πλάτος ολόκληρου του πίνακα. Μετράται σε pixel ή τοις εκατό του μεγέθους της οθόνης. Τα pixel είναι οριστικά και τα ποσοστά επιτρέπουν στον πίνακα να προσαρμόζεται σε διαφορετικά μεγέθη οθόνης. Προσπαθήστε να κρίνετε το πλάτος με βάση το πλάτος των δεδομένων στις σειρές. Εάν αργότερα ανακαλύψετε ότι ο πίνακας είναι πολύ λεπτός ή φαρδύς, μπορεί να αλλάξει. Το παράδειγμά μας χρησιμοποιεί πλάτος = "175".
Ορίστε το χρώμα φόντου των κελιών δεδομένων. Είναι διαφορετικό από το χρώμα φόντου της σελίδας, το οποίο μπορεί να προσφέρει καλή αντίθεση. Η ετικέτα είναι
bgcolor = "CHOSEN_COLOR"
ακριβώς όπως το χρώμα του περιγράμματος. Το παράδειγμά μας χρησιμοποιεί bgcolor = "white".
Ορίστε το χρώμα γραμματοσειράς του κειμένου στα κελιά. Βεβαιωθείτε ότι το χρώμα έρχεται σε αντίθεση με το φόντο, ώστε να είναι ευανάγνωστο. Το φως στο σκοτάδι ή στο σκοτάδι στο φως λειτουργεί πάντα καλύτερα. Η ετικέτα είναι
γραμματοσειρά = "CHOSEN_COLOR"
Το παράδειγμά μας είναι το font = "black", το οποίο έρχεται σε αντίθεση με το λευκό φόντο.
Γράψτε τις πλήρεις ετικέτες πίνακα μεταξύ αριστερού και δεξιού βέλους με κενό μεταξύ των χαρακτηριστικών της ετικέτας και ξεκινώντας με την ετικέτα πίνακα μπροστά. Η σειρά των ετικετών δεν έχει σημασία, αρκεί ο "πίνακας" να είναι μπροστά.
Προσδιορίστε τα πλάτη των στηλών. Το πλάτος κάθε στήλης εξαρτάται από το πλάτος ολόκληρου του πίνακα. Πάρτε το πλάτος του πίνακα και διαιρέστε το με τον αριθμό των κελιών για να λάβετε στήλες ομοιόμορφου μεγέθους. Εάν είναι απαραίτητο, προσαρμόστε τα πλάτη της στήλης, αλλά το σύνολο δεν μπορεί να υπερβαίνει το πλάτος του πίνακα. Όταν αλλάζει το πλάτος ενός κελιού, τα άλλα κελιά πρέπει να προσαρμοστούν στο συνολικό πλάτος του πίνακα. (Το παράδειγμά μας έχει πλάτος 175 και τρεις στήλες ανά σειρά, οπότε ομαλός διαχωρισμός είναι περίπου 59. Η πραγματική διάσπαση είναι 70, 60, 40.)
Αρχίστε να προσθέτετε τα δεδομένα σας. Αρχικά, ξεκινήστε μια νέα γραμμή και προσθέστε μια σειρά πίνακα με τον κωδικό
Εισαγάγετε τα δεδομένα σας για το κελί. χρησιμοποιώντας αυτόν τον κωδικό για την αναπαράσταση κενών κελιών:
Κλείστε το κελί με την ετικέτα. Η ετικέτα bordercolor χρησιμοποιείται για να καθορίσει το χρώμα περιγράμματος κελιού, εάν είναι επιθυμητό. Εάν παραμείνει εκτός, χρησιμοποιείται το προεπιλεγμένο bordercolor πίνακα. Ο πρώτος κωδικός κελιού του παραδείγματος μας είναι:
Επαναλάβετε τη δημιουργία κελιών δεδομένων πίνακα, το καθένα σε μια νέα γραμμή, μέχρι να ολοκληρωθούν όλα τα κελιά της σειράς. Στη συνέχεια, τερματίστε τη σειρά με την ετικέτα. Ξεκινήστε την επόμενη σειρά με την ίδια διαδικασία, ξεκινώντας με το
Κλείστε τον κωδικό πίνακα με το ετικέτα. Ο τελικός κωδικός μας πίνακα, εάν τερματιστεί μετά από δύο σειρές δεδομένων, είναι παρακάτω.
Πράγματα που θα χρειαστείτε
- Πρόγραμμα επεξεργασίας HTML ή Σημειωματάριο
- Δεδομένα