As tabelas são utilizadas para organizar os dados de maneira legível. Eles têm um layout semelhante ao gráfico para exibir dados, como estatísticas, imagens e muito mais. Em HTML, a tabela é criada usando o “
”Elemento e o“”A tag é usada para incorporar a imagem em um documento. Os atributos mais significativos usados na tag "" são "alt" e "src”.
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 “”A tag é utilizada para inserir uma imagem em uma célula de tabela.
Sintaxe
Siga a sintaxe para incorporar uma imagem dentro da célula da tabela:
Aqui:
““
”O elemento indica a célula da tabela onde a imagem precisa ser adicionada.
““”A tag é utilizada para especificar a imagem.
““src”Atributo define o caminho da imagem.
““alt”Significa o texto que será exibido na tela, caso a imagem não.
““largura”Determina a largura da imagem.
Exemplo
No arquivo HTML, crie uma tabela seguindo as instruções fornecidas:
““
”O elemento é utilizado para criar uma tabela.
““
”Elemento especifica uma linha.
““
”Ajusta um título onde o“Colspan”Propriedade 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 nesta tag para incorporar as imagens em uma célula de tabela:
Frutas e vegetais
Nome
Foto
Frutas/vegetais
Maçã
Fruta
Cenoura
Vegetal
Laranja
Fruta
Pode -se observar que a tabela HTML foi criada com sucesso junto com imagens incorporadas:
CSS
Agora, discutiremos as propriedades do CSS utilizadas para definir o layout da tabela.
Elemento de “tabela” de estilo
Primeiro, acesse o “
”Elemento por nome da tag e aplique as seguintes propriedades: mesa Alinhamento de texto: centro; Largura: 800px; colapso da fronteira: colapso; margem: automático; Size da fonte: 20px;
A descrição do código acima é dada abaixo:
““alinhamento de texto”Define o alinhamento do texto.
““largura”Determina a largura da tabela.
““colapso da fronteira”Propriedade define se a fronteira é desabada ou não.
““margem”Adiciona espaço ao redor da mesa.
““tamanho da fonte”Define o tamanho da fonte de texto da tabela.
Estilo "th" e "td" elemento
th, td borda: 1px roxo sólido;
Aqui o "fronteira”A propriedade ajusta a borda ao redor dos elementos, especificando os valores para largura, estilo e cor da borda.
Saída
Este post é sobre inserir imagens na célula da tabela em HTML.
Conclusão
Para adicionar uma imagem dentro do “
"Cell, use o"”Tag dentro do HTML“
" elemento. O elemento “” especifica o “src”Atributo para fornecer o URL da imagem. Mais especificamente, para ajustar o tamanho da imagem, adicione o “altura" e "largura”Atributos dentro da tag“ ”. Este blog ilustrou o procedimento para adicionar uma imagem na célula da tabela HTML.
