Περιεχόμενο
- Δημιουργήστε έναν πίνακα σε HTML
- Βήμα 1
- Βήμα 2
- Βήμα 3
- Βήμα 4
- Βήμα 5
- Προσαρμόστε το ημερολόγιο
- Βήμα 1
- Βήμα 2
- ημερολόγιο thead {
- Βήμα 3
- το ημερολόγιο,
- ημερολόγιο td {
- Βήμα 4
- ημερολόγιο έκτασης td {
Παρόλο που οι πίνακες δεν είναι ευνοϊκοί για τη δημιουργία διατάξεων ιστοσελίδων, εξακολουθούν να λειτουργούν καλά για την κωδικοποίηση ημερολογίων HTML. Τα ημερολόγια εμφανίζουν δεδομένα πίνακα με έναν τρόπο, αφού οργανωθούν σε ένα πλέγμα ημερομηνιών με στήλες που ονομάζονται, για παράδειγμα, με τις ημέρες της εβδομάδας. Ο επιπλέον κώδικας CSS θα κάνει ένα κουραστικό πλέγμα με ονόματα και αριθμούς περισσότερο σαν ημερολόγιο. Δεδομένου ότι τα συμβάντα σε ένα ημερολόγιο χρειάζονται χώρο, τόσο για τον αριθμό των ημερομηνιών όσο και για τα συμβάντα, θα είναι επίσης απαραίτητο να χρησιμοποιήσετε το CSS για τη μορφοποίηση των ημερομηνιών με τρόπο που να διατηρεί την ανάγνωση και των δύο πληροφοριών.
Δημιουργήστε έναν πίνακα σε HTML
Βήμα 1
Δημιουργήστε έναν πίνακα για τη δομή του ημερολογίου. Αυτός ο πίνακας απαιτεί μια κεφαλίδα με επτά κελιά, μία για κάθε ημέρα της εβδομάδας. Είναι επίσης απαραίτητο να δημιουργηθούν έξι σειρές κανονικών κελιών πίνακα. Αντιγράψτε και επικολλήστε το απόσπασμα σε μια ιστοσελίδα με τη βοήθεια του Notepad ή ενός προγράμματος επεξεργασίας κώδικα.
| Κυριακή | Δευτέρα | Τρίτη | Τετάρτη | Πέμπτη | Παρασκευή | Σάββατο |
|---|
Αυτός ο κωδικός θα δημιουργήσει τον πίνακα και τον τίτλο. Ο πίνακας χρησιμοποιεί ένα όνομα αναγνώρισης που ονομάζεται "ημερολόγιο" σε περίπτωση που ο ιστότοπος χρησιμοποιεί πίνακες σε άλλες σελίδες.
Βήμα 2
Προσθέστε ένα ζευγάρι ετικετών σώματος κάτω από την ετικέτα "":
Βήμα 3
Αντιγράψτε τον ακόλουθο κώδικα και επικολλήστε τον μεταξύ του "
" έξι φορές:Αυτός ο κώδικας θα δημιουργήσει κάθε σειρά με επτά κελιά, έτσι ώστε με την προσθήκη έξι από αυτά, το ημερολόγιο θα έχει όλους τους χώρους δεδομένων που χρειάζεστε για όλους τους μήνες του έτους.
Βήμα 4
Προσθέστε ημερομηνίες στο ημερολόγιο σύμφωνα με το μήνα που θέλετε να εμφανίσετε. Συμβουλευτείτε ένα πραγματικό ημερολόγιο και προσέξτε να μην παραλείψετε ή να επαναλάβετε μια ημερομηνία. Κλείστε κάθε ημερομηνία με τις ετικέτες "" ώστε να μπορείτε να προσαρμόσετε τους αριθμούς αργότερα:
Βήμα 5
Σημειώστε τα συμβάντα στα κελιά που περιέχουν σχετικές ημερομηνίες. Τα συμβάντα πρέπει να βρίσκονται εκτός των ετικετών "" αλλά εντός του ""
’:
Πάρτυ του χαλογουήν!
Τελευταία ημέρα για εγγραφή.
Προσαρμόστε το ημερολόγιο
Βήμα 1
Εντοπίστε το "
Το περίγραμμα είναι προαιρετικό, αλλά αυτός είναι ο καταλληλότερος τρόπος για να προσθέσετε περιθώρια σε πίνακες σε τρέχουσες ιστοσελίδες.
Βήμα 2
Προσαρμόστε τον τίτλο του πίνακα με ένα χρώμα για τα γράμματα και ένα άλλο για το φόντο:
ημερολόγιο thead {
χρώμα: #ffffff; χρώμα φόντου: darkblue; γραμματοσειρά: έντονη; }
Είναι δυνατή η χρήση δεκαεξαδικού κώδικα ή το όνομα των χρωμάτων. Αυτός ο τίτλος θα εμφανίσει λευκό κείμενο σε μπλε φόντο.
Βήμα 3
Συμπλήρωση, περιθώρια, πλάτος και θέση σε σχέση με τα κελιά πίνακα:
το ημερολόγιο,
ημερολόγιο td {
επένδυση: 20px; περίγραμμα: 1px συμπαγές μαύρο; πλάτος: 100px; θέση: σχετική }
Η σχετική τοποθέτηση επιτρέπει στον προγραμματιστή να τοποθετεί ημερομηνίες με τη μορφή αριθμών στις γωνίες των κελιών του πίνακα αργότερα. Μην ορίσετε ύψος, καθώς αυτό θα περιορίσει το κείμενο που μπορείτε να προσθέσετε σε οποιαδήποτε ημερομηνία.
Βήμα 4
Δημιουργήστε τους αριθμούς χρησιμοποιώντας το γέμισμα, το χρώμα φόντου και την απόλυτη τοποθέτηση:
ημερολόγιο έκτασης td {
γραμματοσειρά: έντονη; θέση: απόλυτη; κάτω: 0; δεξιά: 0; οθόνη: μπλοκ; επένδυση: 5px; χρώμα φόντου: #eeeeee; }
Πρέπει να συμπεριλάβετε το "display: block" ώστε οι ετικέτες να λειτουργούν ως πλαίσια στην ιστοσελίδα, διαφορετικά δεν θα μπορείτε να τις γεμίσετε. Αυτό το δείγμα κώδικα δημιουργεί ένα αχνό γκρι πλαίσιο στην κάτω αριστερή γωνία κάθε χώρου ημερομηνίας, εμφανίζοντας τον αριθμό ημερομηνίας.