Cuando estamos viendo ejemplos en HTML sobre manejo de tablas siempre suelen aparecer datos ya sea texto o números. Si bien una de las cosas que podemos es crear tablas HTML con imágenes. Es decir, que el contenido de las celdas de la tabla sean imágenes.
La creación básica de una tabla se realiza mediante los elementos table para reflejar la tabla en sí, tr que representaría las filas y td que serían las propias celdas.
Así podemos tener una tabla de dos columnas de la siguiente forma:
<table> <thead> <tr> <th>Texto</th> <th>Imagen</th> </tr> </thead> <tbody> <tr> <td></td> <td></td> </tr> </tbody> </table>
Esta tabla lo que nos va a permitir es insertar imágenes en la segunda columna. Cuando vayas a manipular imágenes en HTML recurrirás al elemento img. De esta forma podrás insertar una imagen de forma sencilla en una página web.
<img loading="lazy" src="url_imagen" alt="texto alternativo" width="ancho" height="alto">
Por ejemplo un código para cargar una imagen podría ser:
<img loading="lazy" src="descargar.png" alt="Elemento de Descarga" width="50px" height="50px">
Puedes ver ejemplos sobre uso de imágenes en páginas web.
Así que para tener tablas HTML con imágenes solo tienes que utilizar el elemento img dentro de las celdas de la tabla.
<td> Test <img src="test.png"> </td>
Así podríamos tener tablas HTML con imágenes de la siguiente forma:
<table> <thead> <tr> <th>Texto</th> <th>Imagen</th> </tr> </thead> <tbody><tr> <td>Test</td> <td><img src="test.png"></td> </tr> <tr> <td>Descargar</td> <td><img src="download.png"></td> </tr> <tr> <td>Curso</td> <td><img src="curso.png"></td> </tr> </tbody> </table>