Šiame įraše bus paaiškinta vaizdo įtraukimo į lentelės langelį HTML procedūra.
Kaip pridėti vaizdą lentelės langelyje HTML?
HTML“ “ žyma naudojama vaizdui įterpti į lentelės langelį.
Sintaksė
Vykdykite sintaksę, kad įterptumėte vaizdą į lentelės langelį:
< td >< img src = '' viskas = '' plotis = '' >< / td >
Čia:
- “
“ elementas nurodo lentelės langelį, kuriame reikia pridėti vaizdą. - “
“ žyma naudojama vaizdui nurodyti.
- “ src “ atributas nustato vaizdo kelią.
- “ viskas “ reiškia tekstą, kuris bus rodomas ekrane, jei vaizdo nepavyktų įkelti.
- “ plotis “ nustato vaizdo plotį.
Pavyzdys
HTML faile sukurkite lentelę vadovaudamiesi pateiktomis instrukcijomis:
- “
“ elementas naudojamas kuriant lentelę. - “
“ elementas nurodo eilutę. - “
' koreguoja antraštę, kurioje ' colspan ypatybė reiškia, kiek stulpelių turi apimti langelis. - “
“ sukuria lentelės langelius duomenims. „ “ žymos su reikalingais atributais įterpiamos į šią žymą, kad vaizdai būtų įterpti į lentelės langelį: < stalo >
< tr >
< th colspan = '3' stilius = 'šrifto dydis: 28 pikseliai;' >Vaisiai ir daržovės< / th >
< / tr >
< tr >
< th >Vardas< / th >
< th stilius = 'plotis: 250 piks.'; >Nuotrauka< / th >
< th > Vaisiai / Daržovių< / th >
< / tr >
< tr >
< td >Obuolys< / td >
< td >< img src = '/images/apples.jpg' viskas = 'obuolys' plotis = '200' >< / td >
< td >Vaisiai< / td >
< / tr >
< tr >
< td >Morka< / th >
< td >< img src = '/images/carrot.jpg' viskas = 'morka' plotis = '200' >< / th >
< td >Daržovės< / th >
< / tr >
< tr >
< td >Oranžinė< / th >
< td >< img src = '/images/orang.jpg' viskas = 'oranžinė' plotis = '200' >< / th >
< td >Vaisiai< / th >
< / tr >
< / stalo >Galima pastebėti, kad HTML lentelė buvo sėkmingai sukurta kartu su įterptais vaizdais:
CSS
Dabar aptarsime CSS ypatybes, naudojamas lentelės išdėstymui nustatyti.
Stiliaus 'stalo' elementas
Pirmiausia pasiekite „
stalo {“ elementą pagal žymos pavadinimą ir pritaikykite šias ypatybes:
teksto lygiavimas : centras ;
plotis : 800 piks ;
siena-griūtis : griūtis ;
marža : automatinis ;
šrifto dydis : 20 piks ;
}Aukščiau pateikto kodo aprašymas pateikiamas žemiau:
- “ teksto lygiavimas “ nustato teksto lygiavimą.
- “ plotis “ nustato lentelės plotį.
- “ siena-griūtis “ ypatybė apibrėžia, ar siena sutraukta, ar ne.
- “ marža “ prideda vietos aplink stalą.
- “ šrifto dydis “ apibrėžia lentelės teksto šrifto dydį.
Stilius „th“ ir „td“ elementas
th , td {
siena : 1px kietas violetinė ;
}Čia „ siena ” ypatybė koreguoja kraštinę aplink elementus, nurodydama kraštinės pločio, stiliaus ir spalvos reikšmes.
Išvestis
Šis įrašas skirtas vaizdų įterpimui į HTML lentelės langelį.
Išvada
Norėdami pridėti vaizdą „
“ langelį, naudokite „ 'žyma HTML'
“ elementas. Elementas „ “ nurodo „ src “ atributą, kad pateiktumėte vaizdo URL. Tiksliau, norėdami pakoreguoti vaizdo dydį, pridėkite „ aukščio “ ir „ plotis “ atributus žymoje „
“. Šiame tinklaraštyje iliustruota procedūra, kaip pridėti vaizdą į HTML lentelės langelį.
- “
- “