Este artículo explicará un procedimiento para agregar una imagen dentro de la celda de la tabla en HTML.
¿Cómo agregar una imagen dentro de la celda de la tabla en HTML?
El HTML “ La etiqueta ” se utiliza para insertar una imagen en una celda de la tabla.
Sintaxis
Siga la sintaxis para incrustar una imagen dentro de la celda de la tabla:
< td >< imagen origen = '' todo = '' ancho = '' >< / td >
Aquí:
- “
El elemento ” indica la celda de la tabla donde se debe agregar la imagen. - “
La etiqueta ” se utiliza para especificar la imagen.
- “ origen El atributo ” establece la ruta de la imagen.
- “ todo ” 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 encabezado donde el “ colspan La propiedad ” indica cuántas columnas debe cubrir una celda. - “
” crea celdas de tabla para datos. Él ' Las etiquetas con los atributos requeridos se insertan dentro de esta etiqueta para incrustar las imágenes en una celda de la tabla: < mesa >
< tr >
< el colspan = '3' estilo = 'tamaño de fuente: 28px;' >Frutas y Verduras< / el >
< / tr >
< tr >
< el >Nombre< / el >
< el estilo = 'ancho: 250px;' >Imagen< / el >
< el >Frutas / Vegetal< / el >
< / tr >
< tr >
< td >manzana< / td >
< td >< imagen origen = '/images/apples.jpg' todo = 'manzana' ancho = '200' >< / td >
< td >fruta< / td >
< / tr >
< tr >
< td >zanahoria< / el >
< td >< imagen origen = '/images/carrot.jpg' todo = 'zanahoria' ancho = '200' >< / el >
< td >Verdura< / el >
< / tr >
< tr >
< td >naranja< / el >
< td >< imagen origen = '/images/orang.jpg' todo = 'naranja' ancho = '200' >< / el >
< td >fruta< / el >
< / tr >
< / mesa >Se puede observar que la tabla HTML se ha creado con éxito junto con las imágenes incrustadas:
CSS
Ahora, discutiremos las propiedades CSS utilizadas para establecer el diseño de la tabla.
Elemento de estilo 'tabla'
Primero, acceda al “
mesa {” por nombre de etiqueta y aplique las siguientes propiedades:
texto alineado : centro ;
ancho : 800px ;
borde-colapso : colapsar ;
margen : auto ;
tamaño de fuente : 20 píxeles ;
}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.
- “ borde-colapso 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 del texto de la tabla.
Elemento de estilo “th” y “td”
el , td {
frontera : 1px sólido púrpura ;
}Aquí el ' frontera La propiedad ” ajusta el borde alrededor de los elementos especificando los valores de ancho, estilo y color del borde.
Producción
Esta publicación trata sobre la inserción de imágenes en la celda de la tabla en HTML.
Conclusión
Para agregar una imagen dentro del “
” celda, use el “ ” etiqueta dentro del HTML “
' elemento. El elemento “ ” especifica el “ origen ” 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 la tabla HTML.
- “
- “