Adicionando imagem dentro da célula da tabela em HTML

Este artigo explicará um procedimento para adicionar uma imagem dentro da célula da tabela em HTML.

Como adicionar uma imagem dentro da célula da tabela em HTML?

O HTML “ ” é utilizada para inserir uma imagem em uma célula da tabela.

Sintaxe

Siga a sintaxe para incorporar uma imagem dentro da célula da tabela:

Aqui:

• “ ” indica a célula da tabela onde a imagem precisa ser adicionada.
• “ ” é utilizada para especificar a imagem.
• “ origem ” define o caminho da imagem.
• “ tudo ” significa o texto que será exibido na tela caso a imagem não carregue.
• “ largura ” determina a largura da imagem.

Exemplo

No arquivo HTML, crie uma tabela seguindo as instruções fornecidas:

• “ ” elemento é utilizado para criar uma tabela.
• “ ” elemento especifica uma linha.
• “ ” ajusta um cabeçalho onde o “ colspan ” significa quantas colunas uma célula deve cobrir.
• “ ” cria células de tabela para dados. O ' ” tags com os atributos necessários são inseridos dentro desta tag para incorporar as imagens em uma célula da tabela:

Pode-se observar que a tabela HTML foi criada com sucesso junto com as imagens incorporadas:

CSS

Agora, discutiremos as propriedades CSS utilizadas para definir o layout da tabela.

Elemento de estilo “mesa”

Primeiro, acesse o “ ” pelo nome da tag e aplique as seguintes propriedades:

A descrição do código acima é dada abaixo:

• “ alinhamento de texto ” define o alinhamento do texto.
• “ largura ” determina a largura da mesa.
• “ colapso da fronteira ” define se a borda está recolhida ou não.
• “ margem ” adiciona espaço ao redor da mesa.
• “ tamanho da fonte ” define o tamanho da fonte do texto da tabela.

Estilo “th” e elemento “td”

Aqui o ' fronteira ” ajusta a borda ao redor dos elementos especificando os valores para largura, estilo e cor da borda.

Saída

Este post é sobre como inserir imagens na célula da tabela em HTML.

Conclusão

Para adicionar uma imagem dentro do “ ” célula, use o botão “ ” tag dentro do HTML “ ' elemento. O elemento “ ” especifica o “ origem ” para fornecer o URL da imagem. Mais especificamente, para ajustar o tamanho da imagem, adicione o “ altura ' e ' largura ” dentro da tag “ ”. Este blog ilustrou o procedimento para adicionar uma imagem na célula da tabela HTML.