Agregar imagen dentro de la celda de la tabla en HTML

Este artículo presentará un método para agregar imágenes dentro de la celda de la tabla en HTML.

Use la etiqueta img para agregar una imagen dentro del elemento td en HTML

Podemos usar la etiqueta img dentro del elemento td, los datos de la tabla, para agregar una imagen dentro de la celda de la tabla. Una etiqueta td define cada celda de la tabla.

Cualquier dato dentro de <td></td> es el contenido de la celda de la tabla. Podemos especificar la fuente de la imagen en la etiqueta img.

<td>
 <img src="image.jpg">
</td>

Esto mostrará la imagen llamada image.jpg dentro de una celda de la tabla.

Por ejemplo, cree una tabla usando la etiqueta table. Dale un borde de 3 en el atributo border para que el borde de la tabla sea visible.

A continuación, cree tres filas en la tabla utilizando la etiqueta tr. El primer tr es para los encabezados de la tabla th, y los demás para los datos de la tabla td.

En la primera fila de la tabla tr, proporcione los encabezados Name, Address e Image usando la etiqueta th. Luego, en la segunda y tercera fila, especifique el nombre, la dirección y la imagen dentro de td.

Por ejemplo, escribe Jack Austin y France como datos de la tabla para el segundo tr.

Luego, dentro de td, cree la etiqueta img como se muestra arriba e inserte una imagen. Del mismo modo, complete los datos de la segunda fila.

Especifique el alto y el ancho de la imagen dentro de la etiqueta img con los atributos height y width.

El siguiente ejemplo muestra la implementación de la instrucción anterior para agregar la imagen dentro de la celda de la tabla. Hay tres filas en la tabla.

La primera fila contiene el encabezado de cada columna y las filas restantes contienen los datos.

Hemos agregado una imagen en la tercera columna de la tabla usando la etiqueta img. Aprendimos que la etiqueta img podía escribirse dondequiera que insertáramos la imagen.

Suponemos que la imagen está en la misma carpeta/directorio que el archivo HTML. La ruta correcta de la imagen debe especificarse en el src de la etiqueta img; de lo contrario, la imagen no se mostrará.

Código de ejemplo:

<table border="3" align="center">
  <tr>
    <th>Name</th>
    <th>Address</th>
    <th>Image</th>
  </tr>
  <tr>
    <td>Jack Austin</td>
    <td>France</td>
    <td><img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="" height=100 width=100 /></td>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>United States</td>
    <td height=100 width=100><img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="" height=100 width=100 /></td>
  </tr>
</table>