Ipapaliwanag ng write-up na ito ang isang pamamaraan para sa pagdaragdag ng imahe sa loob ng table cell sa HTML.
Paano Magdagdag ng Imahe sa Loob ng Table Cell sa HTML?
Ang HTML ' Ang tag na ” ay ginagamit upang magpasok ng isang imahe sa isang cell ng talahanayan.
Syntax
Sundin ang syntax para mag-embed ng imahe sa loob ng table cell:
< td >< img src = '' lahat = '' lapad = '' >< / td >
dito:
- “
” element ay nagpapahiwatig ng table cell kung saan kailangang idagdag ang imahe. - “
'Ang tag ay ginagamit upang tukuyin ang larawan.
- “ src ” na katangian ay nagtatakda ng landas ng larawan.
- “ lahat ” ay nangangahulugang ang teksto na ipapakita sa screen kung sakaling mabigong mag-load ang larawan.
- “ lapad ” tinutukoy ang lapad ng larawan.
Halimbawa
Sa HTML file, lumikha ng isang talahanayan sa pamamagitan ng pagsunod sa ibinigay na mga tagubilin:
- “
'Ang elemento ay ginagamit upang lumikha ng isang talahanayan. - “
” elemento ay tumutukoy sa isang hilera. - “
' inaayos ang isang heading kung saan ang ' colspan ” Ang pag-aari ay nagpapahiwatig kung gaano karaming mga haligi ang dapat saklawin ng isang cell. - “
” lumilikha ng mga cell ng talahanayan para sa data. Ang ' Ang mga tag na may mga kinakailangang katangian ay ipinasok sa loob ng tag na ito upang i-embed ang mga larawan sa isang cell ng talahanayan: < mesa >
< tr >
< ika colspan = '3' istilo = 'laki ng font: 28px;' >Prutas at Gulay< / ika >
< / tr >
< tr >
< ika >Pangalan< / ika >
< ika istilo = 'lapad: 250px;' >Larawan< / ika >
< ika >Prutas / Gulay< / ika >
< / tr >
< tr >
< td >Mansanas< / td >
< td >< img src = '/images/apples.jpg' lahat = 'mansanas' lapad = '200' >< / td >
< td >Prutas< / td >
< / tr >
< tr >
< td >Karot< / ika >
< td >< img src = '/images/carrot.jpg' lahat = 'karot' lapad = '200' >< / ika >
< td >Gulay< / ika >
< / tr >
< tr >
< td >Kahel< / ika >
< td >< img src = '/images/orang.jpg' lahat = 'orange' lapad = '200' >< / ika >
< td >Prutas< / ika >
< / tr >
< / mesa >Mapapansing matagumpay na nagawa ang HTML table kasama ng mga naka-embed na larawan:
CSS
Ngayon, tatalakayin natin ang mga katangian ng CSS na ginamit upang itakda ang layout ng talahanayan.
Estilo ng 'table' Element
Una, i-access ang '
mesa {” elemento ayon sa pangalan ng tag at ilapat ang mga sumusunod na katangian:
text-align : gitna ;
lapad : 800px ;
border-collapse : pagbagsak ;
margin : sasakyan ;
laki ng font : 20px ;
}Ang paglalarawan ng code sa itaas ay ibinigay sa ibaba:
- “ text-align ” itinatakda ang pagkakahanay ng teksto.
- “ lapad ” tinutukoy ang lapad ng talahanayan.
- “ border-collapse ” Ang ari-arian ay tumutukoy kung ang hangganan ay gumuho o hindi.
- “ margin ” nagdaragdag ng espasyo sa paligid ng mesa.
- “ laki ng font ” ay tumutukoy sa laki ng font ng teksto ng talahanayan.
Istilo ang 'ika' at 'td' na Elemento
ika , td {
hangganan : 1px solid lila ;
}Dito, ang ' hangganan ” inaayos ng property ang hangganan sa paligid ng mga elemento sa pamamagitan ng pagtukoy sa mga halaga para sa lapad, istilo, at kulay ng hangganan.
Output
Ang post na ito ay tungkol sa paglalagay ng mga larawan sa cell ng talahanayan sa HTML.
Konklusyon
Upang magdagdag ng larawan sa loob ng “
” cell, gamitin ang “ 'tag sa loob ng HTML'
' elemento. Ang elementong “ ” ay tumutukoy sa “ src ” attribute upang ibigay ang URL ng larawan. Higit na partikular, upang ayusin ang laki ng larawan, idagdag ang ' taas 'at' lapad ” attribute sa loob ng tag na “
”. Ang blog na ito ay naglalarawan ng pamamaraan upang magdagdag ng isang imahe sa HTML table cell.
- “
- “