Tablas e Imágenes HTML

Buenas a todos, realmente no es algo complicado insertar imágenes y tablas en HTML, pero aún así es importante. En este post les mostraré de forma sencilla a demás varios de los atributos que se utilizan en las imágenes en HTML.

Indice:

Imágenes.

- Altura y anchura.
- Bordes.
- Espacios.
- Alineación.
- Alt.

Tablas.

- Altura y anchura.
- Alineación.
- Celdas de encabezado.
- Titulo.
- Unificar celdas.

Imágenes

La insersion de imágenes en HTML se realiza con la etiqueta <img>, esta etiqueta no se cierra, mediante atributos podemos configurar un tamaño para que se muestre la imagen, un borde, alineación, y separación respecto a otros objetos. Entonces, para insertar una imagen se escribe el atributo "src":

<img src="Ruta/imagen.jpg">

Ejemplo:

<html>

<head> <title> Titulo de la pagina</title> </head>

<h1> Tablas e imagenes </h1>

<p>parrafo</p>

</html>

En caso de que su página no se encuentra en el mismo sitio que la imagen, pueden colocar la ruta de la carpeta donde se encuentra su imagen, pero mucho cuidado, no deben colocar rutas a archivos en su computadora, por que una vez suban su sitio, este no podrá cargar la imagen.

Altura y Anchura de la Imagen.

Se puede definir la altura y anchura de la imagen con los atributos "width" y "heigth". Ejemplo:

<html>

<head> <title> Titulo de la pagina</title> </head>

<h1> Tablas e imagenes </h1>

<p>parrafo</p>

</html>

Es aconsejable insertar imágenes con su tamaño original y no alterarlo mediante estos atributos,

Bordes.

Se puede definir la altura y anchura de la imagen con los atributos "width" y "heigth". Ejemplo:

<html>

<head> <title> Titulo de la pagina</title> </head>

<h1> Tablas e imagenes </h1>

<p>parrafo</p>

</html>

Este es un atributo numérico, si no aplicas este atributo a la imagen por defecto se considera que esta en valor "0", si una imagen es ademas un enlace o vinculo, se considera que el atributo esta en valor "1". Por esto es que es recomendable utilizar ese atributo asignándole un valor a partir del valor "2". No se suele utilizar este atributo en la actualidad, hoy día se esta sustituyendo por CSS.

Espacios.

Con los atributos "hspace" y "hspace" se puede establecer una distancia en píxeles que represente un margen entre los demás objetos y la imagen; correspondientemente "hspace" define el márgen horizontal, es decir los lados izquierdo y derecho de la imagen; y "vspace" define el márgen vertical, los lados superior e inferior de la imagen. Ejemplo:

<html>

<head> <title> Titulo de la pagina</title> </head>

<h1> Tablas e imagenes </h1>

<p>parrafo</p>

</html>

Alineación.

El atributo "align" define la posición de la imagen respecto al texto colocado antes o después de esta. Puede tomar 5 valores: top, middle, botom, left y right. Este atributo en la actualidad se está sustituyendo por CSS. Ejemplo:

<html>

<head> <title> Titulo de la pagina</title> </head>

<h1> Tablas e imagenes </h1>

<p>parrafo</p>

</html>

Alt.

El atributo "alt" muestra un texto en caso de que la imagen no se haya cargado o se esté cargando. Ejemplo:

<html>

<head> <title> Titulo de la pagina</title> </head>

<h1> Tablas e imagenes </h1>

<p>parrafo</p>

</html>

Este atributo es interesante, a demás de cumplir la función anteriormente explicada, también sirve que para cuando en algunos navegadores se posicione el cursor sobre la imagen, aparezca un texto describiendo esta (hoy día ya no es valido, se utiliza el atributo "title" para realizar esa tarea); otra función que se le atribuye últimamente es el de brindar una descripción a las personas con minusvalía visual, función algo nueva en algunos navegadores y sistemas operativos.

Tablas

Crear tablas es muy fácil, para ello se utilizan 3 etiquetas: <table>, <tr>, y <td>. Estas etiquetas si que deben cerrarse. Ejemplo:

<table>

<tr>

<td>celda 1</td>

<td>celda 2</td>

</tr>

<tr>

<td>celda 3</td>

<td>celda 4</td>

</tr>

</table>

Como pueden observar en el ejemplo, <table> Define una tabla. <tr> Define una fila. <td> Define un elemento o celda de la fila. Cabe destacar que la corriente actual de diseño de páginas web utiliza Css y capas en vez de tablas, para posicionar el contenido. Veamos algunos atributos que pueden aplicarse a las tablas:

Altura y Anchura de la Tabla.

Se puede definir la altura y anchura de la tabla con los atributos "width" y "heigth". Ejemplo:

<html>

<head> <title> Titulo de la pagina</title> </head>
<h1> Tablas e imagenes </h1>
<table width="100%" height="50%">
<tr>
<td>celda 1</td>
<td>celda 2</td>
</tr>
<tr>
<td>celda 3</td>
<td>celda 4</td>
</tr>
</table>
</html>

