Recuadro elegante y sencillo con HTML

  • Por
  • 14 de junio de 2005
  • Valoración:
  • 8 Comentarios
  • Taller 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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Comentarios

Carlos Gómez

14/6/2005
Hola,

La verdad es que no voy a aportar nada, sólo decir que este artículo me parece desfasadísimo. Utilizar tablas anidadas a estas alturas para lograr ese efecto, que tan facil se conseguiria con una capa, un encabezado y css es utilizar técnicas de hace cinco años por lo menos. Con css el código sería más limpio, menos pesado, más semantico y mucho menos complejo.

Un saludo

Miguel Angel Alvarez

14/6/2005
Hola. Respondiendo al comentario anterior, cabe decir que tiene toda la razón. Sin embargo, esto es un taller de HTML y no de CSS (para ello tenemos el taller de CSS también en DesarrolloWeb.com). Hay que comprender que muchas personas están aprendiendo HTML para empezar a hacer sus primeras páginas web y este tipo de artículos les viene bien para practicar y mejorar sus webs.

Carlos

15/6/2005
Supongo que tienes parte de razón, si bien no se hasta que punto es conveniente que alguien que empieza con html y css, (creo que no habria que separarlos, van de la mano en casi todo), lo haga con técnicas que idealmente poco a poco deberian dejar de usarse (tablas anidadas para layouts, elementos deprecados como font etc...) para intentar conseguir una web mejor hecha (semántica, estandard etc...).

Un saludo

Gonzalo

18/6/2005
antes que todo gracias por los boletines me han servido mucho en mis clases, con respecto a los comentarios debo decir, que la experiencia me ha enseñado que, para hablar de elegancia un una pagina web es indispensable aprender HTML, como base fundamental, me parece bien que aun queden personas dispuestas a rescatar algunos de los pilares de la programacion web.
Un saludo y felicitaciones

John Fabio Achury

31/8/2005
Realmente es fácil de hacer y práctico para los alumnos de mi colegio que están aprendiendo HTML. Gracias

valdo

19/9/2006
primeramente !gracias Miguel¡ por el articulo enviado, esta muy bien, y siempre son escenciales los ejemplos tal y como los presentan ustedes.

uniformeazul

02/7/2012
Saludos
Estoy muy agradecido por la valiosa información que a diario encuentro en vuestra página y me gustaría solicitar muy comedidamente me ayuden a ubicar dos recuadros juntos, les confieso que ya he intentado de todas las formas posibles que se me han ocurrido y no doy con la solución que me imagino no "debe" ser muy dificil, pero para quienes estamos principiando en esta hermosa actividad...se nos vuelve un poco dificil el asunto...mil gracias y saludos desde Ecuador!

Virulazo Benvenuto

24/7/2012
AGRADECER EL CODIGO Y EL GUSTO.
Estimados señores, por intermedio del presente les comento que ¡AGRADEZCO! enormemente los ejemplos suministrados en estos ejemplos, tanto por su sencillez como por su buen gusto.
Buscando con Google fue el primero que apareció y el cual elegí sin buscar más.

Muchas gracias por su aporte, a los administradores de la página como a quien proveyó el ejemplo.

Estoy desarrollando mi página web en un sitio gratis porque no manejo html y estos elementos me son de mucha utilidad. http://virulazo.weebly.com

Atte.

Virulazo Benvenuto

Compartir