यह राइट-अप HTML में टेबल सेल के अंदर इमेज जोड़ने की प्रक्रिया की व्याख्या करेगा।
HTML में टेबल सेल के अंदर इमेज कैसे जोड़ें?
एचटीएमएल ' ” टैग का उपयोग टेबल सेल में इमेज डालने के लिए किया जाता है।
वाक्य - विन्यास
टेबल सेल के अंदर इमेज एम्बेड करने के लिए सिंटैक्स का पालन करें:
< टीडी < आईएमजी स्रोत = '' सब कुछ = '' चौड़ाई = '' < / टीडी >
यहां:
- ' <टीडी> ”तत्व तालिका सेल को इंगित करता है जहां छवि को जोड़ने की आवश्यकता है।
- '
” टैग का उपयोग छवि को निर्दिष्ट करने के लिए किया जाता है।
- ' स्रोत ' विशेषता छवि का पथ निर्धारित करती है।
- ' सब कुछ ” उस पाठ को दर्शाता है जो छवि के लोड होने में विफल होने की स्थिति में स्क्रीन पर प्रदर्शित होगा।
- ' चौड़ाई 'छवि की चौड़ाई निर्धारित करता है।
उदाहरण
HTML फ़ाइल में, दिए गए निर्देशों का पालन करके तालिका बनाएँ:
- ' <टेबल> “Element का प्रयोग Table बनाने के लिए किया जाता है.
- '
'तत्व एक पंक्ति निर्दिष्ट करता है। - ' <वें> 'एक शीर्षक समायोजित करता है जहां' कॉल्सपन ” संपत्ति दर्शाती है कि एक सेल को कितने कॉलम कवर करने चाहिए।
- ' <टीडी> ” डेटा के लिए टेबल सेल बनाता है। '
< मेज़ >'टेबल सेल में छवियों को एम्बेड करने के लिए इस टैग के भीतर आवश्यक विशेषताओं वाले टैग डाले गए हैं:
< टीआर >
< वां कॉल्सपन = '3' शैली = 'फ़ॉन्ट-आकार: 28 पीएक्स;' >फल और सब्जियां< / वां >
< / टीआर >
< टीआर >
< वां >नाम< / वां >
< वां शैली = 'चौड़ाई: 250 पीएक्स;' >चित्र< / वां >
< वां > फल / सब्जी< / वां >
< / टीआर >
< टीआर >
< टीडी > सेब< / टीडी >
< टीडी < आईएमजी स्रोत = '/images/apples.jpg' सब कुछ = 'सेब' चौड़ाई = '200' < / टीडी >
< टीडी >फल< / टीडी >
< / टीआर >
< टीआर >
< टीडी >गाजर< / वां >
< टीडी < आईएमजी स्रोत = '/images/carrot.jpg' सब कुछ = 'गाजर' चौड़ाई = '200' < / वां >
< टीडी > सब्जी< / वां >
< / टीआर >
< टीआर >
< टीडी >नारंगी< / वां >
< टीडी < आईएमजी स्रोत = '/images/orang.jpg' सब कुछ = 'संतरा' चौड़ाई = '200' < / वां >
< टीडी >फल< / वां >
< / टीआर >
< / मेज़ >यह देखा जा सकता है कि एम्बेडेड छवियों के साथ HTML तालिका सफलतापूर्वक बनाई गई है:
सीएसएस
अब, हम टेबल के लेआउट को सेट करने के लिए उपयोग किए जाने वाले सीएसएस गुणों पर चर्चा करेंगे।
शैली 'तालिका' तत्व
सबसे पहले, 'पर पहुंचें' <टेबल> ” टैग नाम से तत्व और निम्नलिखित गुणों को लागू करें:
मेज़ {
पाठ संरेखित : केंद्र ;
चौड़ाई : 800 पीएक्स ;
सीमा-पतन : गिर जाना ;
अंतर : ऑटो ;
फ़ॉन्ट आकार : 20 पीएक्स ;
}उपरोक्त कोड का विवरण नीचे दिया गया है:
- ' पाठ संरेखित 'पाठ संरेखण सेट करता है।
- ' चौड़ाई 'तालिका की चौड़ाई निर्धारित करता है।
- ' सीमा-पतन ” संपत्ति परिभाषित करती है कि सीमा ढह गई है या नहीं।
- ' अंतर ” टेबल के चारों ओर जगह जोड़ता है।
- ' फ़ॉन्ट आकार 'तालिका के टेक्स्ट फ़ॉन्ट आकार को परिभाषित करता है।
शैली 'वें' और 'टीडी' तत्व
वां , टीडी {
सीमा : 1 पीएक्स ठोस बैंगनी ;
}यहां ही ' सीमा ” संपत्ति सीमा की चौड़ाई, शैली और रंग के लिए मान निर्दिष्ट करके तत्वों के चारों ओर की सीमा को समायोजित करती है।
उत्पादन
यह पोस्ट HTML में टेबल सेल में इमेज डालने के बारे में है।
निष्कर्ष
अंदर एक छवि जोड़ने के लिए ' <टेबल> 'सेल, का प्रयोग करें'
'HTML के भीतर टैग करें' <टीडी> ' तत्व। '
' तत्व निर्दिष्ट करता है ' स्रोत छवि URL प्रदान करने के लिए विशेषता। विशेष रूप से, छवि आकार को समायोजित करने के लिए, 'जोड़ें' कद ' और ' चौड़ाई '
' टैग के भीतर विशेषताएँ। इस ब्लॉग ने HTML टेबल सेल में इमेज जोड़ने की प्रक्रिया को समझाया है।