Denne oppskriften vil forklare en prosedyre for å legge til et bilde i tabellcellen i HTML.
Hvordan legge til et bilde i tabellcellen i HTML?
HTML-en ' ”-taggen brukes til å sette inn et bilde i en tabellcelle.
Syntaks
Følg syntaksen for å bygge inn et bilde i tabellcellen:
< td >< img src = '' alt = '' bredde = '' >< / td >
Her:
- '
”-elementet indikerer tabellcellen der bildet må legges til. - '
”-taggen brukes til å spesifisere bildet.
- ' src ”-attributt setter bildets bane.
- ' alt ” betyr teksten som vil vises på skjermen i tilfelle bildet ikke blir lastet.
- ' bredde ” bestemmer bildets bredde.
Eksempel
Lag en tabell i HTML-filen ved å følge instruksjonene:
- '
'-elementet brukes til å lage en tabell. - '
”-elementet spesifiserer en rad. - '
' justerer en overskrift der ' colspan ”-egenskapen angir hvor mange kolonner en celle skal dekke. - '
' oppretter tabellceller for data. « '-tagger med de nødvendige attributtene settes inn i denne taggen for å bygge inn bildene i en tabellcelle: < bord >
< tr >
< th colspan = '3' stil = 'font-size: 28px;' >Frukt og grønnsaker< / th >
< / tr >
< tr >
< th >Navn< / th >
< th stil = 'bredde: 250px;' >Bilde< / th >
< th > Frukt / Grønnsak< / th >
< / tr >
< tr >
< td >Eple< / td >
< td >< img src = '/images/apples.jpg' alt = 'eple' bredde = '200' >< / td >
< td >frukt< / td >
< / tr >
< tr >
< td >Gulrot< / th >
< td >< img src = '/images/carrot.jpg' alt = 'gulrot' bredde = '200' >< / th >
< td >grønnsak< / th >
< / tr >
< tr >
< td >Oransje< / th >
< td >< img src = '/images/orang.jpg' alt = 'oransje' bredde = '200' >< / th >
< td >frukt< / th >
< / tr >
< / bord >Det kan observeres at HTML-tabellen har blitt opprettet sammen med innebygde bilder:
CSS
Nå vil vi diskutere CSS-egenskapene som brukes til å angi oppsettet til tabellen.
Stil 'tabell' Element
Først får du tilgang til '
bord {' element etter tagnavn og bruk følgende egenskaper:
tekstjustering : senter ;
bredde : 800 piksler ;
grensekollaps : kollapse ;
margin : auto ;
skriftstørrelse : 20 piksler ;
}Beskrivelsen av koden ovenfor er gitt nedenfor:
- ' tekstjustering ' angir tekstjusteringen.
- ' bredde ” bestemmer bordets bredde.
- ' grensekollaps ” egenskap definerer om grensen er kollapset eller ikke.
- ' margin ” legger til plass rundt bordet.
- ' skriftstørrelse ' definerer tabellens tekstskriftstørrelse.
Stil 'th' og 'td' Element
th , td {
grense : 1 px fast lilla ;
}Her er ' grense ”-egenskapen justerer rammen rundt elementene ved å spesifisere verdiene for kantlinjebredde, stil og farge.
Produksjon
Dette innlegget handler om å sette inn bilder i tabellcellen i HTML.
Konklusjon
For å legge til et bilde i '
' celle, bruk ' '-tag i HTML-en '
' element. « »-elementet spesifiserer « src ”-attributt for å oppgi nettadressen til bildet. Mer spesifikt, for å justere bildestørrelsen, legg til ' høyde ' og ' bredde '-attributter i '
'-taggen. Denne bloggen har illustrert prosedyren for å legge til et bilde i HTML-tabellcellen.
- '
- '