Artículos
HTML

Tablas HTML con imágenes

18/Jun/2015

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>

Código Fuente

Descárgate el código fuente de Tablas HTML con imágenes
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre HTML

Disfruta también de nuestros artículos sobre HTML en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test HTML

¿Te atreves a probar tus habilidades y conocimiento en HTML con nuestro test?

Test HTML
Suscribir
Notificar de
guest
4 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios