Tento popis vysvetlí postup pridávania obrázka do bunky tabuľky v HTML.
Ako pridať obrázok do bunky tabuľky v HTML?
HTML ' Značka ” sa používa na vloženie obrázka do bunky tabuľky.
Syntax
Ak chcete vložiť obrázok do bunky tabuľky, postupujte podľa syntaxe:
< td < img src = '' všetko = '' šírka = '' < / td >
Tu:
- “
” označuje bunku tabuľky, do ktorej je potrebné pridať obrázok. - “ Značka ” sa používa na určenie obrázka.
- “ src ” nastavuje cestu k obrázku.
- “ všetko “ označuje text, ktorý sa zobrazí na obrazovke v prípade, že sa obrázok nepodarí načítať.
- “ šírka “ určuje šírku obrázka.
Príklad
V súbore HTML vytvorte tabuľku podľa poskytnutých pokynov:
- “
” prvok sa používa na vytvorenie tabuľky. - “
” prvok určuje riadok. - “
“ upraví nadpis, v ktorom je „ colspan “ vlastnosť označuje, koľko stĺpcov by mala bunka pokrývať. - “
” vytvorí bunky tabuľky pre údaje. ' ” značky s požadovanými atribútmi sa vkladajú do tejto značky na vloženie obrázkov do bunky tabuľky: < tabuľky >
< tr >
< th colspan = '3' štýl = 'veľkosť písma: 28px;' >Ovocie a zelenina< / th >
< / tr >
< tr >
< th >Názov< / th >
< th štýl = 'width: 250px;' >Obrázok< / th >
< th > Ovocie / Zelenina< / th >
< / tr >
< tr >
< td >Apple< / td >
< td < img src = '/images/apples.jpg' všetko = 'jablko' šírka = '200' < / td >
< td >Ovocie< / td >
< / tr >
< tr >
< td >mrkva< / th >
< td < img src = '/images/carrot.jpg' všetko = 'mrkva' šírka = '200' < / th >
< td >Zelenina< / th >
< / tr >
< tr >
< td >Oranžová< / th >
< td < img src = '/images/orang.jpg' všetko = 'oranžový' šírka = '200' < / th >
< td >Ovocie< / th >
< / tr >
< / tabuľky >Je možné pozorovať, že HTML tabuľka bola úspešne vytvorená spolu s vloženými obrázkami:
CSS
Teraz budeme diskutovať o vlastnostiach CSS používaných na nastavenie rozloženia tabuľky.
Štýlový prvok „stôl“.
Najprv prejdite na „
tabuľky {” prvok podľa názvu značky a použite nasledujúce vlastnosti:
zarovnanie textu : stred ;
šírka : 800 pixelov ;
border-collapse : kolaps ;
marža : auto ;
veľkosť písma : 20 pixelov ;
}Popis vyššie uvedeného kódu je uvedený nižšie:
- “ zarovnanie textu ” nastavuje zarovnanie textu.
- “ šírka “ určuje šírku tabuľky.
- “ border-collapse ” vlastnosť definuje, či je orámovanie zbalené alebo nie.
- “ marža “ pridáva priestor okolo stola.
- “ veľkosť písma “ definuje veľkosť písma textu tabuľky.
Element štýlu „th“ a „td“.
th , td {
hranica : 1px pevný Fialová ;
}Tu je „ hranica Vlastnosť ” upravuje okraj okolo prvkov zadaním hodnôt pre šírku, štýl a farbu okraja.
Výkon
Tento príspevok je o vkladaní obrázkov do bunky tabuľky v HTML.
Záver
Ak chcete pridať obrázok do „
', použite ' “ tag v rámci HTML “ ' prvok. Prvok „ “ špecifikuje „ src ” na poskytnutie webovej adresy obrázka. Konkrétnejšie, ak chcete upraviť veľkosť obrázka, pridajte „ výška “ a „ šírka ” v rámci značky “ ”. Tento blog ilustruje postup pridania obrázka do bunky tabuľky HTML. - “