Tabla mejorada con imagenes para barra de navegación

  • Por
Una tabla de enlaces HTML a la que le intercalamos imágenes para transformarla un poco y hacerla más vistosa. Utilizable en una barra de navegación.
Portada
Introducción a ello
Todos los asuntos
Que desees
Más epígrafes
Acabando los enlaces
Contáctenos
En este taller de HTML vamos a ver como una pequeña imagen puede resultar muy vistosa para construir una barra de navegación para nuestro sitio web.

Vamos a construir una tabla como la que se puede ver en la parte de la derecha, donde podremos observar la utilización de imágenes para camuflar el hecho que las celdas son siempre rectangulares. Las imágenes aplican un leve biselado y eliminan una esquina, con lo que las tablas mejoran sensiblemente su apariencia.

Nota: Un efecto como este o parecido se puede conseguir de muchas maneras, así que nos tenemos que tomar este taller como tan sólo una idea de las posibilidades y el modo de construir las tablas.

Las imágemes

Creo que viendo las imágenes que hemos colocado en la tabla se comprenderá un poco la idea sobre la que hemos trabajado. Las imágenes están ampliadas para que se pueda observar mejor sus líneas. Se pueden crear con cualquier editor gráfico del que dispongamos.

Imagen colocada en el medio de dos celdas de texto Esta es la imagen que colocamos entre dos celdas de texto.


Imagen colocada en el medio de dos celdas de texto Esta es la imagen que colocamos en la parte de arriba de la celda superior. No podemos colocar la misma que la de en medio porque queda un poco mal.


Consideraciones para crear la tabla

Vamos a colocar cada elemento en la tabla en una celda independiente. En la primera celda colocaremos la imagen destinada para la parte de arriba, en la segunda el texto del primer enlace, luego la imagen que colocamos en medio de cada celda de texto, seguida por otra celda con el texto del siguiente enlace, luego otra vez la imagen, luego texto, etc.

La tabla se tiene que crear de modo que no quede separación entre celdas ni márgenes, pues si la hubiera no parecería que las celdas de la imagen y las del texto forman un mismo bloque y aparecería deslabazada. Los atributos cellspacing y cellpadding quedarían a cero.

Además, las etiquetas <TD> y las de las imágenes, <IMG>, tienen que estar en el código sin espacios entre medias, pues si no fuera así tampoco conseguiríamos que las celdas quedasen pegadas unas a otras.

Por lo demás, decir que las celdas de texto les hemos aplicado estilos utilizando CSS (Hojas de estilo en cascada), que son mucho más cómodos y nos permiten definir una única vez el estilo para todas las celdas en lugar de repetir las etiquetas y atributos HTML para cada una.

Código de la tabla

Colocamos el código de toda la página en lugar de solamente la tabla para que se puedan ver las etiquetas para colocar los estilos CSS, que aparecen en la cabecera.

<html>
<head>
    <title>Tabla enlaces guay</title>
    <style>
    .celda {background-color:#848ED3; font-size:8pt; font-family:verdana,arial; color:#ffffff; font-weight:bold; padding-left:3px; padding-bottom:2px;}
    </style>
</head>

<body>

<table cellspacing="0" cellpadding="0" border="0">
<tr>
    <td><img src="arriba.gif" width="155" height="6" alt="" border="0"></td>
</tr>
<tr>
    <td class="celda">Portada</td>
</tr>
<tr>
    <td><img src="medio.gif" width="155" height="8" alt="" border="0"></td>
</tr>
<tr>
    <td class="celda">Introducción a ello</td>
</tr>
<tr>
    <td><img src="medio.gif" width="155" height="8" alt="" border="0"></td>
</tr>
<tr>
    <td class="celda">Todos los asuntos</td>
</tr>
<tr>
    <td><img src="medio.gif" width="155" height="8" alt="" border="0"></td>
</tr>
<tr>
    <td class="celda">Que desees</td>
</tr>
<tr>
    <td><img src="medio.gif" width="155" height="8" alt="" border="0"></td>
</tr>
<tr>
    <td class="celda">Más epígrafes</td>
</tr>
<tr>
    <td><img src="medio.gif" width="155" height="8" alt="" border="0"></td>
</tr>
<tr>
    <td class="celda">Acabando los enlaces</td>
</tr>
<tr>
    <td><img src="medio.gif" width="155" height="8" alt="" border="0"></td>
</tr>
<tr>
    <td class="celda">Contáctenos</td>
</tr>
</table>

</body>
</html>

Se puede ver el ejercicio en una página a parte.

También ponemos a vuestra disposición la descarga del archivo HTML de la tabla y las las imágenes utilizadas en el ejemplo.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir