Tabla con las esquinas redondeadas, tipo 2

06/8/02 -

	Cuerpo de la tabla Aquí podremos escribir lo que deseemos, que la tabla crecerá lo suficiente para contener todo el texto que coloquemos, incluso imágenes. Espero que parezca un diseño interesante, aunque seguro que los hay mejores...

Vamos a ver como realizar con HTML una tabla con las esquinas redondeadas y con un pequeño marco de un píxel. Es un ejemplo de tabla con los bordes redondeados como cualquier otro, de hecho, ya hemos visto un ejemplo sobre este asunto en nuestro anterior artículo Tabla con esquinas redondeadas. Como siempre, lo mejor para darse cuenta de lo que pretendemos construir es verlo en un ejemplo y al lado de estas mismas líneas podemos verlo.

En este caso utilizaremos las siguientes imágenes, que podemos guardar pulsando sobre ellas con el botón derecho del ratón y seleccionando "Guardar imagen como...". También podemos descargar todo el código y las imágenes en un archivo comprimido.


Creación de la tabla

Vamos a ver el código HTML necesario para crear este ejemplo. Hemos de tener en cuenta que el código se podría haber creado de varias maneras, aunque nosotros presentamos la que consideramos más versátil.

Hemos construido la tabla con las correspondientes etiquetas de tablas de HTML. Como consideración cabe señalar que las etiquetas de las imágenes que se colocan dentro de las celdas tienen que estar pegadas a la etiqueta </TD>, que se utiliza para cerrar la tabla. Si no es así puede que nuestro ejemplo quede descuadrado.

El tamaño de la tabla en anchura se puede definir perfectamente en el atributo width de la etiqueta <TABLE>. La altura será la suficiente para que quepan todos los contenidos de la tabla.

Este es el código en cuestión:

<TABLE WIDTH=300 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD>
<IMG SRC="images/tablita_01.gif" WIDTH=6 HEIGHT=6></TD>
<TD background="images/tablita_02.gif">
<IMG SRC="espacio.gif" WIDTH=1 HEIGHT=6></TD>
<TD>
<IMG SRC="images/tablita_03.gif" WIDTH=6 HEIGHT=6></TD>
</TR>
<TR>
<TD background="images/tablita_04.gif">
<IMG SRC="espacio.gif" WIDTH=6 HEIGHT=1></TD>
<TD bgcolor=E8E8E8 valign=top>
Cuerpo esto es el Cuerpo esto es el Cuerpo esto es el Cuerpo...
</TD>
<TD background="images/tablita_06.gif">
<IMG SRC="espacio.gif" WIDTH=6 HEIGHT=1></TD>
</TR>
<TR>
<TD>
<IMG SRC="images/tablita_07.gif" WIDTH=6 HEIGHT=6></TD>
<TD align=center background="images/tablita_08.gif">
<IMG SRC="espacio.gif" WIDTH=1 HEIGHT=6></TD>
<TD>
<IMG SRC="images/tablita_09.gif" WIDTH=6 HEIGHT=6></TD>
</TR>
</TABLE>

No hay mucho que explicar... simplemente que recojas las imágenes descargando el archivo comprimido (a notar que han sido colocadas en un directorio llamado images y que si no están allí no funcionará el ejemplo) y que la imagen que se llama espacio.gif es simplemente un píxel transparente.

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

Añadir un comentario del artículo Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar.

Se muestra un comentario revisado

Añadir un comentario del artículo

Comentarios sin revisar

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

Ver los comentarios no revisados

Añadir un comentario del artículo

Enlaces:

Maestrosdelweb

  Ir arriba