Για να συγχωνεύσετε δύο ή περισσότερα κελιά σε ένα, χρησιμοποιήστε τα χαρακτηριστικά colspan και rowspan της ετικέτας
Παράδειγμα 12.3. Λανθασμένη συγχώνευση κελιών
| Κύτταρο 1 | Κύτταρο 2 | |
| Κύτταρο 3 | Κύτταρο 4 | |
Αποτέλεσμα αυτό το παράδειγμαφαίνεται στο σχ. 12.5.
Ρύζι. 12.5. Η εμφάνιση ενός επιπλέον κελιού στον πίνακα
Η πρώτη γραμμή του παραδείγματος έχει τρία κελιά, δύο από αυτά συγχωνεύονται με το χαρακτηριστικό colspan και στη δεύτερη γραμμή έχουν προστεθεί μόνο δύο κελιά. Αυτό προκαλεί την εμφάνιση ενός επιπλέον κελιού στο πρόγραμμα περιήγησης. Φαίνεται ξεκάθαρα στο Σχ. 12.5.
Η σωστή χρήση των χαρακτηριστικών colspan και rowspan φαίνεται στο Παράδειγμα 12-4.
Παράδειγμα 12.4. Συγχώνευση κελιών κάθετα και οριζόντια
| Πρόγραμμα περιήγησης | Internet Explorer | ΛΥΡΙΚΗ ΣΚΗΝΗ | Firefox | ||||
|---|---|---|---|---|---|---|---|
| 6.0 | 7.0 | 7.0 | 8.0 | 9.0 | 1.0 | 2.0 | |
| Υποστηρίζεται | Οχι | Ναί | Οχι | Ναί | Ναί | Ναί | Ναί |
Το αποτέλεσμα αυτού του παραδείγματος φαίνεται στο Σχ. 12.6.
Ρύζι. 12.6. Πίνακας με συγχωνευμένα κελιά
Αυτός ο πίνακας έχει οκτώ στήλες και τρεις σειρές. Μέρος των κελιών με τις επιγραφές "Internet Explorer", "Opera" και "Firefox" συγχωνεύονται, όπου υπάρχουν δύο και όπου υπάρχουν τρία κελιά. Το κελί με την ένδειξη "Πρόγραμμα περιήγησης" έχει εφαρμοστεί μια κατακόρυφη συγχώνευση.
τραπέζιαΤο καλύτερο παράδειγμα είναι ο απλός πίνακας που εμφανίζεται στη Λίστα 5-10 σε HTML.
Αυτός είναι ένας κανονικός πίνακας, τα κελιά του οποίου είναι αριθμημένα - έτσι θα είναι πιο εύκολο για εμάς στο μέλλον. Στο σχ. Το 5.2 δείχνει την εμφάνισή του σε ένα παράθυρο του προγράμματος περιήγησης στο Web.
Τώρα εξετάστε τον πίνακα στο Σχ. 5.3.
Εδώ συγχωνεύονται ορισμένα κελιά. Μπορεί να φανεί ότι τα συγχωνευμένα κελιά φαίνεται να έχουν συγχωνευθεί σε ένα. Πως να το κάνεις?
Ειδικά για αυτό το tags και
Για να συγχωνεύσετε πολλά κελιά οριζόντια σε ένα, ακολουθήστε αυτά τα βήματα.
1. Βρείτε στον κωδικό Ετικέτα HTML (
2. Εισαγάγετε το χαρακτηριστικό COLSPAN σε αυτό και αντιστοιχίστε του τον αριθμό των κελιών που θα συνδυαστούν, μετρώντας και το πρώτο.
3. Αφαιρέστε ετικέτες (
Ας συγχωνεύσουμε τα κελιά 2 και 3 του πίνακα (βλ. Λίστα 5.10). Το διορθωμένο απόσπασμα κώδικα που δημιουργεί την πρώτη σειρά αυτού του πίνακα εμφανίζεται στη Λίστα 5-11.
Με τον ίδιο τρόπο, θα δημιουργήσουμε τα συνδυασμένα κελιά 4 + 5 και 12 + 13 + 14 + 15.
Η κάθετη συγχώνευση κελιών είναι λίγο πιο δύσκολη. Εδώ είναι τα βήματα που πρέπει να ακολουθήσετε για αυτό.
1. Βρείτε στον κωδικό Συμβολοσειρά HTML(ετικέτα ), που περιέχει το πρώτο από τα συγχωνευμένα κελιά (αν μετρήσετε τις σειρές από πάνω προς τα κάτω).
2. Βρείτε την ετικέτα (
3. Εισαγάγετε το χαρακτηριστικό ROWSPAN σε αυτό και εκχωρήστε του μια ποσότητα συγχωνευμένα κελιά, συμπεριλαμβανομένου του πρώτου από αυτούς.
4. Δείτε τις επόμενες γραμμές και αφαιρέστε ετικέτες από αυτές (
Έχουμε φύγει συγχώνευση κελιών 1 και 6 του πίνακα μας. Η καταχώριση 5-12 περιέχει το διορθωμένο απόσπασμα του κώδικα HTML της (οι διορθώσεις επηρεάζουν την πρώτη και τη δεύτερη γραμμή).
Σημειώστε ότι αφαιρέσαμε την ετικέτα από τη δεύτερη σειρά, η οποία δημιουργεί το έκτο κελί, αφού συγχωνεύεται με το πρώτο κελί.
Τώρα δεν χρησιμοποιείται πολύ συχνά. Ωστόσο, νωρίτερα, κατά τη διάρκεια της ακμής του σχεδιασμού Ιστού με πίνακα, ήταν δύσκολο να συναντήσετε ένα τραπέζι χωρίς συγχωνευμένα κελιά. Είτε έτσι είτε αλλιώς, δεν βλάπτει να το γνωρίζεις.
Θα σας πω λεπτομερώς και λεπτομερώς για το πώς να συγχωνεύσετε κελιά κάθετα και οριζόντια σε πίνακες.
Σε αυτό το άρθρο, δεν θα εξηγήσουμε τις αρχές δημιουργία htmlπίνακες, για αυτή τη γνώση, παρακολουθήστε το μάθημά μας για την HTML.
Για τη συγχώνευση κελιών μέσα σε έναν πίνακα, υπάρχουν δύο χαρακτηριστικά που ορίζονται στην ετικέτα
Μερικοί άνθρωποι δυσκολεύονται να χρησιμοποιήσουν αυτά τα χαρακτηριστικά, τη συγχώνευση κελιών.
Τα χαρακτηριστικά colspan και rowspan λαμβάνουν ακέραιες τιμές από 0 έως 1000 ως παραμέτρους. Ακολουθεί ένα μικρό παράδειγμα για το πώς μπορείτε να συγχωνεύσετε κελιά σε έναν πίνακα.
Με την πρώτη ματιά, εφαρμόζεται μια όχι πολύ περίπλοκη δομή, κοιτάζοντας όμως την αφθονία
Σας προσφέρουμε έναν καθολικό και πολύ βολικό τρόπο συγχώνευσης κελιών.
Για να ξεκινήσετε, ετοιμάστε ένα κενό για τον μελλοντικό σας πίνακα, παρουσιάζοντάς τον με όλα τα διαχωρισμένα κελιά. Θα μπορούσε να είναι ένα τραπέζι 3x3, 6x10και ούτω καθεξής. Θα δώσουμε σε κάθε κελί τον δικό του αριθμό, αρχίζοντας να μετράει από αριστερά προς τα δεξιά και από πάνω προς τα κάτω.
Ας αναλύσουμε τη δημιουργία του πίνακα που φαίνεται παραπάνω χρησιμοποιώντας αυτήν τη μέθοδο.
Δείτε πώς θα μοιάζει ο κωδικός του τεμαχίου εργασίας μας και του ίδιου του τεμαχίου εργασίας:
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
Είναι απαραίτητο να συγχωνεύσετε τα κελιά με τους αριθμούς 1,2,3 οριζόντια. Για να το κάνετε αυτό, προσθέστε στον κωδικό, αριθμό κελιού 1 col span χαρακτηριστικόμε τιμή 3. Και διαγραφή
| 1,2,3 | 4 | ||
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 1,2,3 | 4 | ||
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
Τώρα πρέπει να συγχωνεύσουμε κάθετα τα κελιά 9 και 13. Εκτελούμε μια παρόμοια διαδικασία - για το κελί Νο. 9 ορίζουμε το χαρακτηριστικό rowspan με τιμή 2 , διαγράφουμε το κελί με το Νο. 13, γράφουμε τους αριθμούς των κελιών από τα οποία αποτελείται στο συγχωνευμένο κελί.
Αυτό θα αλλάξει τον κωδικό μας και εμφάνισηπίνακες:
| 1,2,3 | 4 | ||
| 5 | 6 | 7 | 8 |
| 9,13 | 10 | 11 | 12 |
| 14 | 15 | 16 | |
| 1,2,3 | 4 | ||
| 5 | 6 | 7 | 8 |
| 9,13 | 10 | 11 | 12 |
| 14 | 15 | 16 | |
Απομένει να συγχωνευτούν 11,12,15,16 κελιά σε ένα. Για να γίνει αυτό, στο κελί με τον αριθμό 11, γράφουμε τα χαρακτηριστικά colspan ="2" rowspan ="2" . Τα κελιά 12,15,16 αφαιρούνται από τον κώδικα. Γράφουμε στο συνδυασμένο κελί τους αριθμούς 11,12,13,14.
Έτσι θα αλλάξει ο κωδικός μας και η εμφάνιση του πίνακα:
| 1,2,3 | 4 | ||
| 5 | 6 | 7 | 8 |
| 9,13 | 10 | 11,12,15,16 | |
| 14 | |||
| 1,2,3 | 4 | ||
| 5 | 6 | 7 | 8 |
| 9,13 | 10 | 11,12,15,16 | |
| 14 | |||
Αυτό είναι όλο, έχουμε τον αρχικό πίνακα, τώρα τα κελιά μπορούν να γεμίσουν με τις πληροφορίες που θα σας βολέψουν.
Ελπίζουμε να κατανοείτε την αρχή της δημιουργίας πολύπλοκων πινάκων με συγχώνευση κελιών.
Μένει να μιλήσουμε για ένα ενδιαφέρον χαρακτηριστικό Γλώσσα HTML. Αυτό το λεγόμενο συγχώνευση κελιώντραπέζια. Το καλύτερο παράδειγμα είναι ο απλός πίνακας του οποίου το HTML εμφανίζεται στη Λίστα 5-10.
Καταχώρηση 5.10
Αυτός είναι ένας κανονικός πίνακας, τα κελιά του οποίου είναι αριθμημένα - έτσι θα είναι πιο εύκολο για εμάς στο μέλλον. Στο σχ. Το 5.2 δείχνει την εμφάνισή του σε ένα παράθυρο του προγράμματος περιήγησης στο Web.
Τώρα εξετάστε τον πίνακα στο Σχ. 5.3.
Εδώ συγχωνεύονται ορισμένα κελιά. Μπορεί να φανεί ότι τα συγχωνευμένα κελιά φαίνεται να έχουν συγχωνευθεί σε ένα. Πως να το κάνεις?
Ειδικά για αυτό το tags και
Ρύζι. 5.2.Ο αρχικός πίνακας του οποίου τα κελιά θα συγχωνευθούν
Ρύζι. 5.3.Ο πίνακας που φαίνεται στο σχ. 5.2, μετά τη συγχώνευση ορισμένων κελιών (τα συγχωνευμένα κελιά επισημαίνονται προσθέτοντας τους αριθμούς τους)
Για να συγχωνεύσετε πολλά κελιά οριζόντια σε ένα, ακολουθήστε αυτά τα βήματα.
1. Βρείτε την ετικέτα στον κώδικα HTML
Με τον ίδιο τρόπο, θα δημιουργήσουμε τα συνδυασμένα κελιά 4 + 5 και 12 + 13 + 14 + 15.
Η κάθετη συγχώνευση κελιών είναι λίγο πιο δύσκολη. Εδώ είναι τα βήματα που πρέπει να ακολουθήσετε για αυτό.
1. Βρείτε τη γραμμή (ετικέτα) στον κώδικα HTML, η οποία περιέχει το πρώτο από τα κελιά που πρόκειται να συγχωνευθούν (αν μετρήσετε τις γραμμές από πάνω προς τα κάτω).
2. Βρείτε την ετικέτα στον κώδικα αυτής της γραμμής
Σημειώστε ότι αφαιρέσαμε την ετικέτα από τη δεύτερη σειρά, η οποία δημιουργεί το έκτο κελί, αφού συγχωνεύεται με το πρώτο κελί.
Η συγχώνευση κυττάρων δεν χρησιμοποιείται πολύ συχνά αυτές τις μέρες. Ωστόσο, νωρίτερα, κατά τη διάρκεια της ακμής της σχεδίασης Ιστού με πίνακα (για σχεδίαση Ιστού σε πίνακα, βλ κεφάλαιο 10), ήταν δύσκολο να βρεθεί ένας πίνακας χωρίς συγχωνευμένα κελιά. Είτε έτσι είτε αλλιώς, δεν βλάπτει να το γνωρίζεις.
Ένα πολύ εύχρηστο αντικείμενο. Μπορείτε να κάνετε τα πάντα με αυτά. Φυσικά, ο κύριος σκοπός είναι η τοποθέτηση πληροφοριών σε μορφή πίνακα. Αλλά οι προγραμματιστές ιστοτόπων έχουν προχωρήσει περισσότερο. Κάποτε ήταν πολύ δημοφιλής η χρήση πινάκων για τη δημιουργία πλαισίου ιστότοπου. Τώρα οι επαγγελματίες προσπαθούν να μην το κάνουν αυτό.
Οι πίνακες έχουν βρει ευρεία χρήση λόγω του μεγάλου αριθμού χαρακτηριστικών. Για παράδειγμα, η ιδιότητα της ένωσης σειρών ή στηλών αποδείχθηκε πολύ χρήσιμη.
Εισαγωγή στη θεωρία
Στην HTML, τα κελιά συγχωνεύονται χρησιμοποιώντας δύο χαρακτηριστικά: colspan και rowspan. Καθορίζονται για την ετικέτα td.
Ας αναλύσουμε πρώτα τη δομή οποιουδήποτε πίνακα πριν εμβαθύνουμε στο θέμα. Κάθε πίνακας έχει μια σειρά με κελιά. Να θυμάστε ότι αρχικά όλοι οι πίνακες πρέπει να περιέχουν τον ίδιο αριθμό κελιών.
Το παραπάνω σχήμα δείχνει δύο σειρές, η καθεμία με τρία κελιά. Αυτό είναι ένα κανονικό τραπέζι. Εάν καθορίσετε μικρότερο αριθμό κελιών σε οποιαδήποτε σειρά, τότε ο πίνακας θα "απομακρυνθεί", όλα θα εμφανίζονται λανθασμένα.
Πίνακας HTML: Συγχώνευση κελιών κάθετα και οριζόντια
Μπορείτε να καθορίσετε λιγότερα κελιά ή σειρές μόνο εάν συνενώνετε κάτι. Αλλά αντί για το αφαιρεμένο στοιχείο, πρέπει να καθοριστεί ένα πρόσθετο χαρακτηριστικό στον πλησιέστερο γείτονα στην αρχή. Αν συνδυάσετε στήλες, τότε colspan, εάν σειρές, τότε rowspan. Η τιμή του χαρακτηριστικού καθορίζει τον αριθμό των στοιχείων που θα συνδυαστούν.
Λάβετε υπόψη ότι πρέπει να το καθορίσετε στο πλησιέστερο στοιχείο στην αρχή. Για παράδειγμα, στο παραπάνω σχήμα, εάν θέλετε να συγχωνεύσετε το κελί 1 και 2, θα ρυθμίσετε το κελί 1 ώστε το χαρακτηριστικό colspan να οριστεί σε δύο. Και διαγράψτε το κελί 2 ή 3, δεν πειράζει πια.
Η ουσία είναι ότι λέτε στο κελί πόσο χώρο θα καταλάβει. Η προεπιλεγμένη τιμή είναι 1.
Η κάθετη συγχώνευση κελιών σε έναν πίνακα HTML ακολουθεί την ίδια αρχή. Ο απλά κατειλημμένος χώρος θα θεωρείται κατακόρυφα. Δείτε την παρακάτω εικόνα.
Εδώ το κελί με τον αριθμό 43 καταλαμβάνει δύο γραμμές. Για αυτό, καθορίστηκε το χαρακτηριστικό rowspan. Είναι εύκολο να θυμάστε:
- Σειρά - μια χορδή.
- Στήλη - στήλη/στήλη.
- Span - ένωση.
Οι δημιουργοί της γλώσσας προσπάθησαν να τη φέρουν όσο το δυνατόν πιο κοντά στον άνθρωπο, ώστε ακόμη και χωρίς να τη γνωρίζει κανείς, τουλάχιστον με κάποιο τρόπο να την καταλάβει.
Στην HTML, τα κελιά μπορούν να συγχωνευθούν σε δύο κατευθύνσεις ταυτόχρονα: κάθετα και οριζόντια. Για να το κάνετε αυτό, καθορίστε και τα δύο χαρακτηριστικά ταυτόχρονα.
Στο παραπάνω σχήμα, αυτό ακριβώς υποδηλώνει ότι μπορείτε να κάνετε μια ένωση: σειρές, στήλες και ταυτόχρονα στήλες και σειρές.
HTML: συγχώνευση κελιών. Παραδείγματα
Ας δούμε πιο περίπλοκα παραδείγματα βήμα προς βήμα σε μεγάλους πίνακες. Το παρακάτω σχήμα στα αριστερά δείχνει την αρχική έκδοση ενός κανονικού πίνακα. Και στα δεξιά - μια παραλλαγή με την ένωση δύο κελιών στη δεύτερη σειρά. Έτσι είναι πιο ξεκάθαρο και πιο εύκολο να συγκρίνουμε τον κώδικα HTML.
Μπορείτε επίσης να συγχωνεύσετε τρία κελιά στο κέντρο. Στην πρώτη περίπτωση, το χαρακτηριστικό colspan καθορίστηκε στο κελί #1. Εδώ το πρώτο θα είναι αμετάβλητο, και το colspan ίσο με τρία έχει προστεθεί στο δεύτερο.
Εάν θέλετε να συγχωνεύσετε όλα τα κελιά σε μια σειρά σε ένα μόνο, τότε διαγράψτε τέσσερα tds και καθορίστε colspan="5" στο πρώτο.
Όπως μπορείτε να δείτε, είναι πραγματικά πολύ απλό. Δεν υπάρχει τίποτα δύσκολο. Το κύριο πράγμα είναι να κατανοήσετε προσεκτικά, από την πρώτη φορά, όλες τις παγίδες των τραπεζιών και στη συνέχεια δεν πρέπει να προκύψουν προβλήματα.
Οι πίνακες ως πλαίσιο ιστότοπου
Σε HTML, η συγχώνευση κελιών δεν χρησιμοποιείται πάντα για κανονικούς πίνακες πληροφοριών (όπως στο Word ή στο Excel). Οι προγραμματιστές ιστότοπων συχνά, και πριν χωρίς εξαίρεση, τους χρησιμοποιούσαν για τη διάταξη του ιστότοπου.
Για παράδειγμα, εξετάστε αυτήν τη διάταξη ιστότοπου. Αυτό το σχέδιο είναι πολύ απλό και πρωτόγονο. Αλλά εδώ είναι δυνατό να εμφανιστεί ρητά η χρήση της ένωσης.
Αρχικά υπήρχε ένας πίνακας με τρεις σειρές, δύο κελιά το καθένα. Στη συνέχεια, για να τοποθετηθεί το λογότυπο του ιστότοπου, τα δύο κελιά της πρώτης σειράς συγχωνεύτηκαν. ΣΕ συμπέρασμαέκανε το ίδιο για να τοποθετήσει το «υπόγειο».
Χάρη σε αυτό, μπορείτε να τοποθετήσετε στοιχεία σχεδίασης στις θέσεις τους και τίποτα δεν θα πάει πουθενά πέρα από τα όριά του. Είναι πολύ βολικό και απλό. Γι' αυτό ήταν τόσο δημοφιλές. Η ετικέτα div συνιστάται πλέον για τη δημιουργία μπλοκ.
συμπέρασμα
Και να θυμάστε ότι σε έναν πίνακα HTML, μπορείτε να κάνετε ό,τι θέλετε για να συγχωνεύσετε κελιά. Όλα εξαρτώνται από το τι χρειάζεστε και πώς θέλετε να το κανονίσετε. Το πιο σημαντικό, μην μπερδεύεστε. Αν θέλετε να δημιουργήσετε ένα μεγάλο τραπέζι με μεγάλο αριθμό ενώσεων, συνιστάται να σχεδιάσετε πρώτα όλα αυτά σε ένα κομμάτι χαρτί ή στο Paint. Για αρχάριους, θα είναι πιο εύκολο με αυτόν τον τρόπο.
Όταν αποκτήσεις εμπειρία, μπορείς εύκολα να κάνεις τέτοιες επεμβάσεις στο κεφάλι σου.