HTMLలోని టేబుల్ సెల్ లోపల చిత్రాన్ని జోడించే విధానాన్ని ఈ వ్రాత-అప్ వివరిస్తుంది.
HTMLలో టేబుల్ సెల్ లోపల చిత్రాన్ని ఎలా జోడించాలి?
HTML ' పట్టిక సెల్‌లో చిత్రాన్ని చొప్పించడానికి ” ట్యాగ్ ఉపయోగించబడుతుంది.
వాక్యనిర్మాణం
పట్టిక సెల్ లోపల చిత్రాన్ని పొందుపరచడానికి వాక్యనిర్మాణాన్ని అనుసరించండి:
< td >< img src = '' ప్రతిదీ = '' వెడల్పు = '' >< / td >
ఇక్కడ:
- '
” మూలకం చిత్రాన్ని జోడించాల్సిన పట్టిక గడిని సూచిస్తుంది. - '
” ట్యాగ్ చిత్రాన్ని పేర్కొనడానికి ఉపయోగించబడుతుంది.
- ' src ” లక్షణం చిత్రం యొక్క మార్గాన్ని సెట్ చేస్తుంది.
- ' ప్రతిదీ ” చిత్రం లోడ్ చేయడంలో విఫలమైతే స్క్రీన్‌పై ప్రదర్శించబడే వచనాన్ని సూచిస్తుంది.
- ' వెడల్పు ” చిత్రం వెడల్పును నిర్ణయిస్తుంది.
ఉదాహరణ
HTML ఫైల్‌లో, అందించిన సూచనలను అనుసరించడం ద్వారా పట్టికను సృష్టించండి:
- ' <పట్టిక> పట్టికను రూపొందించడానికి మూలకం ఉపయోగించబడుతుంది.
- '
” మూలకం వరుసను నిర్దేశిస్తుంది. - ' <వ> '' అనే శీర్షికను సర్దుబాటు చేస్తుంది కోల్స్పాన్ ” ఆస్తి అనేది సెల్ ఎన్ని నిలువు వరుసలను కవర్ చేయాలి అని సూచిస్తుంది.
- '
”డేటా కోసం టేబుల్ సెల్‌లను సృష్టిస్తుంది. ది ' ” చిత్రాలను టేబుల్ సెల్‌లో పొందుపరచడానికి అవసరమైన లక్షణాలతో ట్యాగ్‌లు ఈ ట్యాగ్‌లో చొప్పించబడతాయి: < పట్టిక >
< tr >
< వ కోల్స్పాన్ = '3' శైలి = 'ఫాంట్ పరిమాణం: 28px;' >పండ్లు మరియు కూరగాయలు< / వ >
< / tr >
< tr >
< వ >పేరు< / వ >
< వ శైలి = 'వెడల్పు: 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 లక్షణాలను చర్చిస్తాము.
శైలి 'టేబుల్' ఎలిమెంట్
మొదట, 'ని యాక్సెస్ చేయండి <పట్టిక> ” ట్యాగ్ పేరు ద్వారా మూలకం మరియు క్రింది లక్షణాలను వర్తింపజేయండి:
పట్టిక {
టెక్స్ట్-అలైన్ : కేంద్రం ;
వెడల్పు : 800px ;
సరిహద్దు-కూలిపోవడం : కూలిపోతుంది ;
మార్జిన్ : దానంతట అదే ;
ఫాంట్ పరిమాణం : 20px ;
}పై కోడ్ యొక్క వివరణ క్రింద ఇవ్వబడింది:
- ' టెక్స్ట్-అలైన్ ” వచన అమరికను సెట్ చేస్తుంది.
- ' వెడల్పు ” పట్టిక వెడల్పును నిర్ణయిస్తుంది.
- ' సరిహద్దు-కూలిపోవడం 'సరిహద్దు కూలిపోయిందా లేదా అనేది ఆస్తి నిర్వచిస్తుంది.
- ' మార్జిన్ ” టేబుల్ చుట్టూ ఖాళీని జోడిస్తుంది.
- ' ఫాంట్ పరిమాణం ” టేబుల్ యొక్క టెక్స్ట్ ఫాంట్ పరిమాణాన్ని నిర్వచిస్తుంది.
శైలి 'వ' మరియు 'టిడి' మూలకం
వ , td {
సరిహద్దు : 1px ఘనమైన ఊదా ;
}ఇక్కడ, ' సరిహద్దు ” ఆస్తి సరిహద్దు వెడల్పు, శైలి మరియు రంగు కోసం విలువలను పేర్కొనడం ద్వారా మూలకాల చుట్టూ సరిహద్దును సర్దుబాటు చేస్తుంది.
అవుట్‌పుట్
ఈ పోస్ట్ HTMLలోని టేబుల్ సెల్‌లో చిత్రాలను చొప్పించడం గురించి.
ముగింపు
లోపల చిత్రాన్ని జోడించడానికి “ <పట్టిక> 'సెల్, ఉపయోగించండి'
'HTML' లోపల ట్యాగ్
' మూలకం. “ ” మూలకం “ని నిర్దేశిస్తుంది src ” చిత్రం URLని అందించడానికి లక్షణం. మరింత ప్రత్యేకంగా, చిత్ర పరిమాణాన్ని సర్దుబాటు చేయడానికి, “ని జోడించండి ఎత్తు 'మరియు' వెడల్పు '
' ట్యాగ్‌లోని లక్షణాలు. ఈ బ్లాగ్ HTML టేబుల్ సెల్‌లో చిత్రాన్ని జోడించే విధానాన్ని వివరించింది.
- '