Como pueden ver, es posible definir el atributo para que trabaje tanto con píxeles como por porcentaje en la pantalla, lo cual puede ser muy útil en algunos casos: (pixel) width="50" / (porcentaje) width="50%". Trabajar con porcentaje implica que el tamaño de la tabla cambiará dependiendo del tamaño de la ventana del navegador.

Alineación.

El atributo "align" define la posición en horizontal de una tabla o del contenido de una celda. Puede tomar 2 valores: left y right. Este atributo se está sustituyendo por CSS, y es que no es soportado por HTML5. Ejemplo:

<html>

<head> <title> Titulo de la pagina</title> </head>
<h1> Tablas e imagenes </h1>
<table align="center" width="200" height="100">
<tr>
<td align="right">celda 1</td>
<td>celda 2</td>
</tr>
<tr>
<td>celda 3</td>
<td>celda 4</td>
</tr>
</table>
</html>

También tenemos el atributo "valign", que define la posición en vertical del contenido de las celdas, puede tomar 3 valores: top, middle, bottom. Tampoco esta soportado por HTML5.

<html>

<head> <title> Titulo de la pagina</title> </head>
<h1> Tablas e imagenes </h1>
<table width="200" height="100">
<tr>
<td valign="bottom">celda 1</td>
<td>celda 2</td>
</tr>
<tr>
<td>celda 3</td>
<td>celda 4</td>
</tr>
</table>
</html>

Celdas de Encabezado.

Una celda de encabezado ayuda a resaltar celdas para facilitar el entendimiento de la información que contiene la tabla, definir una celda de encabezado es muy simple, se utiliza el elemento <th> (thead), este es un elemento agrupador de celda. <th> representa una celda independiente como cabecera. Ejemplo:

<html>
<head> <title> Titulo de la pagina</title> </head>
<h1> Tablas e imagenes </h1>
<table width="200" height="100">
<tr>
<th>celda 1</th>
<th>celda 2</th>
</tr>
<tr>
<td>celda 3</td>
<td>celda 4</td>
</tr>
</table>
</html>

Como pueden ver, la celda de encabezado provee información sobre la columna a la que pertenece. Es recomendable utilizar Css para dar forma a las cabeceras.
Existe un atributo para el elemento <th> que pretende indicar explícitamente las celdas afectadas por una celda de encabezado, este es el atributo "scope". Este atributo puede tomar 4 valores: col, row, colgroup y rowgroup. Aunque parece complicado en realidad no lo es, col y row indica que la celda de encabezado provee información para el resto de las celdas en la columna o fila respectivamente; colgroup y rowgroup indica que la celda de encabezado provee información para una o más columnas o filas respectivamente.

<html>

<head> <title> Titulo de la pagina</title> </head>

<h1> Tablas e imagenes </h1>

<tr>

<th scope="col">celda 1</th>

<th scope="col">celda 2</th>

</tr>

<tr>

<td>celda 3</td>

<td>celda 4</td>

</tr>

</table>

</html>

Gráficamente, luciría igual a la imagen anterior, la diferencia está en que se define de una mejor manera que celda encabezado provee información para que filas o columnas.

Titulo.

Los títulos en las tablas tienen también su utilidad, es un componente que mejora la legibilidad. No todas las tablas necesitan un titulo, pero hay tablas en las que un titulo se hace indispensable. La utilidad del titulo radica en que permite una descripción acerca de la información de la tabla. Puedes definir un titulo con la etiqueta <caption>, la cual debe ir dentro del elemento <table>, y antes del resto de los elementos de la tabla. Ejemplo:

<html>

<head> <title> Titulo de la pagina</title> </head>
<h1> Tablas e imagenes </h1>
<table width="200" height="100">
<caption>Titulo de la tabla</caption>
<tr>
<th>celda 1</th>
<th>celda 2</th>
</tr>
<tr>
<td>celda 3</td>
<td>celda 4</td>
</tr>
</table>
</html>

Unificar Celdas.

Mediante los atributos "colspan" y "rowspan" puedes unificar celdas adyacentes del tipo <td> y <th>, de forma horizontal y vertical respectivamente. Es muy simple, estos atributos toman valores numéricos los cuales representan la cantidad de celdas adyacentes a unificar. Ejemplo:

<html>

<head> <title> Titulo de la pagina</title> </head>
<h1> Tablas e imagenes </h1>
<table width="210" height="100">
<tr>
<th colspan="2">celda 1</th>
<th colspan="2">celda 2</th>
</tr>
<tr>
<td>celda 3</td>
<td>celda 4</td>
<td>celda 5</td>
<td>celda 6</td>
</tr>
</table>
</html>

Bueno, eso ha sido todo por este post, recuerden que las tablas no se deben utilizar para maquetar una página web. Espero que les haya sido de ayuda, nos vemos en el próximo post :)

Buscar este blog

NoteWide