Imágenes en HTML (IX)
por Luciano Moreno, del departamento de diseño web de BJS Software.

Usos de un gif transparente.-

Vista la forma general de proceder con las imágenes en nuestras páginas, vamos ahora a ver algunas aplicaciones más específicas.

Cuando diseñamos una tabla en para nuestra página, muchas veces deseamos que alguna de las celdas de la misma no tenga contenido visibe en pantalla. Esto puede ocurrir en el cado de celdas sin datos o en el de columnas de separación de márgenes, por ejemplo. Pero si dejamos la celda vacía, símplemente escribiendo <TD WIDTH="10"></TD>, lo más normal es que esta anchura que hemos especificado no séa respetada por el navegador, y si la tabla tiene asignado un color de fondo Nestcape Navigator además no pintará dicho color a esa celda, pintando sólo un rectángulo blanco.

Esto se puede evitar de dos maneras: introduciendo un espacio en la celda (&nbsp;) o introduciendo en ella un gif transparente de 1x1 pixel. este último método es el más usado y el mejor. Observemos el siguiente código HTML que define una tabla, en la que hemos establecido un margen lateral izquierdo de 15 pixels:

<table cellspacing="0" cellpadding="0" border="0" bgcolor="#669933" align="center">
<tr>
    <td rowspan="3" width="15"> <img src="images/bs.gif" width="1" height="1" alt="" border="0"></td>
    <td>celda 1</td>
</tr>
<tr>
    <td>celda 2</td>
</tr>
<tr>
    <td>celda 3</td>
</tr>
</table>

Y mira el resultado del mismo, en el que se aprecia cláramente que el margen lateral tiene exactamente la anchura deseada:

	celda 1
	celda 2
	celda 3

Si no hubiésemos introducido el gif transparente en la celda lateral el resultado hubiera sido imprevisible, dependiendo de la constitución total de la tabla. A veces Nestcape Navigator no coge tampoco bien este efecto, y no asigna al margen el tamaño adecuado. Esto se soluciona asignando un ancho igual tanto a la celda como al gif transparente:

<td rowspan="3" width="15"><img src="images/bs.gif" width="15" height="1" alt="" border="0"></td>

Este mismo esquema general se sigue si lo que deseamos es una tabla con márgenes laterales y superiores, es decir, una tabla enmarcada. Si esta contiene una sóla celda es más facil obtener este efecto mediante el atributo CELLSPACING de la etiqueta TABLE, pero si la tabla contiene muchas celdas el resultado no será el deseado, ya que entonces no podremos controlar el espaciado entre celdas, y además la tabla no presentaría un color de fondo contínuo. El siguiente código consigue éste efecto usando un gif transparente:

<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#339933">
<tr>
    <td rowspan="4" width="15"><IMG height=1 alt="" src="images/bs.gif" width=1 border=0></td>
    <td colspan="2" height="15"><IMG height=1 alt="" src="images/bs.gif" width=1 border=0></td>
    <td rowspan="4" width="15"><IMG height=1 alt="" src="images/bs.gif" width=1 border=0></td>
</tr>
<tr align="center">
    <td  width="100">celda 1,1</td>
    <td  width="100">celda 1,2</td>
</tr>
<tr align="center">
    <td>celda 2,1</td>
    <td>celda 2,2</td>
</tr>
<tr>
    <td colspan="2" height="15"><IMG height=1 alt="" src="images/bs.gif" width=1 border=0></td>
</tr>
</table>

cuyo resultado es:

	celda 1,1	celda 1,2
	celda 2,1	celda 2,2

Vamos ahora a ver cómo podemos usar nuestro gif transparente para crear una tabla con un borde exterior de color. El método es totalmente análogo al anterior, pero ahora establecemos unos márgenes de 1 pixel y un color de fondo para estos diferente del de la tabla. Mira el código:

<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffff66">
<tr>
    <td rowspan="4" width="1" bgcolor="red"><IMG height=1 alt="" src="images/bs.gif" width=1 border=0></td>
    <td colspan="2" height="1" bgcolor="red"><IMG height=1 alt="" src="images/bs.gif" width=1 border=0></td>
    <td rowspan="4" width="1" bgcolor="red"><IMG height=1 alt="" src="images/bs.gif" width=1 border=0></td>
</tr>
<tr align="center">
    <td  width="100">celda 1,1</td>
    <td  width="100">celda 1,2</td>
</tr>
<tr align="center">
    <td>celda 2,1</td>
    <td>celda 2,2</td>
</tr>
<tr>
    <td colspan="2" height="1" bgcolor="red"><IMG height=1 alt="" src="images/bs.gif" width=1 border=0></td>
</tr>
</table>

y mira el resultado:

	celda 1,1	celda 1,2
	celda 2,1	celda 2,2

Por último, podemos usar un gif de 1x1 pixels, pero de color, para construir una línea horizontal separadora. Sí, ya sé que en HTML tenemos la etiqueta <HR> que nos permite hacer esto, pero debemos tener en cuenta que mediante ella no podemos crear una línea de un color dado en Nestscape Navigator 4x, ya que este siempre las pinta grises. Para obtener una línea horizontal de color rojo, por ejemplo, basta escribir:

<p align="center"><img src="images/puntorojo.gif" width="500" height="1" border="0" alt=""></p>

dónde puntorojo.gif es una imagen de 1x1 pixels de color rojo, a la que hemos dado la anchura necesaria. El resultado obtenido es: