Html εισάγετε την εικόνα μέσα στο κελί. Σχεδόν κανονική λειτουργία

1. Τι είναι τα τραπέζια HTML και γιατί χρειάζονται;

html πίνακα - Αυτό είναι ένα από τα πιο βασικά συστατικά κάθε σελίδας HTML και αντίστοιχα κάθε τοποθεσία. Για παράδειγμα, ο ιστότοπος οθόνης αποτελείται από τραπέζια: εικόνες, κείμενα, συνδέσμους, έντυπα εγγραφής - όλα τοποθετούνται σε σχέση μεταξύ τους χρησιμοποιώντας πίνακες HTML (στην πραγματικότητα, ολόκληρη η περιοχή βρίσκεται επίσης σε ένα μεγάλο τραπέζι).

2. Ποιες είναι οι ετικέτες από τα τραπέζια HTML;

ΕτικέτεςΟ καθορισμός του πίνακα HTML είναι γραμμένο όπως αυτό:

Αλλά από τότε που γνωρίζουμε, όλα τα τραπέζια αποτελούνται από γραμμές και στήλες (κύτταρα), έτσι πρέπει να ορίσετε ετικέτες και για αυτούς:

- πίνακας γραμμής HTML
- Πίνακας HTML στήλης (κυττάρων).

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

Αυτό το HTML γίνεται πολύ εύκολα. Αρχικά, βάζουμε τις ετικέτες του ίδιου του τραπεζιού, μέσα στο οποίο βάζουμε τον απαιτούμενο αριθμό σειρών (στις γραμμές του Παραδείγματος 2):

Στη συνέχεια, κάθε συμβολοσειρά χωρίζεται σε κύτταρα χρησιμοποιώντας ετικέτες στήλης:

- Κύτταρο 1.1.
- Κύτταρο 1.2.
- Κύτταρο 1.3.


- Κύτταρο 2.1
- Κύτταρο 2.2.
- Κύτταρο 2.3.

Στην πραγματικότητα, ο πρώτος αριθμός των επιγραφών είναι ένας αριθμός αριθμών και ο δεύτερος αριθμός κυττάρων (1x2 είναι η πρώτη σειρά, το δεύτερο κύτταρο κλπ.).

3. Πώς να ορίσετε το χρώμα φόντου των πινάκων HTML;

Και τώρα ας ασχοληθούμε με το πώς το υπόβαθρο του πίνακα ή κάθε κελί καθορίζεται ξεχωριστά.

Έτσι, το χαρακτηριστικό χρησιμοποιείται για να ορίσει το φόντο bgcolor \u003d "color_fone".

Για παράδειγμα, αν χρειαστεί να ορίσουμε ένα χρώμα για ολόκληρη την πλάκα, γίνεται έτσι:

bgcolor \u003d "color_fone">

- Κύτταρο 1.1.
- Κύτταρο 1.2.
- Κύτταρο 1.3.


- Κύτταρο 2.1
- Κύτταρο 2.2.
- Κύτταρο 2.3.

Για παράδειγμα, αν χρειαστεί να φτιάξετε ένα κίτρινο δισκίο, γράφουμε:

Αν χρειαστεί Ορίστε τη γραμμή χρώματος φόντου Τραπέζια HTML, τότε το χαρακτηριστικό bgcolor \u003d "color_fone" Εφαρμόστε την ετικέτα :

bgcolor \u003d "# ffff00"> bGCOLOR \u003d "# 0000FF"> 1.1 1.2 1.3 2.1 2.2 2.3

1.1	1.2	1.3
2.1	2.2	2.3

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

Ομοίως, το χρώμα κάθε κυττάρου χωριστά. Για παράδειγμα, αν χρειαστεί να αλλάξετε το χρώμα του κελιού 1.2 στο μπλε, στη συνέχεια μέσα στην ετικέτα ανοίγματος Χαρακτηριστικό bgcolor \u003d "color_fone":

4. Πώς να ορίσετε το πλάτος και το ύψος των κυττάρων HTML του πίνακα;

Έτσι, προκειμένου να ρυθμιστεί χειροκίνητα το πλάτος και το ύψος των κυττάρων, χρησιμοποιήστε τα χαρακτηριστικά ύψους και πλάτους. Μπορούν να ρυθμιστούν για ολόκληρο τον πίνακα, για μία σειρά, για κελί (στήλη). Το ύψος και το πλάτος μπορούν να ρυθμιστούν τόσο σε εικονοστοιχεία όσο και σε ποσοστά. Στην περίπτωσή μας, θα θέσουμε το πλάτος και το ύψος σε εικονοστοιχεία για στήλες (κύτταρα).

Υψος - Χαρακτηριστικό Ρύθμιση του ύψους του κελιού

πλάτος. - Χαρακτηριστικό που καθορίζει το πλάτος του κελιού

