Ez az írás ismerteti a kép hozzáadásának folyamatát a táblázat cellájába HTML-ben.
Hogyan lehet képet hozzáadni a táblázat cellájához a HTML-ben?
A HTML ' ” címke egy kép beszúrására szolgál egy táblázatcellába.
Szintaxis
Kövesse a szintaxist egy kép beágyazásához a táblázat cellájába:
< td >< img src = '' minden = '' szélesség = '' >< / td >
Itt:
- '
” elem azt a táblázatcellát jelöli, ahová a képet hozzá kell adni. - '
” címke a kép megadására szolgál.
- ' src ” attribútum állítja be a kép elérési útját.
- ' minden ” azt a szöveget jelöli, amely akkor jelenik meg a képernyőn, ha a kép nem töltődik be.
- ' szélesség ” határozza meg a kép szélességét.
Példa
A HTML-fájlban hozzon létre egy táblázatot a megadott utasításokat követve:
- '
” elemet használjuk a táblázat létrehozásához. - '
” elem egy sort határoz meg. - '
' beállít egy címsort, ahol a ' colspan ” tulajdonság azt jelzi, hogy egy cellának hány oszlopot kell fednie. - '
” táblázatcellákat hoz létre az adatok számára. Az ' ” címkék a szükséges attribútumokkal vannak beszúrva ebbe a címkébe a képek táblázatcellába ágyazásához: < asztal >
< tr >
< th colspan = '3' stílus = 'font-size: 28px;' >Gyümölcsök és Zöldségek< / th >
< / tr >
< tr >
< th >Név< / th >
< th stílus = 'szélesség: 250 képpont;' >Kép< / th >
< th > Gyümölcs / Zöldség< / th >
< / tr >
< tr >
< td >Alma< / td >
< td >< img src = '/images/apples.jpg' minden = 'alma' szélesség = '200' >< / td >
< td >gyümölcs< / td >
< / tr >
< tr >
< td >Sárgarépa< / th >
< td >< img src = '/images/carrot.jpg' minden = 'sárgarépa' szélesség = '200' >< / th >
< td >Zöldség< / th >
< / tr >
< tr >
< td >Narancs< / th >
< td >< img src = '/images/orang.jpg' minden = 'narancs' szélesség = '200' >< / th >
< td >gyümölcs< / th >
< / tr >
< / asztal >Megfigyelhető, hogy a HTML tábla sikeresen elkészült a beágyazott képekkel együtt:
CSS
Most megvitatjuk a táblázat elrendezésének beállításához használt CSS-tulajdonságokat.
Stílus „asztal” elem
Először nyissa meg a „
asztal {” elemet címkenév szerint, és alkalmazza a következő tulajdonságokat:
szöveg igazítás : központ ;
szélesség : 800 képpont ;
határ-összeomlás : összeomlás ;
árrés : auto ;
betűméret : 20 képpont ;
}A fenti kód leírása az alábbiakban található:
- ' szöveg igazítás ” állítja be a szöveg igazítását.
- ' szélesség ” határozza meg az asztal szélességét.
- ' határ-összeomlás ” tulajdonság határozza meg, hogy a határ össze van-e csukva vagy sem.
- ' árrés ” helyet ad az asztal körül.
- ' betűméret ” határozza meg a táblázat szövegének betűméretét.
Stílus „th” és „td” elem
th , td {
határ : 1 képpont szilárd lila ;
}Itt a „ határ ” tulajdonság beállítja az elemek körüli szegélyt a szegélyszélesség, a stílus és a szín értékeinek megadásával.
Kimenet
Ez a bejegyzés arról szól, hogy képeket illesszen be a táblázat cellájába HTML-ben.
Következtetés
Kép hozzáadásához a „
' cellát használja a ' ' címke a HTML-ben '
” elemet. Az „ ” elem határozza meg a „ src ” attribútumot a kép URL-címének megadásához. Pontosabban, a képméret beállításához adja hozzá a „ magasság ” és „ szélesség ” attribútumokat az „
” címkén belül. Ez a blog bemutatja a kép HTML-táblázat cellájába való hozzáadásának folyamatát.
- '
- '