Μάθημα σε HTML. Συγχώνευση κύτταρα

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

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

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

Στην HTML, η ένωση των κυττάρων λαμβάνει χώρα μέσω δύο χαρακτηριστικά: colspan και rowspan. Έχουν καθοριστεί για την ετικέτα td.

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

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

HTML-Πίνακας: συγχώνευση κελιών κάθετα και οριζόντια

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

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

Η κατώτατη γραμμή είναι ότι σας πω το κελί πόσο διάστημα θα χρειαστεί. Η προεπιλεγμένη τιμή είναι 1.

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

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

• Σειρά - σειρά.
• Col - στήλη / στήλη.
• Span - Σύλλογος.

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

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

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

HTML: συγχώνευση κελιών. παραδείγματα

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

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

Αν θέλετε να συγχωνεύσετε όλα τα κύτταρα σε μια σειρά σε ένα ενιαίο, στη συνέχεια, αφαιρέστε τις τέσσερις td στην πρώτη αναφέρει colspan = «5».

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

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

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

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

Υπήρχε αρχικά ένας πίνακας τριών σειρών των δύο κύτταρα το καθένα. Στη συνέχεια, για να τοποθετήσετε το λογότυπο του δικτυακού τόπου, τα δύο κύτταρα στην πρώτη σειρά έχουν συνδυαστεί. Η κατώτατη γραμμή είναι να κάνει το ίδιο για να φιλοξενήσει το «υπόγειο».

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

συμπέρασμα

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

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