Πίνακας HTML που συνδυάζει κύτταρα. Μάθημα HTML. Συνδυάζοντας κύτταρα. Πώς να βρείτε συνδυασμένα κύτταρα στο Excel

Για να συνδυάσετε δύο και περισσότερα κύτταρα σε ένα χρησιμοποιεί χαρακτηριστικά ετικέτας Colspan και Rowowpan . Το χαρακτηριστικό Colspan θέτει τον αριθμό των οριζόντιων κυττάρων. Το χαρακτηριστικό Rowspan λειτουργεί πιθανόν, με τη μόνη διαφορά που συνδυάζει τα κύτταρα κάθετα. Πριν από την προσθήκη χαρακτηριστικών, ελέγξτε τον αριθμό των κυττάρων σε κάθε σειρά έτσι ώστε να μην υπάρχουν σφάλματα. Ετσι, Αντικαθιστά τρία κελιά, έτσι στην επόμενη γραμμή πρέπει να υπάρχει τρεις ετικέτες ή σχεδιασμός τύπου ...... . Εάν ο αριθμός των κυττάρων σε κάθε σειρά δεν ταιριάζει, θα εμφανιστούν κενά φάντασμα. Στο Παράδειγμα 12.3, αν και ο έγκυρος, αλλά εσφαλμένος κώδικας στον οποίο αυτό το σφάλμα εκδηλώνεται μόνο.

Παράδειγμα 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" συνδυάζονται όπου δύο, και όπου και τρία κύτταρα. Στο κύτταρο με την επιγραφή "πρόγραμμα περιήγησης" εφαρμόστηκε κάθετα μια ένωση.

Ένα πολύ βολικό στοιχείο. Μπορείτε να κάνετε κάτι μαζί τους. Φυσικά, ο κύριος σκοπός είναι να τοποθετήσετε πληροφορίες με τη μορφή ενός πίνακα. Αλλά οι προγραμματιστές του site πήγαν περαιτέρω. Κάποτε ήταν πολύ δημοφιλές να χρησιμοποιούν πίνακες για να δημιουργήσουν ένα πλαίσιο του ιστότοπου. Τώρα οι επαγγελματίες προσπαθούν να μην το πράξουν.

Οι πίνακες βρήκαν τη διαδεδομένη χρήση τους λόγω Μεγάλος αριθμός Γνωρίσματα. Για παράδειγμα, ήταν πολύ χρήσιμο να συνδυάσετε τη σειρά ή τις στήλες.

Εισαγωγή στη θεωρία

Στο HTML, η συσχέτιση των κυττάρων εμφανίζεται με δύο χαρακτηριστικά: Colspan και Rowowpan. Υποδεικνύονται για TD Tag.

Ας αναλύσουμε πρώτα τη δομή οποιουδήποτε πίνακα πριν πάτε για να εμβαθύνετε στο θέμα. Σε οποιοδήποτε πίνακα υπάρχει μια συμβολοσειρά και σε αυτό - κύτταρα. Θυμηθείτε ότι αρχικά όλοι οι πίνακες πρέπει να περιέχουν τον ίδιο αριθμό κυττάρων.

Το παραπάνω σχήμα δείχνει δύο γραμμές, και σε κάθε τρία κύτταρα. Αυτό είναι ένα κανονικό τραπέζι. Εάν είστε σε κάποια γραμμή καθορίστε έναν μικρότερο αριθμό κυττάρων, τότε ο πίνακας "θα φάει", όλα θα εμφανιστούν εσφαλμένα.

Πίνακας HTML: Ένωση κελιών κάθετα και οριζόντια

Μπορείτε να καθορίσετε έναν μικρότερο αριθμό κυττάρων ή συμβολοσειρών σε περίπτωση που συνδυάζετε κάτι. Αλλά αντί για ένα απομακρυσμένο στοιχείο, στο κοντινό δίπλα στην αρχή, πρέπει να καθορίσετε ένα πρόσθετο χαρακτηριστικό. Εάν συνδυάζετε στήλες, στη συνέχεια, το Colspan, αν σειρές, στη συνέχεια rowspan. Η τιμή χαρακτηριστικού υποδεικνύει τον αριθμό των στοιχείων που πρέπει να συνδυαστούν.

