Questo articolo spiegherà una procedura per aggiungere un'immagine all'interno della cella della tabella in HTML.
Come aggiungere un'immagine all'interno della cella della tabella in HTML?
L'HTML “
Sintassi
Segui la sintassi per incorporare un'immagine all'interno della cella della tabella:
< td >< imm src = '' Tutto quanto = '' larghezza = '' >< / td >
Qui:
- “
L'elemento ” indica la cella della tabella in cui è necessario aggiungere l'immagine. - “
Il tag ” viene utilizzato per specificare l'immagine. - “ src L'attributo ” imposta il percorso dell'immagine.
- “ Tutto quanto ” indica il testo che verrà visualizzato sullo schermo nel caso in cui l'immagine non venga caricata.
- “ larghezza ” determina la larghezza dell'immagine.
Esempio
Nel file HTML, crea una tabella seguendo le istruzioni fornite:
- “
L'elemento ” viene utilizzato per creare una tabella. - “
L'elemento ' specifica una riga. - “
” regola un'intestazione in cui il “ colspan La proprietà ” indica quante colonne dovrebbe coprire una cella. - “
” crea celle di tabella per i dati. Il ' All'interno di questo tag vengono inseriti i tag con gli attributi richiesti per incorporare le immagini in una cella della tabella: < tavolo >
< tr >
< th colspan = '3' stile = 'dimensione carattere: 28px;' >Frutta e Verdura< / th >
< / tr >
< tr >
< th >Nome< / th >
< th stile = 'larghezza: 250px;' >Immagine< / th >
< th >Frutta / verdura< / th >
< / tr >
< tr >
< td >Mela< / td >
< td >< imm src = '/immagini/mele.jpg' Tutto quanto = 'Mela' larghezza = '200' >< / td >
< td >Frutta< / td >
< / tr >
< tr >
< td >Carote< / th >
< td >< imm src = '/immagini/carote.jpg' Tutto quanto = 'carota' larghezza = '200' >< / th >
< td >Verdure< / th >
< / tr >
< tr >
< td >Arancione< / th >
< td >< imm src = '/immagini/orang.jpg' Tutto quanto = 'arancia' larghezza = '200' >< / th >
< td >Frutta< / th >
< / tr >
< / tavolo >Si può osservare che la tabella HTML è stata creata con successo insieme alle immagini incorporate:
CSS
Ora discuteremo le proprietà CSS utilizzate per impostare il layout della tabella.
Elemento “tavolo” in stile
Per prima cosa, accedi al '
tavolo {” elemento per nome tag e applica le seguenti proprietà:
allineamento del testo : centro ;
larghezza : 800 pixel ;
crollo del bordo : crollo ;
margine : auto ;
dimensione del font : 20px ;
}Di seguito si riporta la descrizione del suddetto codice:
- “ allineamento del testo ” imposta l'allineamento del testo.
- “ larghezza ” determina la larghezza del tavolo.
- “ crollo del bordo La proprietà ” definisce se il bordo è compresso o meno.
- “ margine ” aggiunge spazio intorno al tavolo.
- “ dimensione del font ” definisce la dimensione del carattere del testo della tabella.
Stile 'th' e 'td' Element
th , td {
confine : 1 pixel solido porpora ;
}Ecco, il “ confine ” regola il bordo intorno agli elementi specificando i valori per la larghezza, lo stile e il colore del bordo.
Produzione
Questo post riguarda l'inserimento di immagini nella cella della tabella in HTML.
Conclusione
Per aggiungere un'immagine all'interno del '
” cella, utilizzare il “ ” tag all'interno dell'HTML “ elemento '. L'elemento ' ' specifica il ' src ” per fornire l'URL dell'immagine. Più specificamente, per regolare la dimensione dell'immagine, aggiungi ' altezza ' e ' larghezza ” all'interno del tag “
”. Questo blog ha illustrato la procedura per aggiungere un'immagine nella cella della tabella HTML.
- “
- “