Αυτή η εγγραφή θα εξηγήσει μια διαδικασία για την προσθήκη μιας εικόνας μέσα στο κελί του πίνακα σε HTML.
Πώς να προσθέσετε μια εικόνα μέσα στο κελί του πίνακα σε HTML;
Η HTML ' Η ετικέτα ' χρησιμοποιείται για την εισαγωγή μιας εικόνας σε ένα κελί πίνακα.
Σύνταξη
Ακολουθήστε τη σύνταξη για να ενσωματώσετε μια εικόνα μέσα στο κελί του πίνακα:
< td >< img src = '' τα παντα = '' πλάτος = '' >< / td >
Εδώ:
- '
Το στοιχείο ' υποδεικνύει το κελί του πίνακα όπου πρέπει να προστεθεί η εικόνα. - '
Η ετικέτα ' χρησιμοποιείται για τον καθορισμό της εικόνας.
- ' src Το χαρακτηριστικό ' ορίζει τη διαδρομή της εικόνας.
- ' τα παντα ” σημαίνει το κείμενο που θα εμφανιστεί στην οθόνη σε περίπτωση που η εικόνα δεν φορτώσει.
- ' πλάτος ' καθορίζει το πλάτος της εικόνας.
Παράδειγμα
Στο αρχείο HTML, δημιουργήστε έναν πίνακα ακολουθώντας τις παρεχόμενες οδηγίες:
- ' <πίνακας> Το στοιχείο ' χρησιμοποιείται για τη δημιουργία πίνακα.
- '
Το στοιχείο ' καθορίζει μια σειρά. - '
' προσαρμόζει μια επικεφαλίδα όπου το ' colspan Η ιδιότητα δηλώνει πόσες στήλες πρέπει να καλύπτει ένα κελί. - '
” δημιουργεί κελιά πίνακα για δεδομένα. Ο ' Οι ετικέτες με τα απαιτούμενα χαρακτηριστικά εισάγονται σε αυτήν την ετικέτα για να ενσωματωθούν οι εικόνες σε ένα κελί πίνακα: < τραπέζι >
< tr >
< ου colspan = '3' στυλ = 'μέγεθος γραμματοσειράς: 28 px;' >Φρούτα και λαχανικά< / ου >
< / tr >
< tr >
< ου >Όνομα< / ου >
< ου στυλ = 'width: 250px;' >Εικόνα< / ου >
< ου > Φρούτα / Λαχανικά< / ου >
< / tr >
< tr >
< td >Μήλο< / td >
< td >< img src = '/images/apples.jpg' τα παντα = 'μήλο' πλάτος = '200' >< / td >
< td >Φρούτα< / td >
< / tr >
< tr >
< td >Καρότο< / ου >
< td >< img src = '/images/carrot.jpg' τα παντα = 'καρότο' πλάτος = '200' >< / ου >
< td >Λαχανικό< / ου >
< / tr >
< tr >
< td >Πορτοκαλί< / ου >
< td >< img src = '/images/orang.jpg' τα παντα = 'πορτοκάλι' πλάτος = '200' >< / ου >
< td >Φρούτα< / ου >
< / tr >
< / τραπέζι >Μπορεί να παρατηρηθεί ότι ο πίνακας HTML έχει δημιουργηθεί με επιτυχία μαζί με ενσωματωμένες εικόνες:
CSS
Τώρα, θα συζητήσουμε τις ιδιότητες CSS που χρησιμοποιούνται για να ορίσετε τη διάταξη του πίνακα.
Στοιχείο «τραπέζιου» στυλ
Πρώτα, αποκτήστε πρόσβαση στο ' <πίνακας> ' στοιχείο ανά όνομα ετικέτας και εφαρμόστε τις ακόλουθες ιδιότητες:
τραπέζι {
στοίχιση κειμένου : κέντρο ;
πλάτος : 800 px ;
σύνορα-κατάρρευση : κατάρρευση ;
περιθώριο : αυτο ;
μέγεθος γραμματοσειράς : 20 εικονοστοιχεία ;
}Η περιγραφή του παραπάνω κώδικα δίνεται παρακάτω:
- ' στοίχιση κειμένου ” ορίζει τη στοίχιση κειμένου.
- ' πλάτος ' καθορίζει το πλάτος του πίνακα.
- ' σύνορα-κατάρρευση Η ιδιότητα καθορίζει εάν το σύνορο έχει καταρρεύσει ή όχι.
- ' περιθώριο ” προσθέτει χώρο γύρω από το τραπέζι.
- ' μέγεθος γραμματοσειράς ' ορίζει το μέγεθος γραμματοσειράς κειμένου του πίνακα.
Στυλ 'th' και 'td' Στοιχείο
ου , td {
σύνορο : 1 εικονοστοιχείο στερεός μωβ ;
}Εδώ, το « σύνορο Η ιδιότητα ” προσαρμόζει το περίγραμμα γύρω από τα στοιχεία καθορίζοντας τις τιμές για το πλάτος περιγράμματος, το στυλ και το χρώμα.
Παραγωγή
Αυτή η ανάρτηση έχει να κάνει με την εισαγωγή εικόνων στο κελί του πίνακα σε HTML.
συμπέρασμα
Για να προσθέσετε μια εικόνα μέσα στο ' <πίνακας> ' κελί, χρησιμοποιήστε το '
'ετικέτα εντός του HTML'
' στοιχείο. Το στοιχείο ' ' καθορίζει το ' src ” για την παροχή της διεύθυνσης URL της εικόνας. Πιο συγκεκριμένα, για να ρυθμίσετε το μέγεθος της εικόνας, προσθέστε το ' ύψος ' και ' πλάτος ' χαρακτηριστικά μέσα στην ετικέτα '
'. Αυτό το ιστολόγιο επεξηγεί τη διαδικασία για την προσθήκη μιας εικόνας στο κελί του πίνακα HTML.
- '
- '