Παρακαλείστε να σημειώσετε ότι πρέπει να καθορίσετε στο πλησιέστερο στοιχείο στην αρχή. Για παράδειγμα, στο παραπάνω σχήμα, αν θέλετε να συνδυάσετε το κελί 1 και 2, πρέπει να καθορίσετε στο χαρακτηριστικό Cell 1 Colspan με τις δύο τιμές. Και αφαιρέστε τον αριθμό κυττάρων 2 ή 3, δεν έχει σημασία πλέον.

Η ουσία είναι ότι καθορίζετε το κελί, πόσο χώρο θα χρειαστεί. Η προεπιλεγμένη τιμή είναι 1.

Το συνδυασμό των κυττάρων στον πίνακα HTML κάθεται υπό την ίδια αρχή. Απλά κατεχόμενο χώρο θα εξεταστεί κάθετα. Εξετάζουμε το σχέδιο παρακάτω.

Εδώ το κύτταρο με έναν αριθμό 43 διαρκεί δύο γραμμές. Για να το κάνετε αυτό, έδειξε το χαρακτηριστικό rowspan. Αξέχαστη απλά:

• Σειρά - συμβολοσειρά.
• Col - στήλη / στήλη.
• SPAN - Association.

Οι δημιουργοί της γλώσσας προσπάθησαν να το φέρουν όσο το δυνατόν πιο κοντά στον άνθρωπο, έτσι ώστε να μην το γνωρίζουν καν να κατανοήσουμε κάπως.

Σε HTML, η ένωση κυττάρων μπορεί να γίνει αμέσως σε δύο κατευθύνσεις: κάθετα και οριζόντια. Για να το κάνετε αυτό, καθορίστε και τα δύο χαρακτηριστικά ταυτόχρονα.

Στο παραπάνω σχήμα, υποδεικνύεται επίσης ότι μπορείτε να κάνετε μια συγχώνευση: χορδές, στήλες και τόσο στήλες όσο και σειρές.

HTML: Σύνδεσμος κυττάρων. Παραδείγματα

Εξετάστε πιο σύνθετα σταδιακά παραδείγματα σε μεγάλους πίνακες. Παρακάτω καθορίζεται η αρχική επιλογή του συνήθους πίνακα. Και στα δεξιά - η επιλογή με το συνδυασμό δύο κυττάρων στη δεύτερη γραμμή. Έτσι οπτικά και πιο εύκολο να συγκρίνετε τον κώδικα HTML.

Μπορείτε επίσης να συνδυάσετε τρία κελιά στο κέντρο. Στην πρώτη περίπτωση, το χαρακτηριστικό Colspan υποδείχθηκε στον αριθμό των κυττάρων 1. Εδώ η πρώτη θα παραμείνει αμετάβλητη και το δεύτερο έχει προστεθεί colspan ίση με τρία.

Εάν θέλετε να συνδυάσετε ολόκληρο το κελί στη γραμμή σε ένα, τότε αφαιρούμε τέσσερα tds και στην πρώτη εμφάνιση colspan \u003d "5".

Όπως μπορείτε να δείτε, στην πραγματικότητα, όλα αυτά είναι απλά. Δεν υπάρχει τίποτα δύσκολο. Το κύριο πράγμα, προσεκτικά, από την πρώτη φορά, για να καταλάβετε όλες τις υποβρύχιες πέτρες των πινάκων και στη συνέχεια δεν πρέπει να υπάρχουν προβλήματα.

Πίνακες ως πλαίσιο του ιστότοπου

Στο HTML, η συσχέτιση των κυττάρων δεν χρησιμοποιείται πάντοτε για τακτικούς πίνακες με πληροφορίες (τόσο στο Word είτε στο Excel). Οι προγραμματιστές της τοποθεσίας συχνά και οι προηγούμενες χρησιμοποίησαν για διάταξη ιστότοπων.