Και τώρα στο παράδειγμα:

Τώρα θα εξηγήσω γιατί θέτουμε το ύψος των κυττάρων μόνο μία φορά σε κάθε σειρά.

Εάν σε έναν αριθμό ορίζετε για οποιοδήποτε ύψος κυττάρων λιπαρή από ό, τι για τους άλλους, παρά το γεγονός αυτό, όλα τα κελιά (στήλες) της σειράς σας θα είναι το υψηλότερο σε ύψος. Και το πλάτος κάθε σειράς είναι καλύτερα ξεχωριστά!

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

Επίσης, πολύ συχνά πρέπει να ορίσετε ύψος ύψους και πλάτος πλάτους σε percents:

Περιεχόμενο κυττάρων

Εάν καθορίζουμε ένα πλάτος 40 τοις εκατό για ένα κύτταρο, όπως στο παράδειγμά μας, σημαίνει ότι έχουμε ένα άλλο 60 τοις εκατό αριστερά για τα υπόλοιπα κύτταρα, δηλ. Το ποσό του πλάτους τους δεν πρέπει να υπερβαίνει το 60 τοις εκατό. Όλα είναι πολύ απλά: στο ποσό που έχουμε μόνο το 100%. Πιστεύουμε: 100 - 40 \u003d 60.

5. Πώς να ευθυγραμμίσετε το κείμενο μέσα στον πίνακα HTML;

Και τώρα ας το καταλάβουμε πώς να ευθυγραμμιστεί το κείμενο στο τραπέζι HTML κατά μήκος της αριστερής άκρης, στο δεξί άκρο και στο κέντρο.

Αυτό γίνεται χρησιμοποιώντας το χαρακτηριστικό:

align \u003d "αριστερά" - Επίπεδα κείμενο μέσα πίνακες HTML στην αριστερή άκρη

Ευθυγράμμιση \u003d "Κέντρο" - επίπεδα html κείμενο Πίνακες στο κέντρο

Ευθυγραμμίστε \u003d "δεξιά" - Επίπεδα κείμενο μέσα πίνακες HTML στο δεξί άκρο

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

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

Ευθυγράμμιση \u003d "Κέντρο"> align \u003d "αριστερά"\u003e 1x1 Ευθυγράμμιση \u003d "Κέντρο">1.2 Ευθυγραμμίστε \u003d "δεξιά"\u003e 1x3 align \u003d "αριστερά">2.1 Ευθυγράμμιση \u003d "Κέντρο"\u003e 2x2. Ευθυγραμμίστε \u003d "δεξιά">2.3

Καθορισμός του χαρακτηριστικού Ευθυγράμμιση \u003d "Κέντρο" Στο άνοιγμα

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

Εδώ είναι το αποτέλεσμα που παίρνετε στο πρόγραμμα περιήγησης:

1x1	1.2	1x3
2.1	2x2.	2.3

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

Κάθετη ευθυγράμμιση ορίζεται από το χαρακτηριστικό:

Valign \u003d "κορυφή" - Το περιεχόμενο θα βρίσκεται στην κορυφή του κελιού

valign \u003d "Μέση" - Το περιεχόμενο θα βρίσκεται στο κυτταρικό κέντρο

valign \u003d "κάτω" - το περιεχόμενο θα βρίσκεται στο κάτω μέρος του κελιού

Ας εξετάσουμε αυτά τα χαρακτηριστικά στο παράδειγμά μας:

valign \u003d "κορυφή"\u003e 1x1 1.2 valign \u003d "κορυφή"\u003e 1x3 valign \u003d "κάτω">2.1 2x2. valign \u003d "κάτω">2.3

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

1x1	1.2	1x3
2.1	2x2.	2.3

6. Πώς να συνδυάσετε τα πινάκια HTML των κελιών και των στηλών;

Σε αυτό το μέρος του άρθρου μας θα μιλήσουμε για χαρακτηριστικά Κούτσουρας και rowspan..

Κούτσουρας - Καθορίζει τον αριθμό των στηλών που πρόκειται να διανεμηθούν Αυτό το κελί

Rowspan. - καθορίζει τον αριθμό των σειρών στις οποίες κατανέμεται αυτό το κελί

Αξίες Κούτσουρας και rowspan. μπορεί να πάρει μια τιμή από 2 και περισσότερο, δηλ. Το κύτταρο μπορεί να τεντώσει σε δύο ή περισσότερες στήλες (σειρές).

Έτσι, τώρα στο παράδειγμα, τεντώνουμε το κύτταρο 1x1 σε δύο στήλες (κύτταρα). Για να το κάνετε αυτό, θα χρησιμοποιήσουμε το χαρακτηριστικό colspan \u003d "2", μιλώντας το για το κελί 1x1. Ο κώδικας θα μοιάζει με αυτό:

