Tabla con imágenes incluyendo enlaces en HTML


Queremos conseguir una tabla que contenga imágenes, y que a su vez, enlacen a páginas web. Además, queremos incluir un enlace debajo de la tabla.

Un ejemplo puede ser éste:

tablaconimagenesyenlaces

Para ello, vamos a utilizar las siguientes etiquetas:

<table> Tabla, se emplea para estructurar una serie de datos alineados según un esquema de filas y columnas.

<tr> Table row, es decir, indica que comenzamos una fila en la tabla.

<td> Contenido de la celda.

<border> Atributo aplicado a la etiqueta <table> para configurar el grosor de los bordes de la tabla.

<rowspan> Atributo aplicado a la etiqueta <td>para unir filas.

<colspan> Atributo aplicado a la etiqueta <td>para unir columnas.

<img> Etiqueta que sirve para incluir imágenes.

<src> Atributo de la etiqueta <img> que especifica la ruta de la imagen.

<width> Atributo que establece la anchura de la imagen.

<height> Atributo que señala la altura de la imagen.

<alt> Atributo aplicado a la etiqueta <img> para mostrar un texto alternativo a la imagen.

<a> Etiqueta utilizada para configurar enlaces.

<href> Atributo usado para señalar la ruta hacia la página que enlazará la etiqueta <a>.

El código para configurar la tabla arriba es el que se muestra abajo.

htmltablaimagenesenlaces

 

 

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s