Pildi lisamine tabeli lahtrisse HTML-i

Pildi Lisamine Tabeli Lahtrisse Html I



Tabeleid kasutatakse andmete loetaval viisil korraldamiseks. Neil on diagrammilaadne paigutus andmete (nt statistika, piltide ja muu) kuvamiseks. HTML-is luuakse tabel, kasutades ' ' element ja ' ” silti kasutatakse pildi manustamiseks dokumenti. Märgendis „ ” kasutatud kõige olulisemad atribuudid on „ kõike ” ja „ src ”.

See kirjeldus selgitab HTML-i tabeli lahtrisse pildi lisamise protseduuri.

Kuidas lisada HTML-i tabeli lahtrisse pilti?

HTML' ” silti kasutatakse pildi lisamiseks tabeli lahtrisse.







Süntaks



Pildi tabeli lahtrisse manustamiseks järgige süntaksit:



< td >< img src = '' kõike = '' laius = '' >< / td >

Siin:





  • ” element tähistab tabeli lahtrit, kuhu pilt tuleb lisada.
  • ” kasutatakse pildi täpsustamiseks.
  • src ” atribuut määrab pildi tee.
  • kõike ” tähistab teksti, mis kuvatakse ekraanil juhul, kui pildi laadimine ebaõnnestub.
  • laius ” määrab pildi laiuse.

Näide

Looge HTML-failis tabel, järgides antud juhiseid.

  • ” elementi kasutatakse tabeli loomiseks.
  • ” element määrab rea.
  • ' kohandab pealkirja, kus ' colspan ” atribuut näitab, mitu veergu peaks lahter katma.
  • ” loob andmete jaoks tabelilahtrid. ' ” lisatakse sellesse märgendisse vajalike atribuutidega sildid, et manustada kujutised tabeli lahtrisse:
< laud >

< tr >

< th colspan = '3' stiilis = 'fondi suurus: 28 pikslit;' >Puu- ja köögiviljad< / th >

< / tr >

< tr >

< th >Nimi< / th >

< th stiilis = 'laius: 250 pikslit;' >Pilt< / th >

< th > Puuviljad / Köögiviljad< / th >

< / tr >

< tr >

< td >Õun< / td >

< td >< img src = '/images/apples.jpg' kõike = 'õun' laius = '200' >< / td >

< td > Puuviljad< / td >

< / tr >

< tr >

< td >Porgand< / th >

< td >< img src = '/images/carrot.jpg' kõike = 'porgand' laius = '200' >< / th >

< td >Köögiviljad< / th >

< / tr >

< tr >

< td >Oranž< / th >

< td >< img src = '/images/orang.jpg' kõike = 'oranž' laius = '200' >< / th >

< td > Puuviljad< / th >

< / tr >

< / laud >

Võib täheldada, et HTML-tabel on edukalt loodud koos manustatud piltidega:



CSS

Nüüd käsitleme tabeli paigutuse määramiseks kasutatud CSS-i atribuute.

Stiili 'laud' element

Esmalt avage ' ” element sildi nime järgi ja rakendage järgmisi atribuute:

laud {

teksti joondamine : Keskus ;

laius : 800 pikslit ;

piiri-kokkuvarisemine : kollaps ;

marginaal : auto ;

fondi suurus : 20 pikslit ;

}

Ülaltoodud koodi kirjeldus on toodud allpool:

  • teksti joondamine ” määrab teksti joonduse.
  • laius ” määrab tabeli laiuse.
  • piiri-kokkuvarisemine ” atribuut määrab, kas piir on ahendatud või mitte.
  • marginaal ” lisab laua ümber ruumi.
  • fondi suurus ” määrab tabeli teksti fondi suuruse.

Stiil “th” ja “td” element

th , td {

piir : 1px tahke lilla ;

}

Siin on ' piir ” atribuut reguleerib elementide ümber olevat äärist, määrates äärise laiuse, stiili ja värvi väärtused.

Väljund

See postitus puudutab piltide lisamist HTML-i tabeli lahtrisse.

Järeldus

Pildi lisamiseks jaotisesse ' ' lahtrit, kasutage ' 'märgend HTML-is' ” element. Element ' ' määrab ' src ” atribuut pildi URL-i esitamiseks. Täpsemalt, pildi suuruse reguleerimiseks lisage ' kõrgus ” ja „ laius ” atribuudid märgendis „ ”. See ajaveeb on illustreerinud HTML-i tabeli lahtrisse pildi lisamise protseduuri.