Όπως βλέπουμε, το κύτταρο 1Χ1 εξαπλώνεται στο μήκος δύο κυττάρων. Συνεπώς, το μήκος του είναι ίσο με το συνδυαστικό μήκος αυτών των δύο κυττάρων (160 pixels). Δεν προέκυψαν το χαρακτηριστικό πλάτος για το Cell 1x1, αλλά αν αποφασίσαμε να το κάνουμε, τότε θα το πλάτος θα καλείται από 160 pixels. Και επίσης, σημειώστε ότι στο παράδειγμά μας δεν υπάρχει κελί 1x3, δηλ. Στην πρώτη σειρά, μόνο δύο κελιά, γιατί - το συζητήσαμε ήδη - το Cell 1x1 ισούται με δύο κύτταρα, χάρη στο χαρακτηριστικό Colspan.

Με τα χαρακτηριστικά Colspan και Rowowpan, πρέπει να επικοινωνήσετε με πολύ προσεκτικά. Ένα σφάλμα μπορεί να οδηγήσει στο γεγονός ότι ο ιστότοπός σας θα "πάει".

Και τώρα, όταν αντιμετωπίσαμε την παράμετρο ColspanΑς ασχοληθούμε με την παράμετρο Rowspan. Η αρχή της δράσης είναι η ίδια:

colspan \u003d "2"> 1.1 1.2 2.1 2.2

1.1		1.2
2.1	2.2

Έτσι, μάθαμε να συνδυάζουμε τα κύτταρα σε γραμμές και στήλες των πινάκων HTML.

7. Πώς να αφαιρέσετε, να προσθέσετε ή να αλλάξετε τις περιπτώσεις και τον τρόπο ρύθμισης του πίνακα πλαισίου HTML;

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

border \u003d "Πλάτος πλαισίου σε εικονοστοιχεία" - Ορίζει το πλάτος του πλαισίου

borderColor \u003d "Χρώμα πλαισίου"- Ορίζει το χρώμα του πλαισίου

Ας κάνουμε, για παράδειγμα, να κάνετε το τραπεζικό μας πλαίσιο HTML Black Frame 1 Pixel.

Για αυτήν την ετικέτα.

Προσθήκη χαρακτηριστικών:

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

cellsPacing \u003d "Πλάτος της συνταξιοδότησης σε εικονοστοιχεία" - Εσοχή μεταξύ των κελιών

cellpadding \u003d "Πλάτος μιας εσοχής σε εικονοστοιχεία" - Εσοχή μέσα στο κελί (από την άκρη του κελιού σε κείμενο, εικόνες, συνδέσμους ...)

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

cellpadding \u003d "20"cellyPacing \u003d "10"> 1.1 1.2 2.1 2.2

Αν κοιτάξετε το αποτέλεσμα στο πρόγραμμα περιήγησης, τότε βλέπουμε σαφώς ότι η απόσταση μεταξύ των κυττάρων ( Κελύφη.) Ο πίνακας HTML μας έχει αυξηθεί σε 10 εικονοστοιχεία και η απόσταση μεταξύ του κειμένου και της εσωτερικής άκρης του κελιού αυξήθηκε κατά 20 εικονοστοιχεία.

1.1		1.2
2.1	2.2

Εάν πρέπει να αφαιρέσετε τις περιπτώσεις γενικά, απλά να βάλετε cellpadding \u003d "0"και cellSpacing \u003d "0".

8. Πώς είναι ένας πίνακας HTML Εισάγετε το άλλο;

Προσεγγίζουμε το τελικό στάδιο για τη μελέτη των τραπεζιών HTML. Τώρα θα μάθουμε να εισάγαμε ένα τραπέζι μέσα στο άλλο.

Στο παράδειγμα, μέσα στο κελί 1.2 Θα εισαγάγει ένα νέο πίνακα που αποτελείται από μία σειρά και δύο στήλες. Εσωτερικός πίνακας HTML Ρυθμίζουμε το πλάτος και την απόσταση του κόκκινου πλαισίου 2 εικονοστοιχείων μεταξύ των κυττάρων 0 pixels. Επίσης, ο εσωτερικός πίνακας θα τοποθετήσουμε στην κορυφή του κελιού.

Έγινε πολύ απλή:

1.1 3.1 3.2 2.1 2.2

Αυτό συνέβη ως αποτέλεσμα νέων μετασχηματισμών του πίνακα μας (κόκκινα κελιά - ένας εσωτερικός πίνακας που βρίσκεται μέσα σε ένα μεγάλο τραπέζι):

1.1		3.1 3.2
2.1	2.2

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

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

Ετσι, Πώς να κάνετε ένα απλό τραπέζι σε html?
Για να δημιουργήσετε ένα τραπέζι, χρησιμοποιήστε τρεις ετικέτες:

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