Για παράδειγμα, μπορείτε να εξετάσετε αυτή τη διάταξη του ιστότοπου. Αυτός ο σχεδιασμός είναι πολύ απλός και πρωτόγονος. Αλλά εδώ μπορείτε να δείξετε ρητά τη χρήση της Ένωσης.

Εδώ ήταν αρχικά ένας πίνακας τριών γραμμών, δύο κύτταρα σε κάθε μία. Στη συνέχεια, για να τοποθετήσετε το λογότυπο του ιστότοπου, συνδυάστηκαν δύο κύτταρα στην πρώτη γραμμή. Στην κατώτατη γραμμή έκανε το ίδιο πράγμα που έβαλε το "υπόγειο".

Χάρη σε αυτό, είναι δυνατό να τοποθετήσετε στοιχεία σχεδιασμού στα μέρη τους, και τίποτα δεν θα πάει πουθενά για τα όριά τους. Είναι πολύ βολικό και εύκολο. Ως εκ τούτου, ήταν τόσο δημοφιλές. Συνιστάται να δημιουργήσετε ένα div tag tag.

συμπέρασμα

Και θυμηθείτε ότι σε πίνακα HTML, η ένωση κυττάρων μπορεί να γίνει όπως θέλετε. Όλα εξαρτώνται από το τι χρειάζεστε και πώς θέλετε να το κανονίσετε. Κύρια, μην επιβεβαιώσετε. Εάν θέλετε να δημιουργήσετε ένα μεγάλο τραπέζι με μεγάλο αριθμό ενώσεων, συνιστάται να προετοιμαστείτε όλα στο φυλλάδιο ή στο χρώμα. Θα είναι ευκολότερο για τους αρχάριους κατασκευαστές έτσι.

Όταν θέλετε εμπειρία, μπορείτε εύκολα να δημιουργήσετε τέτοιες λειτουργίες στο κεφάλι σας.

Στην πραγματικότητα, είναι πολύ απλό αν έχετε ήδη δημιουργήσει πίνακες HTML. Μάθηση ενός ζεύγους παραμέτρων, θα μάθετε να συνδυάζετε τα επιτραπέζια κύτταρα. Ένα παράδειγμα ενός πίνακα με κύτταρα συνδυασμένα οριζόντια και κάθετα, βλέπε, για παράδειγμα, στο προηγούμενο άρθρο περίπου.

Σκεφτείτε πώς συνδυάζονται τα κύτταρα, στο παράδειγμα του πίνακα HTML 5x5. Χρησιμοποιώ για να δημιουργήσω πίνακες. Ο κώδικας που δημιουργείται από τον σχεδιαστές πίνακα 5x5 μοιάζει με αυτό:

< div> < table border= "1" cellspacing= "1" cellpadding= "1" width= "100%" > < tbody> < tr> < td align= "left" > C1r1 < td align= "left" > C2r1 < td align= "left" > C3r1 < td align= "left" > C4r1 < td align= "left" > C5r1 < tr> < td align= "left" > C1R2. < td align= "left" > C2R2. < td align= "left" > C3R2. < td align= "left" > C4R2. < td align= "left" > C5R2. < tr> < td align= "left" > C1r3 < td align= "left" > C2r3 < td align= "left" > C3r3 < td align= "left" > C4r3 < td align= "left" > C5r3 < tr> < td align= "left" > C1R4. < td align= "left" > C2R4. < td align= "left" > C3R4. < td align= "left" > C4R4. < td align= "left" > C5R4. < tr> < td align= "left" > C1r5 < td align= "left" > C2R5. < td align= "left" > C3r5 < td align= "left" > C4r5 < td align= "left" > C5r5

Το ίδιο το τραπέζι μοιάζει με αυτό:

C1r1	C2r1	C3r1	C4r1	C5r1
C1R2.	C2R2.	C3R2.	C4R2.	C5R2.
C1r3	C2r3	C3r3	C4r3	C5r3
C1R4.	C2R4.	C3R4.	C4R4.	C5R4.
C1r5	C2R5.	C3r5	C4r5	C5r5

