Tento zápis vysvětlí postup pro přidání obrázku do buňky tabulky v HTML.
Jak přidat obrázek do buňky tabulky v HTML?
HTML' ” tag se používá k vložení obrázku do buňky tabulky.
Syntax
Chcete-li vložit obrázek do buňky tabulky, postupujte podle syntaxe:
< td < img src = '' všechno = '' šířka = '' < / td >
Tady:
- “
” označuje buňku tabulky, kam je potřeba přidat obrázek. - “
Značka ” se používá k určení obrázku.
- “ src ” nastavuje cestu k obrázku.
- “ všechno “ označuje text, který se zobrazí na obrazovce v případě, že se nepodaří načíst obrázek.
- “ šířka “ určuje šířku obrázku.
Příklad
V souboru HTML vytvořte tabulku podle poskytnutých pokynů:
- “
” prvek se používá k vytvoření tabulky. - “
” prvek určuje řádek. - “
“ upravuje nadpis, kde „ colspan Vlastnost ” označuje, kolik sloupců by měla buňka pokrýt. - “
” vytvoří buňky tabulky pro data. ' ” značky s požadovanými atributy jsou vloženy do této značky pro vložení obrázků do buňky tabulky: < stůl >
< tr >
< čt colspan = '3' styl = 'velikost písma: 28px;' >Ovoce a zelenina< / čt >
< / tr >
< tr >
< čt >Jméno< / čt >
< čt styl = 'width: 250px;' >Obrázek< / čt >
< čt > Ovoce / Zelenina< / čt >
< / tr >
< tr >
< td >Apple< / td >
< td < img src = '/images/jablka.jpg' všechno = 'jablko' šířka = '200' < / td >
< td >Ovoce< / td >
< / tr >
< tr >
< td >Mrkev< / čt >
< td < img src = '/images/mrkev.jpg' všechno = 'mrkev' šířka = '200' < / čt >
< td >Zelenina< / čt >
< / tr >
< tr >
< td >Oranžová< / čt >
< td < img src = '/images/orang.jpg' všechno = 'oranžový' šířka = '200' < / čt >
< td >Ovoce< / čt >
< / tr >
< / stůl >Lze pozorovat, že HTML tabulka byla úspěšně vytvořena spolu s vloženými obrázky:
CSS
Nyní probereme vlastnosti CSS používané k nastavení rozložení tabulky.
Stylový prvek „stůl“.
Nejprve přejděte na „
stůl {” prvek podle názvu značky a použijte následující vlastnosti:
zarovnání textu : centrum ;
šířka : 800 pixelů ;
border-kolaps : kolaps ;
okraj : auto ;
velikost písma : 20 pixelů ;
}Popis výše uvedeného kódu je uveden níže:
- “ zarovnání textu “ nastaví zarovnání textu.
- “ šířka “ určuje šířku tabulky.
- “ border-kolaps ” vlastnost definuje, zda je ohraničení sbalené nebo ne.
- “ okraj “ přidává prostor kolem stolu.
- “ velikost písma “ definuje velikost písma textu tabulky.
Styl prvek „th“ a „td“.
čt , td {
okraj : 1px pevný nachový ;
}Zde, „ okraj Vlastnost ” upravuje ohraničení kolem prvků zadáním hodnot pro šířku, styl a barvu ohraničení.
Výstup
Tento příspěvek je o vkládání obrázků do buňky tabulky v HTML.
Závěr
Chcete-li přidat obrázek do „
', použijte ' “ tag v HTML “
prvek. Element „ “ specifikuje „ src ” a uveďte adresu URL obrázku. Přesněji řečeno, chcete-li upravit velikost obrázku, přidejte „ výška ' a ' šířka ” ve značce „
“. Tento blog ilustruje postup přidání obrázku do buňky tabulky HTML.
- “
- “