Pridanie obrázka do bunky tabuľky v HTML

Pridanie Obrazka Do Bunky Tabulky V Html



Tabuľky sa používajú na usporiadanie údajov čitateľným spôsobom. Majú rozloženie podobné grafu na zobrazenie údajov, ako sú štatistiky, obrázky a ďalšie. V HTML sa tabuľka vytvorí pomocou „ prvok a prvok Značka ” sa používa na vloženie obrázka do dokumentu. Najdôležitejšie atribúty použité v značke „ “ sú „ všetko “ a „ src “.

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 „ ” prvok podľa názvu značky a použite nasledujúce vlastnosti:

tabuľky {

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.