Recuadro elegante y sencillo con HTML

Cómo hacer con HTML, de manera sencilla y práctica, un recuadro para destacar parte del contenido de una página web.

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

La primera tabla tiene este código:

<table width="280" cellspacing="1" cellpadding="3" border="0" bgcolor="#1E679A">
<tr>
   <td><font color="#FFFFFF" face="arial, verdana, helvetica">
<b>Recuadro curioso con HTML</b>
   </font></td>
</tr>
<tr>
   <td bgcolor="#ffffcc">
   <font face="arial, verdana, helvetica">
   Este es el interior del recuadro. Esperamos que os resulte elegante... es muy sencillo.
   </font>
   </td>
</tr>
</table>

El color del texto de la celda con el titular es blanco, para que contraste con el color de fondo de la celda, que es en este caso el mismo que el de la tabla, pues no se ha indicado ningún color en la celda.

La celda con el cuerpo de la tabla se ha puesto de color amarillo pálido

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:

<table width="200" cellspacing="1" cellpadding="3" border="0" bgcolor="#165480">
<tr>
   <td bgcolor="#5FA6D7">
<font size=1 face="verdana, arial, helvetica">
<b>Recuadro curioso con HTML</b>
</font>
   </td>
</tr>
<tr>
    <td bgcolor="#ffffcc">
   <font face="verdana, arial, helvetica" size=1>
   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.

<table width="200" cellspacing="1" cellpadding="3" border="0" bgcolor="#80A93E">
<tr>
   <td bgcolor="#B7F259"><font size=1 face="verdana, arial, helvetica"><b>Recuadro curioso con HTML</b></font></td>
</tr>
<tr>
   <td bgcolor="#F5ECB9">

    <table width="95%" cellspacing="1" cellpadding="1" border="0" align="center">
<tr>
   <td valign=top><font face="verdana, arial, helvetica" size=1>+</font></td>
   <td><font face="verdana, arial, helvetica" size=1>

Opción uno

      </font></td>
   </tr>
   <tr>
      <td valign=top><font face="verdana, arial, helvetica" size=1>+</font></td>
   <td><font face="verdana, arial, helvetica" size=1>

Otra opción con texto en varias líneas

      </font></td>
   </tr>
   <tr>
      <td valign=top><font face="verdana, arial, helvetica" size=1>+</font></td>
      <td><font face="verdana, arial, helvetica" size=1>

Lo que sea que desees destacar

      </font></td>
   </tr>
   <tr>
      <td valign=top><font face="verdana, arial, helvetica" size=1>+</font></td>
      <td><font face="verdana, arial, helvetica" size=1>

Ú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.

Se pueden ver las tablas generadas con estos códigos en una página aparte.

Podemos comparar este artículo con su contrapartida en CSS.

+ 1 manual relacionado
+ 1 categoria relacionada
+ 6 comentarios no revisados

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

Informe de Miguel Angel Alvarez* Director de 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

+ Entrar en Taller HTML

Comentarios sin revisar

Añadir un comentario del artículo Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.

 Se han encontrado 6 comentarios sin revisar

Ver los comentarios no revisados

Añadir un comentario del artículo

Enlaces:

Maestrosdelweb

  Ir arriba