Tabla con las esquinas redondeadas, tipo 2

  • Por
Otro ejemplo de tabla con las esquinas redondeadas, en este caso con un borde de un pixel, también redondeado.
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

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.

Compartir

Comentarios

Christian

11/11/2002
Para aprender a crear tu mismo tus propias imagenes para redondear tablas, en lugar de utilizar las que te proporcionamos, tienes un pequeño tutorial en esta dirección:

http://www.desarrolloweb.com/faq/113.php

Chewie

28/4/2004
Tambien se pueden crear tablas con esquinas redondeadas mucho más facil usando CSS, por ejemplo:

<style>
.table
{-moz-border-radius: .3em .3em .3em .3em; border: 1px dotted #365478; background-color: #40586F;}
</style>
<table class="table">
<tr>
<td>
</td>
</tr>
</table>
<td></td>

Pueden ver el ejemplo corriendo en www.fusionnintendo.net en la sección de trucos...

Esto es bastante funcional si no quieres o no puedes crear imagenes, además es mucho más facil

Mauricio Prudencio

04/1/2005
buen articulo pero que pasa cuando a la pagina en la que esta la tabla le asignas una referencia a de una hoja de estilos (todo se distorciona) trate de solocionarlo pero no se puede, gracias

Jose

30/3/2006
tengo un problema con este tipo de tablas, no se si es culpa del frontpage o mia, pero una vez la coloco en la pagina, al verla en el navegador la tabla se me baja bastante, rompiendome el diseño de la web..¿A que puede ser debido eso?Gracias