Dit artikel legt een procedure uit voor het toevoegen van een afbeelding in de tabelcel in HTML.
Hoe een afbeelding in een tabelcel in HTML toevoegen?
De HTML “ ” tag wordt gebruikt om een afbeelding in een tabelcel in te voegen.
Syntaxis
Volg de syntaxis om een afbeelding in de tabelcel in te sluiten:
< td >< img src = '' alles = '' breedte = '' >< / td >
Hier:
- “
” element geeft de tabelcel aan waar de afbeelding moet worden toegevoegd. - “
” tag wordt gebruikt om de afbeelding te specificeren.
- “ src ” attribuut stelt het pad van de afbeelding in.
- “ alles ” staat voor de tekst die op het scherm wordt weergegeven als de afbeelding niet kan worden geladen.
- “ breedte ” bepaalt de breedte van de afbeelding.
Voorbeeld
Maak in het HTML-bestand een tabel door de meegeleverde instructies te volgen:
- “
” element wordt gebruikt om een tabel te maken. - “
” element specificeert een rij. - “
” past een kop aan waar de “ colspan ” eigenschap geeft aan hoeveel kolommen een cel moet bedekken. - “
” Maakt tabelcellen voor gegevens. De ' ”-tags met de vereiste attributen worden in deze tag ingevoegd om de afbeeldingen in een tabelcel in te sluiten: < tafel >
< tr >
< e colspan = '3' stijl = 'lettergrootte: 28px;' >Groenten en Fruit< / e >
< / tr >
< tr >
< e >Naam< / e >
< e stijl = 'breedte: 250px;' >Foto< / e >
< e >Vruchten / Groente< / e >
< / tr >
< tr >
< td >Appel< / td >
< td >< img src = '/afbeeldingen/appels.jpg' alles = 'appel' breedte = '200' >< / td >
< td >Vruchten< / td >
< / tr >
< tr >
< td >Wortel< / e >
< td >< img src = '/afbeeldingen/wortel.jpg' alles = 'wortel' breedte = '200' >< / e >
< td >Groente< / e >
< / tr >
< tr >
< td >Oranje< / e >
< td >< img src = '/images/orang.jpg' alles = 'oranje' breedte = '200' >< / e >
< td >Vruchten< / e >
< / tr >
< / tafel >Het kan worden waargenomen dat de HTML-tabel met succes is gemaakt samen met ingesloten afbeeldingen:
CSS
Nu zullen we de CSS-eigenschappen bespreken die worden gebruikt om de lay-out van de tabel in te stellen.
Stijl 'tafel' Element
Ga eerst naar de “
tafel {” element op tagnaam en pas de volgende eigenschappen toe:
tekst uitlijnen : centrum ;
breedte : 800px ;
grens-ineenstorting : instorten ;
marge : auto ;
lettertypegrootte : 20px ;
}De beschrijving van de bovenstaande code wordt hieronder gegeven:
- “ tekst uitlijnen ” stelt de tekstuitlijning in.
- “ breedte ” bepaalt de breedte van de tafel.
- “ grens-ineenstorting ” eigenschap definieert of de rand is samengevouwen of niet.
- “ marge ” voegt ruimte toe rond de tafel.
- “ lettertypegrootte ” definieert de lettergrootte van de tabel.
Stijl 'th' en 'td' Element
e , td {
grens : 1px solide paars ;
}Hier de ' grens ” eigenschap past de rand rond de elementen aan door de waarden voor randbreedte, stijl en kleur op te geven.
Uitgang
Dit bericht gaat helemaal over het invoegen van afbeeldingen in de tabelcel in HTML.
Gevolgtrekking
Om een afbeelding toe te voegen binnen de '
' cel, gebruik de ' 'tag in de HTML'
”-element. Het “ ” element specificeert de “ src ” attribuut om de afbeeldings-URL op te geven. Meer specifiek, om de afbeeldingsgrootte aan te passen, voegt u de ' hoogte ' en ' breedte ” attributen binnen de “
” tag. Deze blog heeft de procedure geïllustreerd om een afbeelding toe te voegen in de HTML-tabelcel.
- “
- “