Tabla con diseño en su base II

22/4/04 - A raíz del taller de HTML Tabla con diseño en su base, hemos hecho unas pequeñas modificaciones para ilustrar cómo podemos mejorar el efecto, haciéndolo más versátil y manteniendo la sencillez.

Como recordará el lector, en el anterior taller se habían creado un par de tablas en distintos colores. Para ello habíamos utilizado dos imágenes, una en gris y la otra en rojo. El objetivo en este taller es utilizar una imagen que nos permita crear una tabla a la que podemos aplicarle distintos colores sin necesidad de disponer de varias imágenes.

El ejemplo de lo que vamos a crear se puede ver en una página aparte. Se puede observar que se han creado tablas con distintos colores, aunque la imagen utilizada en la base de las tres tablas es la misma.

Para ello vamos a crear una imagen que se adapte a tablas con colores distintos. La idea es crear una imagen que tenga en color blanco la parte de la tabla que no debe verse y en transparente la otra zona de la imagen que debe mostrar el propio color de la tabla.

La imagen en concreto es la siguiente:



Hay que colocar la imagen sobre fondo que no sea blanco para que pueda verse.

El código de la tabla es el siguiente, que sigue la misma filosofía que en el artículo anterior, por lo que si deseamos más explicaciones es recomendable leerlo.

<table width="149" cellspacing="0" cellpadding="0" border="0" bgcolor="B9B9B9">
<tr>
<td style="padding-top:8px; padding-left:9px; padding-right:3px;">
<b>Opciones</b>
<br>
<br>
+ Lo que sea
<br>
+ Opción guay
<br>
+ Más enlaces
<br>
<br>
</td>
</tr>
<tr>
<td><img src="tabla3.gif" width="149" height="25" alt="" border="0"></td>
</tr>
</table>

Esta tabla se puede variar, como ya adelantábamos, cambiando el color de fondo de la tabla, con el atributo bgcolor.

<table width="149" cellspacing="0" cellpadding="0" border="0" bgcolor="F11919">
<tr>
<td style="padding-top:8px; padding-left:9px; padding-right:3px;">
<b>Opciones</b>
<br>
<br>

+ Lo que sea
<br>
+ Opción guay
<br>
+ Más enlaces
<br>
<br>
</td>
</tr>
<tr>
<td><img src="tabla3.gif" width="149" height="25" alt="" border="0"></td>
</tr>
</table>

Nada más! Esperamos que hayáis entendido la técnica de la imagen transparente y os haya parecido interesante este taller.

Recordar que podemos ver el ejemplo completo en una página aparte

Autoría, licencia y acciones sobre este artículo

Informe de Miguel Angel Alvarez* Director de DesarrolloWeb.com URL: http://www.desarrolloweb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

Comentarios de los visitantes

Añadir un comentario del artículo Aun no hemos recibido comentarios de este artículo. Puedes ser el primero en enviar tu comentario.

Enlaces:

Maestrosdelweb

  Ir arriba