Tämä kirjoitus selittää prosessin kuvan lisäämiseksi taulukon soluun HTML:ssä.
Kuinka lisätä kuva taulukon solun sisään HTML:ään?
HTML ' ” -tunnistetta käytetään kuvan lisäämiseen taulukon soluun.
Syntaksi
Upota kuva taulukon soluun noudattamalla syntaksia:
< td >< img src = '' kaikki = '' leveys = '' >< / td >
Tässä:
- '
”-elementti osoittaa taulukon solun, johon kuva on lisättävä. - '
” -tunnistetta käytetään kuvan määrittämiseen.
- ' src ”-attribuutti määrittää kuvan polun.
- ' kaikki ” tarkoittaa tekstiä, joka näytetään näytöllä, jos kuvan lataaminen epäonnistuu.
- ' leveys ” määrittää kuvan leveyden.
Esimerkki
Luo taulukko HTML-tiedostoon noudattamalla annettuja ohjeita:
- '
”-elementtiä käytetään taulukon luomiseen. - '
”-elementti määrittää rivin. - '
' säätää otsikon, jossa ' colspan ”-ominaisuus ilmaisee kuinka monta saraketta solun tulee peittää. - '
” luo taulukkosolut tiedoille. ' ' -tunnisteet, joissa on vaaditut attribuutit, lisätään tähän tunnisteeseen kuvien upottamiseksi taulukon soluun: < pöytä >
< tr >
< th colspan = '3' tyyli = 'fonttikoko: 28px;' >Hedelmät ja vihannekset< / th >
< / tr >
< tr >
< th >Nimi< / th >
< th tyyli = 'width: 250px;' >kuva< / th >
< th > hedelmiä / Kasvis < / th >
< / tr >
< tr >
< td >Omena< / td >
< td >< img src = '/images/apples.jpg' kaikki = 'omena' leveys = '200' >< / td >
< td >Hedelmät< / td >
< / tr >
< tr >
< td >Porkkana< / th >
< td >< img src = '/images/carrot.jpg' kaikki = 'porkkana' leveys = '200' >< / th >
< td >Kasvis< / th >
< / tr >
< tr >
< td >Oranssi< / th >
< td >< img src = '/images/orang.jpg' kaikki = 'oranssi' leveys = '200' >< / th >
< td >Hedelmät< / th >
< / tr >
< / pöytä >Voidaan havaita, että HTML-taulukko on luotu onnistuneesti upotettujen kuvien kanssa:
CSS
Nyt keskustelemme CSS-ominaisuuksista, joita käytetään taulukon asettelun määrittämiseen.
Tyyli 'pöytä' elementti
Avaa ensin '
pöytä {” -elementti tunnisteen nimen mukaan ja käytä seuraavia ominaisuuksia:
tekstin tasaus : keskusta ;
leveys : 800 pikseliä ;
rajan romahtaminen : romahdus ;
marginaali : auto ;
Fonttikoko : 20px ;
}Yllä olevan koodin kuvaus on alla:
- ' tekstin tasaus ” määrittää tekstin tasauksen.
- ' leveys ” määrittää pöydän leveyden.
- ' rajan romahtaminen ”-ominaisuus määrittää, onko raja tiivistetty vai ei.
- ' marginaali ” lisää tilaa pöydän ympärille.
- ' Fonttikoko ” määrittää taulukon tekstin kirjasinkoon.
Tyyli 'th' ja 'td' Element
th , td {
rajaa : 1px kiinteä violetti ;
}Täällä ' rajaa ”-ominaisuus säätää reunusta elementtien ympärillä määrittämällä reunuksen leveyden, tyylin ja värin arvot.
Lähtö
Tämä viesti koskee kuvien lisäämistä HTML-taulukon soluun.
Johtopäätös
Voit lisätä kuvan '
'-solua, käytä ' '-tunniste HTML-koodissa'
”elementtiä. ' '-elementti määrittää ' src '-attribuutti antaa kuvan URL-osoitteen. Tarkemmin sanottuna voit säätää kuvan kokoa lisäämällä ' korkeus ' ja ' leveys '-attribuutteja '
'-tunnisteen sisällä. Tämä blogi on havainnollistanut kuvan lisäämisen HTML-taulukon soluun.
- '
- '