Ο πίνακας αποτελείται από μια σειρά

Σειρά 1.	Σειρά 1.
Σειρά 2.	Σειρά 2.
Σειρά 3.	Σειρά 3.

Κύτταρο 1.	Κύτταρο 2.
Κύτταρο 1.	Κύτταρο 2.
Κύτταρο 1.	Κύτταρο 2.

Tr – Δημιουργεί μια νέα σειρά τραπεζιών. Ετικέτα κλεισίματος υποχρεωτικός.

TD. – Δημιουργεί ένα νέο κελί στη σειρά. Ετικέτα κλεισίματος υποχρεωτικός.

Ας εξετάσουμε ένα παράδειγμα για να κατανοήσουμε καλύτερα όλα τα παραπάνω:

Σειρά 1 Cell1	Εύρος κελί2.
Σειρά 2 κελί 1	σειρά 2 κελί 2
Εύρος 3 κελί 1	Εύρος 3 Κύτταρο 2

Εδώ είναι το αποτέλεσμα:

Σειρά 1 Cell1	Εύρος κελί2.
Σειρά 2 κελί 1	σειρά 2 κελί 2
Εύρος 3 κελί 1	Εύρος 3 Κύτταρο 2

Ας εξηγήσουμε τα πάντα.
Πριν από κάθε δημιουργία Νέος πίνακας Ανοίγει την ετικέτα

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

Κλείστε μια σειρά ετικετών .
Ανοίξτε μια άλλη ετικέτα σειράς
Κλείστε μια σειρά ετικετών .
Ανοίξτε την ετικέτα τρίτης σειράς Και τοποθετήστε ξανά δύο κύτταρα σε αυτό.
Κλείστε μια σειρά ετικετών .
Κλείσιμο πίνακα

Σειρά 1 Cell1	Εύρος κελί2

.

Νομίζω ότι καταλάβουν; Αν κάποιος ξέχασε τι χαρακτηριστικό είναι Σύνορο.Χρησιμοποιώ με την ετικέτα

Σας υπενθυμίζω ότι αυτό είναι το πάχος του πλαισίου. Αν στο Σύνορο. Η τιμή "0" θα οριστεί, τότε τα σύνορα του πίνακα θα είναι αόρατα.

Κοιτάξτε σε μερικά παραδείγματα Δημιουργημένα τραπέζια Και μπορείτε να προχωρήσετε περισσότερο:

Σειρά 1 κελί 1

Σειρά 2 κελί 1

Αποτέλεσμα:

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

Στη συμβολοσειρά μεταξύ ετικετών Τοποθετήστε μια εικόνα.

Σειρά 1 κελί 1

Εύρος κυττάρων 2

Αποτέλεσμα:

Σειρά 1 κελί 1

Εύρος κυττάρων 2

Και πώς να συνδυάσετε τα κύτταρα στον πίνακα;

Για να συγχωνεύσετε τα κύτταρα στον πίνακα, πρέπει να χρησιμοποιήσετε τέτοια χαρακτηριστικά:
Colspan. - Καθορίζει τον αριθμό των στηλών.
Προεπιλεγμένη τιμή 1.
Rowspan. - καθορίζει τον αριθμό των σειρών.
Προεπιλεγμένη τιμή 1.

Συνδυάζουμε τα κύτταρα Στην επάνω γραμμή χρησιμοποιώντας το χαρακτηριστικό Κούτσουρας :

Σειρά 1 κελί 1 + 2
Σειρά 2 κελί 1	σειρά 2 κελί 2

Αποτέλεσμα:

Πώς να ορίσετε το μέγεθος του πίνακα;

Για να ορίσετε το ύψος και το πλάτος του πίνακα, χρησιμοποιήστε τέτοια χαρακτηριστικά:

Πλάτος - Πλάτος πίνακα. Το μέγεθος ρυθμίζεται σε εικονοστοιχεία ή ποσοστό.
Υψος - ύψος πίνακα. Το μέγεθος ρυθμίζεται σε εικονοστοιχεία ή ποσοστό.

Σειρά 1 Cell1	Εύρος κελί2.
Σειρά 2 κελί 1	σειρά 2 κελί 2

Αποτέλεσμα:

Ευθυγραμμίστε το περιεχόμενο στον πίνακα

Για να ευθυγραμμίσετε το περιεχόμενο (κείμενο, εικόνες) μέσα στο τραπέζι, μπορείτε να χρησιμοποιήσετε τέτοια χαρακτηριστικά:

Ευθυγραμμίζω. - Οριζόντια ευθυγράμμιση περιεχομένου στον πίνακα.
Να χαρακτηριστεί Ευθυγραμμίζω. Αναθέτει τιμές: Αριστερά (προεπιλογή), Κέντρο, σωστά.
αριστερά -Πατήστε το περιεχόμενο στην αριστερή πλευρά.
ΚέντροΕγκαταστήστε στο κέντρο.
Σωστά -Πατήστε το περιεχόμενο στο δεξιό μέρος

