Tablas HTML con imágenes

18/Jun/2015 HTML , , , 3 Comentarios

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:

  1. <th>Texto</th>
  2. <th>Imagen</th>
  3. </tr>
  4. </thead>
  5. <td></td>
  6. <td></td>
  7. </tr>
  8. ...
  9. </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.

  1. <img src="url_imagen" alt="texto alternativo" width="ancho" height="alto"/>

Por ejemplo un código para cargar una imagen podría ser:

  1. <img 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.

  1. ...
  2. <td>Test</td>
  3. <td><img src="test.png"/></td>
  4. </tr>
  5. ...

Así podríamos tener tablas HTML con imágenes de la siguiente forma:

  1. <th>Texto</th>
  2. <th>Imagen</th>
  3. </tr>
  4. </thead>
  5. <td>Test</td>
  6. <td><img src="test.png"/></td>
  7. </tr>
  8. <td>Descargar</td>
  9. <td><img src="download.png"/></td>
  10. </tr>
  11. <td>Curso</td>
  12. <td><img src="curso.png"/></td>
  13. </tr>
  14. </table>

Vídeos sobre HTML


3 comentarios en “Tablas HTML con imágenes”

Víctor Cuervo

Marisol

hola que tal me podrian decir como puedo hacer un reporte de productos en linea como tipo catalago mostrando la foto del mismo en una tabla

Víctor Cuervo

antonia

Estupendo. El único sitio dónde he entendido como insertar imágenes en una misma línea (o no), utilizando las tablas. Gracias!

Víctor Cuervo

Víctor Cuervo

Antonia nos alegra mucho saber eso. 😀

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*