RECUADRO ELEGANTE Y SENCILLO

RECUADRO ELEGANTE Y SENCILLO..

Al maquetar una página web con HTML, es muy habitual querer destacar una porción de texto que se desee remarcar. Muchas veces utilizamos tablas y le damos un borde o un fondo para destacar su contenido, pero no siempre resultan muy vistosas. En este sencillo taller, apto para principiantes, vamos a mostrar la manera de hacer un recuadro bonito con pocos recursos.

Se trata de utilizar tablas, pero las decoraremos de una manera sencilla, pero que puede ser nueva para los menos experimentados. En principio, lo mejor será que echemos un vistazo a los ejemplos que vamos a construir.

Como se ha podido ver en el ejemplo, vamos a construir tres recuadros distintos, aunque muy similares. Estos recuadros tienen un borde de 1 píxel y colores distintos para el fondo de la celda con la cabecera y el cuerpo del recuadro. Las pautas de construcción son las siguientes:

Crear una tabla con un color de fondo como deseemos y con espacio entre celdas de 1 píxel y espacio entre el borde de la celda y su contenido de 3 pixel (estos últimos atributos son cellspacing="1" cellpadding="3")

La tabla tendrá dos celdas. Una con la cabecera de la tabla, donde colocaremos el título del recuadro y otra con el contenido propiamente dicho. Ambas celdas tendrán estilos propios. El título estar más destacado, poniendo negrita o un color al texto que contraste bien y el cuerpo un color más tenue, para ayudar a la lectura del texto.

Los colores de fondo de las celdas se deben asignar tal como queramos que aparezca en la tabla. Así el fondo de la tabla sólo se podrá ver en el espacio que hay entre celdas, que habíamos indicado que era un píxel.

Primera tabla

<tr>

<b>Recuadro curioso con HTML</b>

</font></td>

</tr>

<tr>

Este es el interior del recuadro. Esperamos que os resulte elegante... es muy sencillo.

</font>

</td>

</tr>

</table>

Segunda tabla

La segunda tabla que hemos realizado simplemente tiene un pequeño cambio en el tipo de letra utilizado para los textos, que hemos hecho más pequeño. Además, se ha asignado un color de fondo para la cabecera con el titular de la tabla, para que sea distinto que el fondo asignado para toda la tabla

El código de la segunda tabla es el siguiente:

<tr>

<b>Recuadro curioso con HTML</b>

</font>

</td>

</tr>

<tr>

Este es el interior del recuadro. Esperamos que os resulte elegante... es muy sencillo.

</font>

</td>

</tr>

</table>

Tercera tabla

Para complicar un poco el ejercicio hemos pensado en que el cuerpo del recuadro destacado podría ser un conjunto de opciones. Las opciones las pondremos dentro de una tabla, pero dado que la tabla con las opciones debe tener estilo distinto que la tabla general, hemos metido una tabla dentro de otra, es decir, hemos hecho una anidación tablas.

<tr>

<td bgcolor="#B7F259"><font size=1 face="verdana, arial, helvetica"><b>Recuadro curioso con HTML</b></font></td>

</tr>

<tr>

<tr>

Opción uno

</font></td>

</tr>

<tr>

Otra opción con texto en varias líneas

</font></td>

</tr>

<tr>

Lo que sea que desees destacar

</font></td>

</tr>

<tr>

Última opción

</font></td>

</tr>

</table>

</td>

</tr>

</table>

Como se puede ver, esta tabla no difiere mucho con la tabla segunda. Simplemente que el cuerpo de la tabla es otra tabla. Es un ejemplo de anidación de tablas interesante para practicar HTML.