Βλακεία. - κάθετη ευθυγράμμιση περιεχομένου στον πίνακα.
Να χαρακτηριστεί Βλακεία. Αναθέτει τιμές: Κορυφή, κάτω, μεσαία.
Μπλουζα. – Πατήστε το περιεχόμενο στην κορυφή.
Κάτω μέρος – Πατήστε το περιεχόμενο στο κάτω μέρος.
Μεσαίου – Ορίστε το περιεχόμενο στη μέση

Σειρά 1 Cell1	Εύρος κελί2.
Σειρά 2 κελί 1	σειρά 2 κελί 2

Αποτέλεσμα:

Πώς να φτιάξετε ένα τραπέζι;

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

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

Προσοχή: Αν πάτε για να ρυθμίσετε το χρώμα φόντου ή Ίδρυμα μοτίβο Ολόκληρο το τραπέζι, τα χαρακτηριστικά πρέπει να εγκατασταθούν στην ετικέτα

. Και αν μόνο σε ένα συγκεκριμένο κελί, στη συνέχεια στην ετικέτα

. Για καλύτερη κατανόηση, κοιτάξτε το παράδειγμα: Σειρά 1 Cell1 Εύρος κελί2. Σειρά 2 κελί 1 σειρά 2 κελί 2 Αποτέλεσμα: Προσοχή: Εάν η εικόνα είναι μικρότερη από το κύτταρο, τότε θα επαναληφθεί μέχρι να γεμίσει το κελί στο τέλος. Εάν η εικόνα είναι περισσότερο ανά κύτταρο, τότε το φόντο της εικόνας θα περικοπεί σε μεγέθη μεγέθους. Και τέλος, θα σας πω Δύο χρήσιμα χαρακτηριστικά. Σε περίπτωση που ξαφνικά θέλετε να αυξήσετε την απόσταση μεταξύ όλων των κυττάρων, τα ακόλουθα χαρακτηριστικά θα σας βοηθήσουν: Cellpadding. - Εσωτερικό μεταξύ του πλαισίου κάθε κελιού του πίνακα HTML και του περιεχομένου σε αυτό σε αυτό. Σειρά 1 Cell1 Εύρος κελί2. Σειρά 2 κελί 1 σειρά 2 κελί 2 Αποτέλεσμα: Σειρά 1 Cell1 Εύρος κελί2. Σειρά 2 κελί 1 σειρά 2 κελί 2 Κελύφη. - Μεταφορά μεταξύ των ορίων των γειτονικών κυττάρων. Σειρά 1 Cell1 Εύρος κελί2. Σειρά 2 κελί 1 σειρά 2 κελί 2 Αποτέλεσμα: Σειρά 1 Cell1 Εύρος κελί2. Σειρά 2 κελί 1 σειρά 2 κελί 2 Fuh, είπε! Ελπίζω με την εργασία που αντιμετώπισα και προσβάσιμα εξήγησα όλα όσα ήξερα html πίνακα. Και συστήνω να εξασφαλίσετε καλά το υλικό. Δοκιμάστε να δημιουργήσετε το δικό σας τραπέζι και να βελτιώσετε ένα ολόκληρο πλαίσιο για μια ιστοσελίδα από το τραπέζι HTML. Το μόνο που είσαι καλός! Σας ευχαριστούμε για την επίσκεψη στο blog μου L yubaya Τραπέζι σε HTML. Πρόκειται για ένα σύνολο σειρών και κίονων, στη διασταύρωση των κυττάρων. Είναι εύκολο να δημιουργήσετε τραπέζια σε HTML, είναι απαραίτητο μόνο να φανταστείτε το τελικό μοντέλο. Στη γλώσσα HTML, οι πίνακες χρησιμοποιούνται όχι μόνο για να υποβάλουν δεδομένα, μπορούν να χρησιμοποιηθούν για την τοποθέτηση μπλοκ κειμένου, εικόνες κλπ. Στην ιστοσελίδα, δηλ. Με τη βοήθειά τους, μπορείτε να δημιουργήσετε μια διάταξη της ίδιας της σελίδας. Στοιχείο πίνακα, δημιουργήστε ένα τραπέζι Το στοιχείο χρησιμοποιείται για τη δημιουργία πινάκων στη γλώσσα HTML. Τραπέζι, και ολόκληρο τον κώδικα (το περιεχόμενό της) Τα τραπέζια βρίσκονται μεταξύ των ετικετών . Χαρακτηριστικά αυτού του στοιχείου Ορισμός τιμών για ολόκληρο τον πίνακα: Ιστορικό. - Η εικόνα είναι ρυθμισμένη (URL), η οποία μπορεί να είναι υπόβαθρο για ολόκληρο τον πίνακα. bgcolor - πίνακας χρώματος φόντου, ρυθμισμένο εάν το φόντο δεν έχει καθοριστεί ως εικόνα. Σύνορο. - Πάχος των γραμμών πίνακα, εάν τα ορατά όρια δεν είναι απαραίτητα. χρώμα πλαισίου - γραμμή χρώματος πίνακα. cellpadding. - απόσταση από το κείμενο μέσα στα κύτταρα στα όρια των κυττάρων. Κελύφη. - απόσταση από τα σύνορα του πίνακα στα εξωτερικά όρια των κυττάρων (μέσα στον πίνακα). πλάτος. - Η τιμή του πλαισίου πίνακα έχει οριστεί px. ή % . Γράψτε ένα παράδειγμα ενός κωδικού πίνακα με μπλε φόντο, πάχος γραμμής σε 1px άσπρο χρώμα, αλαζονικά μέσα και έξω από 2px κύτταρα, 100% πλάτος από τη σελίδα: bGCOLOR \u003d "Blue" Border \u003d "1" BorderColor \u003d "Λευκή" Cellpadding \u003d "10" CellsPacing \u003d "2" πλάτος \u003d "100%"\u003e Προσθέστε μια συμβολοσειρά Σε κάθε τραπέζι θα πρέπει να είναι τουλάχιστον μία γραμμή, ρυθμίζεται από ετικέτες . Στο παρακάτω παράδειγμα, βλέπουμε ένα παράδειγμα προσθήκης συμβολοσειράς: bGCOLOR \u003d "Blue" Border \u003d "1" BorderColor \u003d "Λευκή" Cellpadding \u003d "10" CellsPacing \u003d "2" πλάτος \u003d "100%"\u003e Προσθέστε τα κελιά Τα κύτταρα σχηματίζουν κάθετες στήλες του πίνακα, υποδεικνύονται με ετικέτες . Προσθέστε τα κελιά στο τραπέζι μας: bGCOLOR \u003d "Blue" Border \u003d "1" BorderColor \u003d "Λευκή" Cellpadding \u003d "10" CellsPacing \u003d "2" πλάτος \u003d "100%"\u003e Κύτταρα №1. Αριθμός κυττάρων 2. Αριθμός κυττάρων 3. Βλέπε τον προκύπτον πίνακα: Συνδυασμός συμβολοσειράς Σε ορισμένες περιπτώσεις, μπορεί να χρειαστεί να τεντώσετε μία στήλη για αρκετές γραμμές, για αυτό ισχύει ένα χαρακτηριστικό rowspan.της οποίας η τιμή καθορίζει τον αριθμό των γραμμών που απαιτούνται για τον συνδυασμό. Βλέπουμε ένα παράδειγμα: BGCOLOR \u003d "Blue" Border \u003d "1" BorderColor \u003d "Λευκή" Cellpadding \u003d "10" CellsPacing \u003d "2" πλάτος \u003d "100%"\u003e rowspan \u003d "2"\u003e Σειρές Αριθμός 1 και №2 σε συνδυασμό Κύτταρα1. Κύτταρο2. Αριθμός κυττάρων 3. Αριθμός κυττάρων 4. Αριθμός γραμμής 3. Αριθμός κυττάρων 5. Αριθμός κυττάρων 6. Το πρόγραμμα περιήγησης θα εμφανιστεί: Σειρές 1 και №2 σε συνδυασμό Κύτταρα1. Κύτταρο2. Αριθμός κυττάρων 3. Αριθμός κυττάρων 4. Αριθμός γραμμής 3. Αριθμός κυττάρων 5. Αριθμός κυττάρων 6. Συνδυάζοντας στήλες Οι στήλες συνδυάζονται με την ίδια αρχή, χρησιμοποιώντας μόνο το χαρακτηριστικό Κούτσουρας. Βλέπουμε ένα παράδειγμα: bGCOLOR \u003d "Blue" Border \u003d "1" BorderColor \u003d "Λευκή" Cellpadding \u003d "10" CellsPacing \u003d "2" πλάτος \u003d "100%"\u003e colspan \u003d "2"\u003e στήλες №1 και №2 σε συνδυασμό Αριθμός στήλης 3. Κύτταρα №1. Αριθμός κυττάρων 2. Αριθμός κυττάρων 3. Αριθμός κυττάρων 4. Αριθμός κυττάρων 5. Αριθμός κυττάρων 6. Το πρόγραμμα περιήγησης θα εμφανιστεί: Γνωρίσματα Κούτσουρας και rowspan. Μπορείτε να χρησιμοποιήσετε ταυτόχρονα. Στο πρόγραμμα περιήγησης θα μοιάζει με αυτό: Ή όπως αυτό: Και προσπαθήστε να γράψετε τον κωδικό μόνοι σας! Διαστάσεις και τραπέζι ευθυγράμμισης Το ύψος και το πλάτος μπορούν να ρωτηθούν τόσο για ολόκληρο το τραπέζι στο σύνολό του, όσο και για μεμονωμένες γραμμές και οι στήλες γίνεται αυτό σε ορισμένα γνωστά χαρακτηριστικά. πλάτος. και ΥψοςΟι τιμές καθορίζονται τόσο σε εικονοστοιχεία όσο και σε ποσοστό. Ευθυγράμμιση του οριζόντιου πίνακα ορίζεται από το χαρακτηριστικό Ευθυγραμμίζω., γνωρίζετε ήδη τις έννοιες: Αριστερά, κέντρο, δεξιά. Και να ευθυγραμμιστεί το κείμενο σε επιτραπέζια κύτταρα, οριζόντιο χαρακτηριστικό ευθυγράμμισης Ευθυγραμμίζω. πρέπει να εφαρμοστούν σε κάθε ετικέτα tD.. ΑΠΟ χρησιμοποιώντας το CSS. Είναι πολύ απλοποιημένη. Ένα χαρακτηριστικό εφαρμόζεται στην κατακόρυφη ευθυγράμμιση των περιεχομένων των κυττάρων. Βλακεία.. Έχει επίσης τις έννοιες της - κάθετη ευθυγράμμιση στο κέντρο Μεσαίου, στην κορυφή Μπλουζα. και στο κάτω μέρος Κάτω μέρος Η βασική γραμμή (η γραμμή στην οποία βρίσκεται το κείμενο της τρέχουσας γραμμής). Τραπέζι φόντου Η εικόνα ή το χρώμα μπορεί επίσης να τεθεί τόσο για ολόκληρο τον πίνακα όσο και για ένα μόνο κελί, όλα εξαρτώνται από τους στόχους που στοιχειώνετε. Αυτό έχει οριστεί - για την ιδιότητα - χαρακτηριστικό Ιστορικό.Η τιμή του οποίου προδιαγράφεται η διαδρομή προς το απαιτούμενο γραφικό αρχείο. Για έγχρωμο φόντο - χαρακτηριστικό bgcolorΕδώ η τιμή είναι το όνομα του χρώματος. Τελικά Εδώ είναι γενικά και όλα όσα είναι απαραίτητα για το επίπεδο εισόδου. Στο τέλος του τμήματος σε τραπέζια κτιρίων σε HTML, η πρώτη γνωριμία σας με το HTML έχει τελειώσει. Μέσω Πίνακες σε HTML Μπορείτε να δημιουργήσετε απλά πρότυπα ιστοσελίδων, οπότε προτείνω να δημιουργήσετε την πρώτη σας πλήρη αυτή τη στιγμή. Το υλικό έχει περάσει αρκετά για αυτό. Προς τα εμπρός στην κατάκτηση της υπερσύγχυσης! / Στη συνέχεια, χωρίς το οποίο δεν είναι να δημιουργηθεί ένας ιστότοπος: ∼ ∼ Μια εργασία Δημιουργήστε έναν πίνακα και καθορίστε τις παραμέτρους του (πεδία και απόσταση μεταξύ των κυττάρων) μέσω στυλ. Απόφαση Ο πίνακας αποτελείται από σειρές και κελίες που μπορεί να περιέχουν κείμενο και σχέδια. Για να προσθέσετε έναν πίνακα σε μια ετικέτα που χρησιμοποιείται στην ιστοσελίδα . Αυτό το στοιχείο χρησιμεύει ως δοχείο για αντικείμενα που καθορίζουν τα περιεχόμενα του πίνακα. Οποιοσδήποτε πίνακας αποτελείται από σειρές και κύτταρα που καθορίζονται ανάλογα με ετικέτες και . Ο πίνακας πρέπει να περιέχει τουλάχιστον ένα κελί (Παράδειγμα 1). Επιτρέπεται αντί για ετικέτα Χρησιμοποιώ ετικέτα . Κείμενο στο κελί διακοσμημένο με ετικέτα Εμφανίζει τη γραμματοσειρά δανειολήπτη με λιπαρά εγκεφαλικά επεισόδια και ευθυγραμμίζεται στο κέντρο του κελιού. Διαφορετικά, η διαφορά μεταξύ των κυττάρων που δημιουργήθηκαν μέσω ετικετών και δεν. Παράδειγμα 1. Δημιουργία ενός πίνακα Html5 ie cr op sa fx Κύτταρο 1. Κύτταρο 2. Κύτταρο 3. Κύτταρο 4. Η σειρά είναι η θέση των κυττάρων και το είδος τους φαίνεται στο ΣΧ. ένας. Σύκο. 1. Το αποτέλεσμα της δημιουργίας ενός πίνακα με τέσσερα κελιά Χαρακτηριστικό συνοριακό ετικέτα Επιτρέπεται η προσθήκη μόνο με κενή τιμή ( ) ή ίσο με 1. Όλες οι άλλες τιμές δεν μεταφέρουν την επικύρωση. Για να ελέγξετε τα πεδία μέσα στα κύτταρα, χρησιμοποιήστε το Padding Property Style, το οποίο προστίθεται στον επιλογέα TD. Η απόσταση μεταξύ των κυττάρων αλλάζει την ιδιότητα διαχωρισμού των συνόρων (Παράδειγμα 2) προστίθεται στον επιλογέα του πίνακα, το πρόγραμμα περιήγησης IE το κατανοεί μόνο από την έκδοση 8.0. Παράδειγμα 2. Πεδία μέσα στα κύτταρα HTML5 CSS 2.1 IE CR OP SA FX Τίτλος 1. Τίτλος 2. Κύτταρο 3. Κύτταρο 4. Ο πίνακας με πεδία και η απόσταση μεταξύ των κυττάρων παρουσιάζονται στο ΣΧ. 2. Ένα παρόμοιο αποτέλεσμα μπορεί να επιτευχθεί με τη βοήθεια ενός λευκού πλαισίου γύρω από τα κύτταρα. Σύκο. 2. Πεδία σε επιτραπέζια κύτταρα Τυπώνω Επίσης ενδιαφέρον: Μέθοδοι για τη διεξαγωγή βαθμονόμησης για την μπαταρία Tablet στο Android OS Γιατί η εφαρμογή στην εφαρμογή Android δεν έχει εγκατασταθεί Alcatel Smartphones Alcatel One Touch Idol X: Χαρακτηριστικά και σχόλια Σας συνιστούμε να διαβάζετε: 2021-05-12 09:05:55 Ringtone Ringtone σε ZTE Αλλαγή κλήσης μελωδία μέσω των τυπικών ρυθμίσεων του λειτουργικού συστήματος Smartphone ZTE 2021-05-12 09:05:55 Πώς να επαναφέρετε τις ρυθμίσεις LG στις εργοστασιακές ρυθμίσεις: Οδηγίες και συστάσεις 2021-05-12 09:05:55 Υλικολογισμικό tablet beeline m2 beeline m2 firmware κατεβάσετε βήμα προς βήμα Συνεχίζοντας το θέμα: Λινάρι Πού είναι το SMS στο Android; Ο χρήστης στην ορολογία των προδιαγραφών) είναι ένα λογισμικό στο πλάι του συνδρομητή, το οποίο σας επιτρέπει να λαμβάνετε, να στείλετε, να δείτε και να επεξεργαστείτε ... × Wi-fi Λινάρι Παράθυρα παραπομπή Δίκτυο Εξυπνη τηλεόραση. Λύσεις Ανδροειδής Νέα άρθρα / Δημοφιλής 2021-05-12 09:05:55 Τι να κάνετε εάν το δισκίο δεν ενεργοποιηθεί Προγράμματα 2021-05-12 09:05:55 Πού να βρείτε MMS στο Android Λύσεις 2021-05-12 09:05:55 Το Lenovo Launcher δεν απαντά Παράθυρα 2021-05-12 09:05:55 Τι γίνεται αν δεν υπάρχει σύνδεση; Λινάρι 2021-05-12 09:05:55 Επίλυση των προβλημάτων του αρχείου στην κάρτα μνήμης Δρομολογητές 2021-05-12 09:05:55 Πώς να κάνετε το στιγμιότυπο οθόνης στο Android: Πιθανοί τρόποι Δρομολογητές Πώς τα στιγμιότυπα οθόνης γίνονται στο τηλέφωνο ή το tablet και όπου αποθηκεύονται πώς να κάνουν μια οθόνη στο Phillips Xenium Μήλο. Αποτυχία κάμερας στο "Samsung": Μέθοδοι εξάλειψης Γιατί η κάμερα δεν εστιάζει στο Samsung Galaxy παραπομπή Γυαλί δεν κολλάει γύρω από τις άκρες Λύσεις Τι είναι καλύτερο να επιλέξετε: Δορυφορική ή καλωδιακή τηλεόραση; Δίκτυο Εγγραφή ICQ - Απλά βήματα εγγραφής συσκευές Τρελά χέρια. Σταθμός σημειωματάριων. Για να βοηθήσετε το laptop: Σταθείτε τα χέρια σας για μισή ώρα ψύξης στάση για φορητό υπολογιστή με τα χέρια σας Δίκτυο Επαφές Διαφήμιση Σχετικά με τον ιστότοπο © comedu.ru 2021 Ιστοσελίδα σχετικά με τον τεχνικό υπολογιστών