Las tablas se utilizan para organizar los datos de manera legible. Tienen un diseño similar a una tabla para mostrar datos, como estadísticas, imágenes y más. En HTML, la tabla se crea utilizando el "
"Elemento, y el""La etiqueta se usa para incrustar la imagen en un documento. Los atributos más significativos utilizados en la etiqueta "" es "alternativo" y "SRC".
Este artículo explicará un procedimiento para agregar una imagen dentro de la celda de la mesa en HTML.
Cómo agregar una imagen dentro de la celda de mesa en HTML?
El html ""La etiqueta se utiliza para insertar una imagen en una celda de tabla.
Sintaxis
Siga la sintaxis para incrustar una imagen dentro de la celda de la mesa:
Aquí:
"
El elemento indica la celda de tabla donde se necesita agregar la imagen.
""La etiqueta se utiliza para especificar la imagen.
"SRC"El atributo establece la ruta de la imagen.
"alternativo"Significa el texto que se mostrará en la pantalla en caso de que la imagen no se cargue.
"ancho"Determina el ancho de la imagen.
Ejemplo
En el archivo HTML, cree una tabla siguiendo las instrucciones proporcionadas:
"
El elemento se utiliza para crear una tabla.
"
El elemento especifica una fila.
"
"Ajusta un título donde el"colspan"La propiedad significa cuántas columnas debe cubrir una celda.
"
"Crea células de tabla para datos. El ""Las etiquetas con los atributos requeridos se insertan dentro de esta etiqueta para incrustar las imágenes en una celda de tabla:
Frutas y vegetales
Nombre
Imagen
Fruta/vegetal
Manzana
Fruta
Zanahoria
Verdura
Naranja
Fruta
Se puede observar que la tabla HTML se ha creado con éxito junto con imágenes integradas:
CSS
Ahora, discutiremos las propiedades CSS utilizadas para establecer el diseño de la tabla.
Elemento de estilo "Table" de estilo
Primero, acceda al "
Elemento por nombre de la etiqueta y aplique las siguientes propiedades: mesa Text-Align: Center; Ancho: 800px; Colapso de borde: colapso; margen: auto; tamaño de fuente: 20px;
La descripción del código anterior se da a continuación:
"texto alineado"Establece la alineación del texto.
"ancho"Determina el ancho de la mesa.
"colapso de fronteras"La propiedad define si el borde está colapsado o no.
"margen"Agrega espacio alrededor de la mesa.
"tamaño de fuente"Define el tamaño de fuente de texto de la tabla.
Elemento de estilo "th" y "td"
th, td borde: 1px de color púrpura sólido;
Aquí el "borde"La propiedad ajusta el borde alrededor de los elementos especificando los valores para el ancho, el estilo y el color del borde.
Producción
Esta publicación se trata de insertar imágenes en la celda de la tabla en HTML.
Conclusión
Para agregar una imagen dentro del "
"Cell, usa el""Etiqueta dentro del HTML"
" elemento. El elemento "" especifica el "SRC"Atributo para proporcionar la URL de la imagen. Más específicamente, para ajustar el tamaño de la imagen, agregue el "altura" y "ancho"Atributos dentro de la etiqueta" ". Este blog ha ilustrado el procedimiento para agregar una imagen en la celda de tabla HTML.
