Denne opskrivning vil forklare en procedure for tilføjelse af et billede inde i tabelcellen i HTML.
Sådan tilføjes et billede inde i tabelcellen i HTML?
HTML ' ” tag bruges til at indsætte et billede i en tabelcelle.
Syntaks
Følg syntaksen for at integrere et billede i tabelcellen:
< td >< img src = '' alt = '' bredde = '' >< / td >
Her:
- “
” element angiver den tabelcelle, hvor billedet skal tilføjes. - “
” tag bruges til at angive billedet.
- “ src ”-attribut angiver billedets sti.
- “ alt ” angiver den tekst, der vil blive vist på skærmen, hvis billedet ikke indlæses.
- “ bredde ” bestemmer billedets bredde.
Eksempel
I HTML-filen skal du oprette en tabel ved at følge de medfølgende instruktioner:
- “
” element bruges til at oprette en tabel. - “
” element angiver en række. - “
' justerer en overskrift, hvor ' colspan egenskaben angiver, hvor mange kolonner en celle skal dække. - “
” opretter tabelceller til data. Det ' ” tags med de nødvendige attributter indsættes i dette tag for at indlejre billederne i en tabelcelle: < bord >
< tr >
< th colspan = '3' stil = 'font-size: 28px;' >Frugt og Grøntsager< / th >
< / tr >
< tr >
< th >Navn< / th >
< th stil = 'bredde: 250px;' >Billede< / th >
< th > Frugt / Grøntsager< / th >
< / tr >
< tr >
< td >æble< / td >
< td >< img src = '/images/apples.jpg' alt = 'æble' bredde = '200' >< / td >
< td >frugt< / td >
< / tr >
< tr >
< td >Gulerod< / th >
< td >< img src = '/images/carrot.jpg' alt = 'gulerod' bredde = '200' >< / th >
< td >grøntsag< / th >
< / tr >
< tr >
< td >Orange< / th >
< td >< img src = '/images/orang.jpg' alt = 'orange' bredde = '200' >< / th >
< td >frugt< / th >
< / tr >
< / bord >Det kan observeres, at HTML-tabellen er blevet oprettet med succes sammen med indlejrede billeder:
CSS
Nu vil vi diskutere de CSS-egenskaber, der bruges til at indstille layoutet af tabellen.
Stil 'bord' Element
Først skal du få adgang til '
bord {'-element efter tagnavn og anvend følgende egenskaber:
tekstjustering : centrum ;
bredde : 800px ;
grænse-kollaps : bryder sammen ;
margen : auto ;
skriftstørrelse : 20 px ;
}Beskrivelsen af ovenstående kode er givet nedenfor:
- “ tekstjustering ” indstiller tekstjusteringen.
- “ bredde ” bestemmer bordets bredde.
- “ grænse-kollaps ” egenskab definerer, om grænsen er kollapset eller ej.
- “ margen ” tilføjer plads omkring bordet.
- “ skriftstørrelse ” definerer tabellens tekstskriftstørrelse.
Stil 'th' og 'td' Element
th , td {
grænse : 1 px solid lilla ;
}Her er ' grænse ” egenskab justerer grænsen omkring elementerne ved at angive værdierne for kantbredde, stil og farve.
Produktion
Dette indlæg handler om at indsætte billeder i tabelcellen i HTML.
Konklusion
For at tilføje et billede i '
' celle, brug ' '-tag i HTML-koden '
' element. ' '-elementet angiver ' src ” attribut for at angive billedwebadressen. Mere specifikt, for at justere billedstørrelsen, skal du tilføje ' højde ' og ' bredde '-attributter i '
'-tagget. Denne blog har illustreret proceduren for at tilføje et billede i HTML-tabelcellen.
- “
- “