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 |
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.
Esta es la imagen que colocamos entre 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.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...