Continuamos con el capítulo anterior, ofreciendo otras distintas maneras de conseguir efectos en una tabla.
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.
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
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...