Πίνακας - ένα σύνολο δεδομένων που κατανέμονται σε σειρές και κελιά. Τα περισσότερα από τα κελιά περιέχουν δεδομένα πίνακα, τα υπόλοιπα περιέχουν κεφαλίδες για σειρές και στήλες που περιγράφουν το περιεχόμενο.
Για να δημιουργήσετε έναν πίνακα σε ένα έγγραφο HTML, χρησιμοποιήστε την ετικέτα
| , δημιουργεί κανονικά κελιά με δεδομένα. Από προεπιλογή, προσθέστε ετικέτα σε περιεχόμενο | ευθυγραμμισμένο προς τα αριστερά. Η δεύτερη ετικέτα για τη δημιουργία κελιών είναι η ετικέτα | , σας επιτρέπει να ορίσετε κελιά που περιέχουν κεφαλίδες για στήλες ή σειρές, εμφανίζεται το περιεχόμενο τέτοιων κελιών Έντονο Κείμενοκαι ευθυγραμμισμένο στο κέντρο. ετικέτες | και | μπορεί να περιλαμβάνει τυχόν στοιχεία HTML που είναι διαθέσιμα για χρήση στο σώμα του εγγράφου.
Τραπέζι μέσα σε τραπέζιΗ HTML έχει τη δυνατότητα να δημιουργεί ένθετους πίνακες, δηλαδή πίνακες που βρίσκονται μέσα σε άλλους πίνακες. Για να δημιουργήσετε έναν ένθετο πίνακα, πρέπει να τοποθετήσετε τον κωδικό του πίνακα που θέλετε να κάνετε ένθετο μέσα σε οποιαδήποτε ετικέτα | .
Για παράδειγμα, ας πάρουμε τον πίνακα που ήδη δημιουργήσαμε νωρίτερα και ας τοποθετήσουμε αυτόν τον κώδικα στο δεύτερο κελί της δεύτερης σειράς:
Τραπέζι με κορνίζες
ΑΠΟΤΕΛΕΣΜΑ: Τραπέζι χωρίς σύνοραΤραπέζι με κορνίζεςΧαρακτηριστικά ετικέτας Παράδειγμα
ΑΠΟΤΕΛΕΣΜΑ:
Σύμφωνα με το πρότυπο HTML5, όλα τα χαρακτηριστικά του πίνακα που χρησιμοποιήθηκαν προηγουμένως, όπως π.χ σύνορο, κελιά, γέμιση κυττάρωνκ.λπ. δεν υποστηρίζονται πλέον και ο επικυρωτής θεωρεί τη χρήση τους ως σφάλματα στον κώδικα. Για να σχεδιάσετε πίνακες, πρέπει να χρησιμοποιήσετε στυλ CSS, με τα οποία μπορείτε να αντικαταστήσετε όλα τα απαρχαιωμένα χαρακτηριστικά πίνακα. Για παράδειγμα, αντί για το χαρακτηριστικό κελιάΗ ιδιότητα χρησιμοποιείται για την αλλαγή της απόστασης μεταξύ των κελιών του πίνακα απόσταση συνόρων, και για να ευθυγραμμίσετε το περιεχόμενο σε κελιά πίνακα - ιδιότητες στοίχιση κειμένουκαι κατακόρυφη αλέρωση. Στυλ CSS για πίνακες html ετικέτες ομαδοποίησης σειρών πίνακαΟι ετικέτες μπορούν να χρησιμοποιηθούν για τη δημιουργία πιο περίπλοκων πινάκων: Παράδειγμα
ΑΠΟΤΕΛΕΣΜΑ: Ετικέτες ομαδοποίησης στηλών πίνακα htmlΧαρακτηριστικό ετικετών
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Ο ευκολότερος τρόπος για να κατανοήσετε πώς μπορεί να χρησιμοποιηθεί η ομαδοποίηση γραμμών και στηλών είναι με το παράδειγμα ενός πίνακα Sudoku.
Η ετικέτα col ορίζει παραμέτρους ξεχωριστά για κάθε στήλη. Δεν έχει σημασία πώς γράφεις πηγαίος κώδικας:
Παράδειγμα
| κίτρινος | το κόκκινο | ||
|---|---|---|---|
ΑΠΟΤΕΛΕΣΜΑ:
Μην προσπαθήσετε να ορίσετε το στυλ στοίχιση κειμένουγια ετικέτες
Οριζόντια ευθυγράμμισηκείμενο σε μια συγκεκριμένη στήλη πίνακα μπορεί να αλλάξει καθορίζοντας ένα στυλ στοίχιση κειμένουγια ψευδοτάξη td:nth-child(n), όπου n είναι ο αριθμός της στήλης. Ωστόσο, αυτή η μέθοδος δεν θα λειτουργήσει εάν υπάρχει ένα χαρακτηριστικό μεταξύ των κελιών του πίνακα colspan.
Παράδειγμα
| Ονομα | Τιμή, τρίψτε.) |
|---|---|
| Σολάριουμ ανά λεπτό πληρωμής (από 4 λεπτά) | 15 |
| 50 λεπτά σολάριουμ (14 τρίψιμο/λεπτό, 1 μήνας) | 700 |
| 100 λεπτά σολάριουμ (13 τρίψιμο/λεπτό, 2 μήνες) | 1300 |
| 200 λεπτά σολάριουμ (12 τρίψιμο/λεπτό, 3 μήνες) | 2400 |
ΑΠΟΤΕΛΕΣΜΑ:
Ωστόσο, αυτή η μέθοδος δεν θα λειτουργήσει εάν υπάρχει ένα χαρακτηριστικό μεταξύ των κελιών του πίνακα colspan.
Οι πίνακες σε HTML είναι τόσο λειτουργικοί που μπορείτε να τους χρησιμοποιήσετε για να στοιχειοθετήσετε ολόκληρους ιστότοπους (ανάγνωση). Τώρα θα μιλήσουμε για την εισαγωγή απλών πινάκων HTML σε μια ιστοσελίδα, αναλύοντας μόνο τη σήμανση, αλλά χωρίς να αγγίζετε το σχέδιο, γιατί είναι καλύτερο να διακοσμήσετε πίνακες με στυλ CSS.
Ετικέτες και χαρακτηριστικά πίνακα
Εδώ είναι τα κύρια στοιχεία που χρειάζονται για τη δημιουργία πινάκων:
- το δοχείο μέσα στο οποίο βρίσκεται το τραπέζι (ίδιο με
- σύνορο- ένα χαρακτηριστικό που καθορίζει το πάχος των πλαισίων. Αντίθετα, είναι καλύτερο να το χρησιμοποιήσετε περιουσία στα σύνορα CSS.
, εξωτερικά κελιά και σειρές.
- μια ετικέτα ζεύγους που περιέχει μια σειρά πίνακα (κελιά που βρίσκονται στο ίδιο επίπεδο οριζόντια). - μια ετικέτα που δημιουργεί ένα κελί κεφαλίδας πίνακα. Εξωτερικά, το περιεχόμενό του είναι διαφορετικό από το περιεχόμενο σε άλλα κελιά - συνήθως το κείμενο μέσα Το πρόγραμμα περιήγησης επισημαίνει έντονη γραφή και τοποθετεί στο κέντρο. - ένα δοχείο με το οποίο δημιουργείται ένα απλό κελί. Πόσες τέτοιες ετικέτες θα περιέχει η συμβολοσειρά (ετικέτα , τόσα κελιά θα υπάρχουν σε αυτό: μία ετικέτα - ένα κελί. .
χρησιμοποιείται για τον ίδιο σκοπό όπως , αλλά όχι το αντίστροφο. - σπιθαμή- ένα χαρακτηριστικό που καθορίζει τον αριθμό των στηλών στις οποίες εφαρμόζονται οι ιδιότητες του κοντέινερ
. - , και - δοχεία που σας επιτρέπουν να χωρίσετε το τραπέζι στα επάνω (κεφαλίδες), στο κύριο (σώμα) και στο κάτω (τελικό) μέρη, αντίστοιχα. Σε έναν πίνακα HTML, η ακολουθία αυτών των ετικετών είναι ίδια με την ακολουθία των κοντέινερ , και σε ένα έγγραφο HTML.
- colspanαπαιτείται για τη συγχώνευση κελιών στη σειρά. Η τιμή του χαρακτηριστικού περιέχει έναν αριθμό που καθορίζει τον αριθμό των κελιών που θα συγχωνευθούν.
- άνοιγμα σειράςσυνενώνει κελιά με στήλες.
Παράδειγμα δημιουργίας πίνακα
Δημιουργήστε ένα έγγραφο HTML και αντιγράψτε τον ακόλουθο κώδικα σε αυτό:
Παράδειγμα πίνακα Εργαλεία κατασκευής ιστοσελίδων Σκοπός Εργαλείο σήμανση HTML XHTML Ντεκόρ css Ανάπτυξη PHP Πύθων Στο πρόγραμμα περιήγησης, το έγγραφο θα μοιάζει με αυτό:
Ας καταλάβουμε ποιες γραμμές κώδικα είναι υπεύθυνες για τι.
- άνοιξε το τραπέζι, ρυθμίζοντας το πάχος των πλαισίων για αυτό.
- κλείστε το τραπέζι.- άνοιξε τη γραμμή. - κλείστε τη γραμμή. Οι υπόλοιπες γραμμές δημιουργήθηκαν με τον ίδιο τρόπο.Σκοπός - δημιούργησε ένα κελί με σχέδιο κεφαλίδας.Εργαλείο - δημιούργησε το δεύτερο κελί κεφαλίδας στη σειρά. Η παράμετρος colspan έδειξε ότι αυτό το κελί πρέπει να καταλαμβάνει δύο οριζόντια.σήμανση HTML XHTML
Απλός πηγαίος κώδικας πίνακα HTML
Κύτταρο 1
Κύτταρο 2
Κύτταρο 3
Κύτταρο 4
Κύτταρο 5
Κύτταρο 6
Κύτταρο 7
Κύτταρο 8
Κύτταρο 9
Επικεφαλίδες πίνακα HTML
Υπάρχουν 2 τύποι κελιών σε πίνακες HTML. Η ετικέτα ορίζει ένα κελί του κανονικού τύπου. Εάν ένα κελί λειτουργεί ως κεφαλίδα, προσδιορίζεται χρησιμοποιώντας την ετικέτα.
Ένα παράδειγμα πίνακα HTML με μια ου επικεφαλίδα
Volkswagen AG Daimler AG BMW Group Audi mercedes benz bmw Skoda Mercedes-AMG Μίνι Lamborghini Εξυπνος Ρολς ρόις Πηγαίος κώδικας πίνακα HTML με κεφαλίδες
Volkswagen AG
Daimler AG
BMW Group
Audi
mercedes benz
bmw
Skoda
Mercedes-AMG
Μίνι
Lamborghini
Εξυπνος
Ρολς ρόις
Συγχώνευση κελιών σε πίνακα HTML
Σε πίνακες HTML, είναι δυνατή η συγχώνευση κελιών οριζόντια και κάθετα.
Προς την συγχώνευση κελιών οριζόντιαχρησιμοποιήστε το χαρακτηριστικό colspan=" Χ" , στο κελί ή , όπου Χ
Προς την συγχώνευση κελιών κάθεταχρησιμοποιήστε το χαρακτηριστικό rowspan=" Χ" , στο κελί ή , όπου Χ- τον αριθμό των κελιών προς συγχώνευση.
Τα κελιά μπορούν να συγχωνευθούν οριζόντια και κάθετα ταυτόχρονα. Για να το κάνετε αυτό, χρησιμοποιήστε τα χαρακτηριστικά colspan και rowspan για το επιθυμητό κελί:
Κείμενο κελιού Λάβετε υπόψη ότι όταν τα κελιά συγχωνεύονται, ο αριθμός των στοιχείων σε μια σειρά αλλάζει. Για παράδειγμα, αν υπάρχουν 3 στήλες με κελιά στον πίνακα και συνδυάσουμε το πρώτο και το δεύτερο κελί, τότε όλα μέσα στην ετικέτα που ορίζουν δεδομένη γραμμήθα υπάρχουν 2 στοιχεία, το πρώτο θα περιέχει το χαρακτηριστικό colspan="2" .
Ένα παράδειγμα πίνακα HTML με συγχώνευση κελιών
Πηγαίος κώδικας πίνακα HTML με συγχωνευμένα κελιά
Nissan
Μοντέλο
Εξοπλισμός
Διαθεσιμότητα
Nissan Qashqai
VISIA
+
ΤΕΚΝΑ
+
Nissan X-Trail
ACENTA
+
ΣΥΝΔΕΣΗ
-
Κεφαλίδες και υποσέλιδα σε πίνακες HTML
Οι πίνακες HTML μπορούν να χωριστούν σε 3 περιοχές: κεφαλίδα, σώμα, υποσέλιδο.
Αυτό γίνεται τυλίγοντας τις σειρές του επιλεγμένου τμήματος του πίνακα με ετικέτες. ορίζει την περιοχή της κεφαλίδας, - την περιοχή του υποσέλιδου, - το σώμα του πίνακα.
Από προεπιλογή, οι κεφαλίδες και τα υποσέλιδα δεν έχουν στυλ (αυτό μπορεί να γίνει μέσω CSS εάν χρειάζεται), αλλά μπορούν να χρησιμοποιηθούν από προγράμματα περιήγησης. Για παράδειγμα, κατά την εκτύπωση ενός πίνακα πολλών σελίδων, οι κεφαλίδες και τα υποσέλιδα ενδέχεται να αντιγράφονται σε κάθε εκτυπωμένη σελίδα.
Η σωστή σειρά για τις ετικέτες περιοχής στον κώδικα HTML ενός πίνακα είναι η εξής: πρώτα η κεφαλίδα, μετά το υποσέλιδο και μετά το σώμα. Σε αυτήν την περίπτωση, το κύριο μέρος της σελίδας θα εμφανίζεται μεταξύ των κεφαλίδων και των υποσέλιδων.
Προαιρετικά, μπορείτε να προσθέσετε μια λεζάντα στον πίνακα. Για να το κάνετε αυτό, χρησιμοποιήστε την ετικέτα.
Ένα παράδειγμα πίνακα HTML με κεφαλίδες και υποσέλιδα και λεζάντα
Πηγαίος κώδικας πίνακα με κεφαλίδες και υποσέλιδα και λεζάντα
Ολοκληρωμένο σετ Renault Sandero Stepway
Χαρακτηριστικό γνώρισμα
SUTA 09H 6R
SUTA 09HR6R
SUTA 15H 5R
Διαθεσιμότητα
+
+
+
Ισχύς κινητήρα
0,9 (90 HP)
0,9 (90 HP)
1,5 (90 HP)
Καύσιμα
βενζίνη
βενζίνη
ντίζελ
Ποσοστό τοξικότητας
Ευρώ 6
Ευρώ 6
Ευρώ 5
Στήλες και Ομάδες στηλών
Ένας πίνακας HTML μπορεί να χωριστεί σε στήλες και ομάδες στηλών χρησιμοποιώντας τις ετικέτες και.
Αυτός ο διαχωρισμός σάς επιτρέπει να ορίσετε στυλ για τον πίνακα χρησιμοποιώντας τον ελάχιστο αριθμό των Ιδιότητες CSS, μειώνοντας έτσι την ποσότητα του κώδικα πίνακα (αντί να ορίζετε στυλ για κάθε κελί στήλης, μπορείτε να ορίσετε στυλ για μία ή περισσότερες στήλες ταυτόχρονα).
Ετικέτες και τοποθετούνται μέσα στην ετικέτα πριν από τις ετικέτες, AKP6 (EDC)
Μετάδοση Πηγαίος κώδικας πίνακα HTML c
και
ZEN 2E2C AL A
ZEN 2E2C J5 A
ΕΝΤΟΝΟΣ 2E3C AL A
Χαρακτηριστικό γνώρισμα
1,5 (90 HP)
1.2 (115 HP)
1,5 (90 HP)
Ισχύς κινητήρα
ντίζελ
βενζίνη
ντίζελ
Καύσιμα
AKP6 (EDC)
AKP6 (EDC)
AKP6 (EDC)
Μετάδοση
Πίνακες στη διάταξη σελίδας ιστότοπου
Στους σύγχρονους ιστότοπους, η σωστή εμφάνιση των σελίδων είναι σημαντική τόσο σε υπολογιστές όσο και σε υπολογιστές κινητές συσκευές. Δεν συνιστάται η χρήση πινάκων για τη δημιουργία πλαισίου σελίδας HTML, καθώς χάνεται η δυνατότητα προσαρμογής περιεχομένου σε οθόνες διαφορετικών μεγεθών (υπολογιστές, smartphone, tablet).
Οι ετικέτες ομάδων πινάκων χρησιμοποιούνται καλύτερα σε μια σελίδα για την εμφάνιση περιεχομένου σε μορφή πίνακα.
Γεια σας αγαπητοί αναγνώστες του ιστολογίου! Συχνά σε ιστοσελίδες, εκτός από κείμενο και εικόνες, καθίσταται απαραίτητη η εμφάνιση διαφόρων δεδομένων με τη μορφή πινάκων. Ναι, αυτό είναι κατανοητό, ένας πίνακας είναι ο πιο βολικός τρόπος για να παρουσιάσετε μεγάλο όγκο πληροφοριών. Επομένως τίθεται το ερώτημα Πώς να ενσωματώσετε πίνακες σε html;. Σε αυτό το άρθρο, θα απαντήσω σε αυτήν την ερώτηση και θα σας δώσω πολλά παραδείγματα διάφορων πινάκων html.
Πώς να δημιουργήσετε έναν πίνακα χρησιμοποιώντας HTML
Οι πίνακες HTML δημιουργούνται σε τέσσερα βήματα.
1. Στο πρώτο βήμα στον κώδικα html χρησιμοποιώντας το ζευγαρωμένο ετικέτα
πείτε στο πρόγραμμα περιήγησης ότι ένας πίνακας έχει εισαχθεί στην ιστοσελίδα:
. Το στοιχείο πίνακα είναι ένα στοιχείο μπλοκ μιας ιστοσελίδας. Επομένως, ο πίνακας βγαίνει πάντα με νέα γραμμήμε κάθετη εσοχή από γειτονικά στοιχεία, οπότε δεν χρειάζεται να το βάλετε σε μια παράγραφο.
2. Στο δεύτερο βήμα σχηματίζουμε γραμμέςπίνακες τοποθετώντας ζευγαρωμένες ετικέτες
μέσα . Κάθε στοιχείο
δημιουργεί μια ξεχωριστή γραμμή:
3. Στη συνέχεια, στο τρίτο βήμα, σχηματίζουμε κύτταραπίνακες με ζευγαρωμένες ετικέτες
και , τα οποία τοποθετούνται μέσα στο στοιχείο . Ετικέτα δημιουργεί συνήθηςκύτταρο, και κύτταρο επί κεφαλής, δηλ. κεφαλίδα της αντίστοιχης στήλης:
4. Λοιπόν, στο τελευταίο βήμα το βάζουμε μέσα στα στοιχεία
και περιεχόμενο κυττάρων. Ο κώδικας HTML για την εισαγωγή πίνακα σε μια ιστοσελίδα μοιάζει κάπως έτσι:
Στήλη 1 Στήλη 2 Στήλη 3
Κελί 1-1 Κελί 1-2 Κελί 1-3
Κύτταρο 2-1 Κύτταρο 2-2 Κελί 2-3
Θα σας βοηθήσει να ρυθμίσετε με ακρίβεια την εμφάνιση των περιγραμμάτων. Με το , μπορείτε να αλλάξετε το πάχος και το χρώμα των πλαισίων, καθώς και να αλλάξετε τον τύπο των περιγραμμάτων.
Το κείμενο που πρέπει να τοποθετηθεί μέσα στα κελιά είναι προαιρετικό, αλλά αν το κείμενο είναι μεγάλο, μπορεί να χωριστεί σε παραγράφους εφαρμόζοντας την ετικέτα
Εάν χρειάζεται να διαμορφώσετε με κάποιο τρόπο το στυλ του εισαγόμενου κειμένου, μπορείτε να χρησιμοποιήσετε το .
Εκτός από κείμενο, μπορούμε να βάλουμε εικόνες σε κελιά χρησιμοποιώντας την ετικέτα
:
Τα περιεχόμενα ενός κελιού μπορεί να είναι ακόμη και ένας άλλος πίνακας. Σε αυτήν την περίπτωση, η δημιουργία ενός ένθετου πίνακα δεν διαφέρει από τη δημιουργία ενός κανονικού πίνακα. Ακριβώς ανάμεσα σε ετικέτες
και εισάγονται ετικέτεςκαι
, και σειρές και κελιά εισάγονται σε αυτό.Υπάρχουν ορισμένοι κανόνες που πρέπει να λάβετε υπόψη κατά τη δημιουργία πινάκων:
- μόνο η ετικέτα χρησιμοποιείται για τη δημιουργία του πίνακα
;
- ετικέτα
μπορεί να βρίσκεται μόνο μέσα σε μια ετικέτα ;
- ετικέτες
και μπορεί να βρίσκεται μόνο μέσα σε μια ετικέτα , οποιοδήποτε άλλο περιεχόμενο ετικέτας αγνοήθηκε από το πρόγραμμα περιήγησης. - Το περιεχόμενο του πίνακα (κείμενο ή εικόνες) μπορεί να είναι μόνο σε ετικέτες
και ; - Τα κελιά του πίνακα πρέπει να έχουν τουλάχιστον κάποιο περιεχόμενο, διαφορετικά το πρόγραμμα περιήγησης μπορεί να μην τα εμφανίζει καθόλου, εάν κάποιο κελί πρέπει να είναι κενό, τότε συνήθως τοποθετείται ένα κενό διάστημα χωρίς διακοπή (HTML literal).
- ο πίνακας αναφέρεται στα μπλοκ στοιχεία της ιστοσελίδας.
- τα μεγέθη του πίνακα και των κελιών του εξαρτώνται από το περιεχόμενο, π.χ. το τραπέζι είναι τεντωμένο σε πλάτος και ύψος έτσι ώστε όλα να ταιριάζουν.
- γίνεται μια μικρή εσοχή μεταξύ των ορίων των μεμονωμένων κελιών και μεταξύ του περιγράμματος κάθε κελιού και των περιεχομένων του.
- Το κείμενο των κελιών της κεφαλίδας (το στοιχείο ου) εμφανίζεται με έντονη γραφή και στο κέντρο.
- τα περιγράμματα γύρω από τον πίνακα και τα κελιά του δεν σχεδιάζονται από προεπιλογή.
Κεφαλίδα πίνακα
Ας ξεκινήσουμε με ζευγαρωμένη ετικέτα
, που δίνει στον πίνακα έναν τίτλο. Το κείμενο τίτλου τοποθετείται μέσα σε αυτήν την ετικέτα, η οποία πρέπει να βρίσκεται μέσα στην ετικέτα. Και δεν έχει σημασία πού στον κώδικα html του πίνακα για να τοποθετήσετε την ετικέτα
, το πρόγραμμα περιήγησης θα εξακολουθεί να εμφανίζει τον τίτλο πάνω από τον πίνακα και να τον κεντράρει. Αλλά συνήθως η ετικέτα τοποθετείται αμέσως μετά την ετικέτα ανοίγματος :
Αυτό είναι ένα τραπέζι
Κελί 1.1 Κελί 1.2
Κελί 2.1 Κελί 2.2
Απεικόνιση:
Ενότητες πίνακα
Ο πίνακας html μπορεί λογικά να χωριστεί σε μέρη - ενότητες. Υπάρχουν τρεις τύποι τμημάτων:
- ενότητα κεφαλίδας, στο οποίο τοποθετούνται τα κελιά κεφαλίδας, τα οποία αποτελούν την κεφαλίδα του πίνακα.
- τμήμα σώματος, στα οποία βρίσκονται κελιά με βασικά δεδομένα.
- ενότητα ολοκλήρωσης, στα οποία τοποθετούνται κελιά με συνολικά δεδομένα.
Το τμήμα κεφαλίδας πίνακα σχηματίζεται χρησιμοποιώντας μια ετικέτα ζεύγους . Επιπλέον, επιτρέπεται η χρήση όχι περισσότερων από ένα στοιχείο μέσα στο ίδιο τραπέζι, και πρέπει να πάει στο κώδικας htmlαμέσως μετά την ετικέτα
.
Το τμήμα σώματος δημιουργείται με μια ετικέτα ζεύγους
. Ενας πίνακα htmlμπορεί να περιέχει πολλά τμήματα σώματος, επιτρέποντάς σας να δημιουργήσετε δομικά στοιχείαστα οποία μπορούν να εφαρμοστούν ομοιόμορφα στυλ.Το τμήμα ολοκλήρωσης σχηματίζεται από μια ετικέτα ζεύγους
και μέσα στο ίδιο δοχείομπορεί να υπάρχει μόνο ένα.
Όλες αυτές οι ζευγαρωμένες ετικέτες πρέπει να περιέχουν ετικέτες
, οι οποίες σχηματίζουν γραμμές που σχετίζονται με τις αντίστοιχες ενότητες:
Στήλη 1 Στήλη 2 Στήλη 3
Κελί 1.1 Κελί 1.2 Κύτταρο 1.3
Κελί 2.1 Κελί 2.2 Κελί 2.3
Αποτέλεσμα 1 Αποτέλεσμα 2 Αποτέλεσμα 3
Συγχώνευση κελιών πίνακα
Απομένει να μιλήσουμε για το πιο σημαντικό χαρακτηριστικό των πινάκων - συγχώνευση κυττάρων.Τα χαρακτηριστικά χρησιμοποιούνται για να συνδυάσουν πολλά κελιά σε ένα. colspanκαι άνοιγμα σειράςετικέτες
και . Το χαρακτηριστικό colspan ορίζει τον αριθμό των κελιών που συνδυάζονται οριζόντια και το άνοιγμα σειρών - κατακόρυφα:
1.1 1.2-1.3
2.1 2.2 2.3
3.1-4.1 3.2 3.3
4.2 4.3
Παράδειγμα αποτελέσματος:
1.1 1.2-1.3 2.1 2.2 2.3 3.1-4.1 3.2 3.3 4.2 4.3 Κατά τη συγχώνευση κελιών, είναι σημαντικό να ελέγχετε τον αριθμό των κελιών σε κάθε σειρά, ώστε να μην υπάρχουν σφάλματα. Ναι, το σχέδιο
αντικαθιστά δύο κελιά, επομένως η επόμενη γραμμή πρέπει να έχει δύο ετικέτες , ή το ίδιο σχέδιο! Εάν ο αριθμός των κελιών σε όλες τις σειρές δεν ταιριάζει, τότε θα εμφανιστούν κενά επιπλέον κελιά. Ένα παράδειγμα λανθασμένου κώδικα html κατά τη συγχώνευση κελιών:
κελί 1.1 κελί 1.2
κελί 2.1 κελί 2.2
Και το αποτέλεσμα που εμφανίζεται στο πρόγραμμα περιήγησης:
Εκείνοι. Αν αναλύσετε τον κώδικα html, θα παρατηρήσετε ότι η πρώτη γραμμή έχει τρία κελιά, δύο από τα οποία συγχωνεύονται χρησιμοποιώντας το χαρακτηριστικό colspan και στη δεύτερη γραμμή έχουν προστεθεί μόνο δύο κελιά. Επομένως, ένα τρίτο κενό κελί εμφανίζεται στη δεύτερη σειρά.
Χαρακτηριστικά ετικέτας
Σε αυτήν την ανάρτηση, έχουμε ήδη συναντήσει ένα χαρακτηριστικό ετικέτας
. Με το χαρακτηριστικό border, το οποίο ορίζει το πλάτος του περιγράμματος σε pixel. Από προεπιλογή είναι 0 και επομένως τα κελιά εμφανίζονται χωρίς περίγραμμα από προεπιλογή.
Εκτός από το χαρακτηριστικό border, υπάρχουν πολλά άλλα σημαντικά χαρακτηριστικά που υποστηρίζονται από την ετικέτα.
. Ας τους ρίξουμε μια ματιά.
Χαρακτηριστικό ευθυγραμμίζω- σκηνικά ευθυγραμμίαπίνακες στη σελίδα. Μπορεί να πάρει τις τιμές αριστερά, κέντρο, δεξιά, που ορίζουν τη στοίχιση αριστερά, κέντρο και δεξιά, αντίστοιχα. Η προεπιλογή παραμένει.
Χαρακτηριστικό Ιστορικό, που το ορίζει την εικόνα φόντουστο τραπέζι. Λαμβάνει τη διεύθυνση του αρχείου εικόνας ως τιμή.
bgcolor- εγκαθιστά χρώμα του φόντουτραπέζια. Μπορεί να χρησιμοποιηθεί σε συνδυασμό με το χαρακτηριστικό φόντου.
Χαρακτηριστικό χρώμα πλαισίουσκηνικά χρώμα πλαισίουτραπέζια.
γέμιση κυττάρων- καθορίζει απόσταση μεταξύ του περιγράμματος κελιού και του περιεχομένου του. Σας επιτρέπει να βελτιώσετε την αναγνωσιμότητα του πίνακα. Η τιμή μπορεί να είναι οποιοσδήποτε θετικός αριθμός.
Διάστημα κελιών- σκηνικά απόσταση μεταξύ των εξωτερικών ορίων κελιών.
Πάνω σε αυτό να μιλήσουμε πώς να εισάγετε τον πίνακα σε σελίδα html Τελειώνω, απλώς συνοψίζω:
- Οι ετικέτες χρησιμοποιούνται για την εισαγωγή πίνακα
- χαρακτηρισμός πίνακα,
- προσθέτοντας μια γραμμή και - Εισαγάγετε ένα κελί. - ο πίνακας είναι ένα μπλοκ στοιχείο μιας ιστοσελίδας.
- τα περιεχόμενα των κελιών μπορεί να είναι όχι μόνο κείμενο, αλλά και εικόνες και άλλοι πίνακες.
- ένας πίνακας μπορεί να περιέχει τρία είδη ενοτήτων: ενότητα κεφαλίδας — , ενότητα ολοκλήρωσης και τμήμα σώματος ;
- χρησιμοποιήστε χαρακτηριστικά ετικέτας για τη συγχώνευση κελιών
colspan και rowspan. Αυτό είναι όλο, στην επόμενη ανάρτηση θα μιλήσω για τα εργαλεία πλοήγησης στον ιστότοπο html. Εγγραφείτε στις ενημερώσεις του ιστολογίου μου για να μην χάσετε αυτήν την ανάρτηση! Όλα, τα λέμε σύντομα!
- ετικέτα