Οι πίνακες παίζουν σημαντικό ρόλο όταν πρόκειται να απεικονίσουν δεδομένα σε μια οργανωμένη μορφή. Σε αυτό το σεμινάριο θα μάθεις πώς να δημιουργείς βασικούς HTML πίνακες και να χρησιμοποιείς τις βασικές ετικέτες για τη διάταξη και τη δομή.
Οδηγίες βήμα προς βήμα
Ας ξεκινήσουμε με τη δημιουργία του πρώτου σου πίνακα! Πρώτα πρέπει να ξέρεις ότι η βασική ετικέτα για έναν πίνακα είναι. Αυτή η ετικέτα περιλαμβάνει ολόκληρο τον πίνακα.
Τώρα προσθέτουμε μία γραμμή. Κάθε γραμμή ορίζεται με την ετικέτα, που σημαίνει "table row". Σε αυτή τη γραμμή δεν υπάρχουν δεδομένα, έτσι μένει προσωρινά κενή. Μπορείς να φανταστείς ότι κάθε γραμμή μπορεί να προσφέρει χώρο για πολλές στήλες.
Τώρα είναι η ώρα να προσθέσεις κάποια δεδομένα στον πίνακα. Για αυτό χρησιμοποιούμε την ετικέτα - και προσθέτουμε τις αντίστοιχες τιμές. Ας υποθέσουμε ότι το πρώτο όνομα είναι "Jan", το email είναι "support@programmierenlern.info" και η ημερομηνία γέννησης είναι 23.06.1982. Η γραμμή σου θα πρέπει τότε να φαίνεται ως εξής:
Βεβαιώσου ότι ο πίνακας τώρα φαίνεται καλύτερα. Μπορείς να προσθέσεις όσες γραμμές θέλεις, απλά χρησιμοποιώντας περισσότερες ετικέτες - και -. Ας προσθέσουμε έναν ακόμα υπάλληλο. Ας τον ονομάσουμε "Joe Average" και το email του θα μπορούσε να είναι "joe@average.com".
Όταν ανανεώσουμε τώρα τον πίνακα, διαπιστώνουμε ότι μεγαλώνει και όλα τα καταχωρημένα δεδομένα είναι ορατά. Η δομή είναι σημαντική, καθώς σου παρέχει μια σαφή επισκόπηση των πληροφοριών.
Τι γίνεται αν θέλεις να τοποθετήσεις μια υποσημείωση στο τέλος του πίνακα, για παράδειγμα για ένα πνευματικό δικαίωμα; Εδώ μπαίνει στον χορό το colspan. Με το colspan μπορείς να δηλώσεις πόσες στήλες θα καλύψει ένα κελί. Έτσι, για να τοποθετήσεις ένα πνευματικό δικαίωμα σε όλες τις τρεις στήλες, γράφεις: Copyright 2015 coding-geeks.de.
Μετά την προσθήκη αυτής της υποσημείωσης, θα πρέπει να ελέγξεις την εμφάνιση. Η ιδέα είναι ότι η υποσημείωση θα τοποθετηθεί κάτω από τις στήλες και τα δεδομένα θα παρουσιαστούν με σαφή τρόπο. Σε αυτή την περίπτωση, η υποσημείωση δεν έχει δική της στήλη και θα πρέπει να τοποθετείται πάνω από τις άλλες τρεις στήλες.
Εάν τώρα μειώσεις το colspan σε τιμή δύο, θα μπορούσες επίσης να προσθέσεις μια δεύτερη σημείωση. Ας υποθέσουμε ότι θέλεις να απεικονίσεις το "Coding Geeks" σε μια νέα στήλη. Για αυτό χρησιμοποίησε ξανά την ετικέτα - ενώ εφαρμόζεις σωστά το colspan.
Αν έχεις ακολουθήσει όλα αυτά τα βήματα, έχεις μάθει πώς να δημιουργείς βασικούς HTML πίνακες. Η οπτική σχεδίαση θα πρέπει ωστόσο να γίνεται πάντα μέσω CSS, για να βελτιώσεις τη διάταξη και την χρηστικότητα. Αυτό περιλαμβάνει το να διαχωρίσεις το περιεχόμενο από τη διάταξή του, έτσι ώστε να έχεις περισσότερη ευελιξία στο σχεδιασμό των ιστοσελίδων σου αργότερα.
Περίληψη - Δημιουργία βασικών HTML πινάκων
Έχεις μάθει τη δομή και τη χρήση των HTML πινάκων, ξεκινώντας από την κατασκευή μέχρι την τοποθέτηση των δεδομένων και την υποσημείωση. Τώρα μπορείς να απεικονίσεις απλά τα δεδομένα σε πίνακες στην ιστοσελίδα σου.
Συχνές ερωτήσεις
Ποιες είναι οι βασικές ετικέτες για HTML πίνακες;Οι βασικές ετικέτες είναι,, για επικεφαλίδες και για κελιά δεδομένων.
Μπορώ να δημιουργήσω απεριόριστο αριθμό γραμμών και στηλών σε έναν πίνακα;Ναι, θεωρητικά μπορείς να προσθέσεις πολλές γραμμές και στήλες, αλλά είναι σημαντικό να διατηρείς τη αναγνωσιμότητα στο μυαλό.
Πώς θα πρέπει να σχεδιάζω πίνακες από άποψη στυλ;Χρησιμοποίησε CSS για τη σχεδίαση, αντί να χρησιμοποιείς άμεσες HTML ιδιότητες, όπως η border.
Τι σημαίνει το colspan;Η ιδιότητα colspan επιτρέπει σε ένα κελί να εκτείνεται σε πολλές στήλες.
Γιατί το CSS είναι περισσότερο κατάλληλο για τη διάταξη από τις HTML ιδιότητες;Το CSS διαχωρίζει το περιεχόμενο από το στυλ του και προσφέρει έτσι περισσότερη ευελιξία και δυνατότητες για το σχεδιασμό.