I. Σύνδεσμος κάθετων κυττάρων
Η παράμετρος χρησιμοποιείται για κάθετα κύτταρα. rowspan.Ορίζοντας τον αριθμό των κυττάρων που συνδυάζονται κάθετα.
Συνδυάζουμε το C1R1 και C1R2 Cell στον παραπάνω πίνακα. Για αυτό χρειάζεστε:

1. Για το C1R1 Cell Add Rowspan \u003d "2" παράμετρος:

C1R2.

Τώρα το τραπέζι μοιάζει με αυτό:

C1r1	C2r1	C3r1	C4r1	C5r1
	C2R2.	C3R2.	C4R2.	C5R2.
C1r3	C2r3	C3r3	C4r3	C5r3
C1R4.	C2R4.	C3R4.	C4R4.	C5R4.
C1r5	C2R5.	C3r5	C4r5	C5r5

Ii. Ένωση κελιών οριζόντια
Η παράμετρος χρησιμοποιείται για την οριζόντια συσχέτιση των κυττάρων. colspan.Ο καθορισμός του αριθμού των κυττάρων συνδυάζονται οριζόντια.
Συνδυάζουμε τα κύτταρα C2R1, C3R1 και C4R1 που καθορίζονται στον παραπάνω πίνακα. Για αυτό χρειάζεστε:

1. Για το C2R1 Cell Προσθέστε μια παράμετρος Colspan \u003d "3":

C3r1 C4r1

Ο πίνακας θα λάβει την ακόλουθη φόρμα:

C1r1	C2r1			C5r1
	C2R2.	C3R2.	C4R2.	C5R2.
C1r3	C2r3	C3r3	C4r3	C5r3
C1R4.	C2R4.	C3R4.	C4R4.	C5R4.
C1r5	C2R5.	C3r5	C4r5	C5r5

Θα πρέπει μόνο να γεμίσετε το τραπέζι με περιεχόμενο: δείγματα των μεταφρασμάτων σας στο χαρτοφυλάκιο κλπ.

Πινάκων Είναι καλύτερο να εξετάσουμε το παράδειγμα ενός απλού πίνακα, ο κώδικας HTML του οποίου εμφανίζεται στην καταχώριση 5.10.

Αυτός είναι ένας κανονικός πίνακας των οποίων τα κύτταρα αριθμούνται - έτσι θα είναι ευκολότερο για εμάς αργότερα. Στο ΣΧ. 5.2 Εμφανίζει την προβολή του στο παράθυρο του προγράμματος περιήγησης στο Web.

Και τώρα εξετάστε τον πίνακα στο Σχ. 5.3.

Εδώ είναι ο συνδυασμός ορισμένων κυττάρων. Μπορεί να φανεί ότι τα συνδυασμένα κύτταρα σαν να συγχωνεύονται σε ένα. Πως να το κάνεις?

Ειδικά για αυτές τις ετικέτες και Υποστηρίξτε δύο πολύ αξιοσημείωτα προαιρετικά χαρακτηριστικά. Πρώτο - Colspan - συνδυάζει τα κύτταρα οριζόντια, δευτερόλεπτο -Rowspan-κάθετη.

Για να συνδυάσετε πολλά κελιά οριζόντια σε ένα, πρέπει να εκτελέσετε τα παρακάτω βήματα.

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 που συνδυάζουν κύτταρα στον πίνακα οριζόντια και κάθετα.

Δεν θα ασχοληθούμε να ασχοληθούμε, θα δημιουργήσω Απλό τραπέζι Από τις τρεις σειρές και τέσσερα κύτταρα σε κάθε σειρά. Για αυτούς είναι τα πιο απλά στυλ έτσι ώστε να εμφανίζονται σωστά τα πάντα.

Τραπέζι (
Σύνυλλο-κατάρρευση: κατάρρευση;
}
Td (
Σύνορα: 1px στερεό μαύρο?
Πλάτος: 60px;
Ύψος: 50px;
}

Ένωση κελιών οριζόντια

