Šis raksts izskaidro procedūru attēla pievienošanai tabulas šūnā HTML.
Kā pievienot attēlu tabulas šūnā HTML?
HTML ' ” tags tiek izmantots, lai ievietotu attēlu tabulas šūnā.
Sintakse
Izpildiet sintakse, lai iegultu attēlu tabulas šūnā:
< td >< img src = '' viss = '' platums = '' >< / td >
Šeit:
- '
” elements norāda tabulas šūnu, kurā jāpievieno attēls. - '
” atzīme tiek izmantota, lai norādītu attēlu.
- ' src ” atribūts nosaka attēla ceļu.
- ' viss ” apzīmē tekstu, kas tiks parādīts ekrānā gadījumā, ja attēlu neizdosies ielādēt.
- ' platums ” nosaka attēla platumu.
Piemērs
HTML failā izveidojiet tabulu, izpildot sniegtos norādījumus:
- '
” elements tiek izmantots, lai izveidotu tabulu. - '
” elements norāda rindu. - '
” pielāgo virsrakstu, kur “ colspan ” rekvizīts norāda, cik kolonnu šūnai ir jāaptver. - '
” izveido tabulas šūnas datiem. ' ” tagi ar nepieciešamajiem atribūtiem tiek ievietoti šajā tagā, lai iegultu attēlus tabulas šūnā: < tabula >
< tr >
< th colspan = '3' stils = 'fonta izmērs: 28 pikseļi;' >Augļi un dārzeņi< / th >
< / tr >
< tr >
< th >Vārds< / th >
< th stils = 'platums: 250 pikseļi;' >Attēls< / th >
< th > Augļi / Dārzeņu< / th >
< / tr >
< tr >
< td >Ābols< / td >
< td >< img src = '/images/apples.jpg' viss = 'ābols' platums = '200' >< / td >
< td >Augļi< / td >
< / tr >
< tr >
< td >Burkāns< / th >
< td >< img src = '/images/carrot.jpg' viss = 'burkāns' platums = '200' >< / th >
< td >Dārzeņu< / th >
< / tr >
< tr >
< td >Oranžs< / th >
< td >< img src = '/images/orang.jpg' viss = 'apelsīns' platums = '200' >< / th >
< td >Augļi< / th >
< / tr >
< / tabula >Var novērot, ka HTML tabula ir veiksmīgi izveidota kopā ar iegultiem attēliem:
CSS
Tagad mēs apspriedīsim CSS rekvizītus, kas tiek izmantoti, lai iestatītu tabulas izkārtojumu.
Stila “galda” elements
Vispirms piekļūstiet '
tabula {” elementu pēc taga nosaukuma un lietojiet šādus rekvizītus:
teksta līdzināšana : centrs ;
platums : 800 pikseļi ;
robeža-sabrukums : sabrukt ;
starpība : auto ;
fonta izmērs : 20 pikseļi ;
}Iepriekš minētā koda apraksts ir sniegts zemāk:
- ' teksta līdzināšana ” iestata teksta līdzinājumu.
- ' platums ” nosaka tabulas platumu.
- ' robeža-sabrukums ” rekvizīts nosaka, vai robeža ir sakļauta vai nav.
- ' starpība ” pievieno vietu ap galdu.
- ' fonta izmērs ” nosaka tabulas teksta fonta lielumu.
Stils “th” un “td” elements
th , td {
robeža : 1 pikselis ciets violets ;
}Šeit “ robeža ” rekvizīts pielāgo apmali ap elementiem, norādot apmales platuma, stila un krāsas vērtības.
Izvade
Šī ziņa ir par attēlu ievietošanu HTML tabulas šūnā.
Secinājums
Lai pievienotu attēlu '
' šūnu, izmantojiet ' 'tags HTML'
” elements. Elements “ ” norāda “ src ” atribūtu, lai nodrošinātu attēla URL. Konkrētāk, lai pielāgotu attēla izmēru, pievienojiet ' augstums ' un ' platums ” atribūti tagā “
”. Šajā emuārā ir ilustrēta procedūra attēla pievienošanai HTML tabulas šūnā.
- '
- '