Denna uppskrivning kommer att förklara en procedur för att lägga till en bild i tabellcellen i HTML.
Hur lägger man till en bild inuti tabellcellen i HTML?
HTML ' ”-taggen används för att infoga en bild i en tabellcell.
Syntax
Följ syntaxen för att bädda in en bild i tabellcellen:
< td >< img src = '' allt = '' bredd = '' >< / td >
Här:
- '
”-element indikerar tabellcellen där bilden behöver läggas till. - '
”-taggen används för att specificera bilden.
- ' src ”-attributet anger bildens sökväg.
- ' allt ” betecknar texten som kommer att visas på skärmen om bilden inte kan laddas.
- ' bredd ” bestämmer bildens bredd.
Exempel
Skapa en tabell i HTML-filen genom att följa instruktionerna:
- '
”-elementet används för att skapa en tabell. - '
”-elementet anger en rad. - '
' justerar en rubrik där ' colspan Egenskapen anger hur många kolumner en cell ska täcka. - '
” skapar tabellceller för data. den ' ”-taggar med de nödvändiga attributen infogas i denna tagg för att bädda in bilderna i en tabellcell: < tabell >
< tr >
< th colspan = '3' stil = 'font-size: 28px;' >Frukt och grönsaker< / th >
< / tr >
< tr >
< th >Namn< / th >
< th stil = 'bredd: 250px;' >Bild< / th >
< th > Frukt / Grönsak< / th >
< / tr >
< tr >
< td >äpple< / td >
< td >< img src = '/images/apples.jpg' allt = 'äpple' bredd = '200' >< / td >
< td >frukt< / td >
< / tr >
< tr >
< td >morot< / th >
< td >< img src = '/images/carrot.jpg' allt = 'morot' bredd = '200' >< / th >
< td >Grönsak< / th >
< / tr >
< tr >
< td >Orange< / th >
< td >< img src = '/images/orang.jpg' allt = 'orange' bredd = '200' >< / th >
< td >frukt< / th >
< / tr >
< / tabell >Det kan observeras att HTML-tabellen har skapats framgångsrikt tillsammans med inbäddade bilder:
CSS
Nu kommer vi att diskutera CSS-egenskaperna som används för att ställa in tabellens layout.
Stil 'bord' Element
Gå först till '
tabell {' element efter taggnamn och tillämpa följande egenskaper:
textjustera : Centrum ;
bredd : 800 pixlar ;
gränskollaps : kollaps ;
marginal : bil ;
textstorlek : 20px ;
}Beskrivningen av ovanstående kod ges nedan:
- ' textjustera ” ställer in textjusteringen.
- ' bredd ” bestämmer bordets bredd.
- ' gränskollaps ” egenskapen definierar om gränsen är kollapsad eller inte.
- ' marginal ” ger utrymme runt bordet.
- ' textstorlek ” definierar tabellens teckensnittsstorlek.
Stil 'th' och 'td' Element
th , td {
gräns : 1 px fast lila ;
}Här, ' gräns Egenskapen justerar kanten runt elementen genom att ange värden för kantbredd, stil och färg.
Produktion
Det här inlägget handlar om att infoga bilder i tabellcellen i HTML.
Slutsats
För att lägga till en bild i '
' cell, använd ' '-taggen i HTML-koden '
' element. Elementet ' ' anger ' src ”-attribut för att tillhandahålla bildens URL. Mer specifikt, för att justera bildstorleken, lägg till ' höjd ' och ' bredd '-attribut i taggen '
'. Den här bloggen har illustrerat proceduren för att lägga till en bild i HTML-tabellcellen.
- '
- '