Scribd
Cargar
97 vistas3 páginas

Tablas HTML Con Imágenes - Línea de Código

El documento explica cómo crear tablas HTML que incluyen imágenes. Se utilizan los elementos <table>, <tr>, y <td> para definir la estructura básica de una tabla. Luego, para incluir imágenes, se agrega el elemento <img> dentro de las celdas <td> relevantes, especificando la ruta de la imagen en el atributo src. De esta forma, es posible crear tablas HTML donde algunas celdas contengan texto y otras imágenes.

Cargado por

Santiago Gallardo Verona
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
97 vistas3 páginas

Tablas HTML Con Imágenes - Línea de Código

El documento explica cómo crear tablas HTML que incluyen imágenes. Se utilizan los elementos <table>, <tr>, y <td> para definir la estructura básica de una tabla. Luego, para incluir imágenes, se agrega el elemento <img> dentro de las celdas <td> relevantes, especificando la ruta de la imagen en el atributo src. De esta forma, es posible crear tablas HTML donde algunas celdas contengan texto y otras imágenes.

Cargado por

Santiago Gallardo Verona
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 3

22/11/22, 2:29 Tablas HTML con imágenes - Línea de Código

Tablas HTML con imágenes


 18/Jun/2015   HTML   HTML Imágenes, HTML Tabla, HTML Tabla TD, HTML Tabla TR  4 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:
<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

https://lineadecodigo.com/html/tablas-html-con-imagenes/ 1/3
22/11/22, 2:29 Tablas HTML con imágenes - Línea de Código

<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>

Publicaciones Relacionadas:

https://lineadecodigo.com/html/tablas-html-con-imagenes/ 2/3
22/11/22, 2:29 Tablas HTML con imágenes - Línea de Código

       

Crear una tabla en Cabecera en tabla Agrupar filas en una Agrupar columnas en Ancho de columnas en
HTML HTML tabla html una tabla HTML tabla

Vídeos sobre HTML

https://lineadecodigo.com/html/tablas-html-con-imagenes/ 3/3

También podría gustarte