Ας ξεκινήσουμε με αυτό, επειδή αυτή η τεχνική είναι ευκολότερη. Ας υποθέσουμε ότι θέλετε τέσσερα κύτταρα στην πρώτη σειρά να συγχωνευθούν σε ένα. Αυτό μπορεί να γίνει χρησιμοποιώντας το χαρακτηριστικό colspan:

1. Συντάβουμε το επιθυμητό χαρακτηριστικό colspan \u003d "Ο αριθμός των κυττάρων που χρειάζεστε για να συνδυάσετε"
2. Αφαιρέστε όλα τα επιπλέον κύτταρα

Για παράδειγμα:

Κοιτάξτε αυτό το κομμάτι του κώδικα. Δεδομένου ότι το πρώτο κελί σε έναν αριθμό ρυθμίζει το Colspan 4, στην πραγματικότητα, θα πραγματοποιηθεί τέσσερα κύτταρα και επομένως τα ακόλουθα 3 σε ορισμένα πρέπει να αφαιρεθούν, απλά δεν χρειάζονται τώρα.

Εάν δεν τα διαγράψουν, στη συνέχεια σχηματίζονται σε ένα αριθμό 7 κελιών και φυσικά θα γινόταν πολύ ευρύτερα από τα ακόλουθα δύο.

Τώρα τα διαγράψουμε και βλέπουμε ότι όλα εμφανίζονται τέλεια.

Κάθετη σχέση

Είναι λίγο πιο δύσκολο και διεξάγεται από την ίδια τεχνολογία, χρησιμοποιείται μόνο το χαρακτηριστικό που ονομάζεται rowspan και είναι απαραίτητο να αφαιρεθούν τα επιθυμητά κύτταρα στη στήλη και όχι έναν αριθμό που να κάνει λίγο να περιπλέξει την εργασία, αλλά στην πραγματικότητα τα πάντα είναι απλή αν καταλάβετε γρήγορα την ουσία.

Ας ενώσουμε τα τελευταία κελιά σε έναν αριθμό 2 και 3. Για αυτό, το τελευταίο κλουβί σε έναν αριθμό 2 γράψτε rowspan \u003d "2". Τώρα πρέπει να αφαιρέσετε το τελευταίο κελί σε περίπου 3. Εάν αυτό δεν γίνει, και πάλι, τα επιπλέον κύτταρα θα βγει, τι θα χαλάσει έντονα εμφάνιση Το τραπέζι μας.

Συνδυασμός και στα δύο μέρη

Ένα κύτταρο μπορεί να τεθεί και τα δύο χαρακτηριστικά. Ας δούμε πώς λειτουργεί επίσης. Συνδυάζουμε τα πρώτα κύτταρα της σειράς 2 σε ένα κύτταρο και οι δύο πρώτες σειρές 3. Συνολικά 4 κύτταρα συνδυάζονται σε ένα.

Σε αυτή την περίπτωση, το κύτταρο στη δεύτερη σειρά θα λάβει και τα δύο αυτά χαρακτηριστικά, το ακόλουθο κύτταρο διαγράφεται στη δεύτερη σειρά, στο τρίτο - τα δύο πρώτα.

Έτσι, μπορείτε να δημιουργήσετε πίνακες οποιασδήποτε πολυπλοκότητας, έχω ήδη πει για το σχεδιασμό τους σε αυτό το άρθρο, σήμερα ο στόχος μου ήταν να σας δείξω ένα τέχνασμα με μια ένωση και ελπίζω να αποδείξει και καταλάβετε κάτι. Εάν έχετε ερωτήσεις, ρωτήστε στα σχόλια.

Ανάψτε την προσοχή σας: Όλοι θέλουμε να δημοσιεύσουμε τους χώρους τους σε μια αξιόπιστη φιλοξενία. Αναλύθηκα εκατοντάδες φιλοξενίες και βρήκα το καλύτερο - Hostiq. Online εκατοντάδες θετικές ανατροφοδότηση σχετικά με αυτό, η μέση βαθμολογία χρήστη είναι 4.8 από το 5. Αφήστε τις τοποθεσίες σας να είναι εντάξει.