Tabla con las esquinas redondeadas

Taller de HTML en el que creamos una tabla con color de fondo cuyas esquinas están redondeadas.
Tabla con esquinas redondeadas

Cuerpo de la tabla. Podemos colocar el texto que deseemos, que la tabla crecerá en altura lo suficiente para contenerlo.
En este taller de HTML vamos a crear una tabla con las esquinas redondeadas, que nos podrá servir para destacar alguna información en el texto o crear una barra de enlaces lateral un poco más vistosa. A la derecha aparece una tabla como la que pretendemos conseguir.

El ejemplo no resulta nada complejo. Simplemente se crea una tabla normal, en la que colocamos en cada una de sus esquinas un gráfico que hace la forma redondeada. Los gráficos que utilizamos en esta ocasión tienen una parte de color y otra transparente. La parte de color es la que dibuja el borde redondeado y la parte transparente deja ver el color de fondo que hayamos colocado en la tabla. Las imágenes se pueden ver a continuación. Para guardarlas utiliza el botón derecho del ratón encima de la imagen y selecciona la opción que pone "Guardar imagen como..." o algo parecido. También podrás descargar las imágenes y el ejemplo completo en un archivo comprimido.

Imagen de la esquina superior izquierda Imagen de la esquina superior derecha
Imagen de la esquina inferior izquierda Imagen de la esquina inferior derecha
Imagen de un pixel trasnparente

En nuestro ejemplo hemos creado imágenes que tienen la parte no transparente de color blanco, que corresponde con el color de fondo de la página donde queremos colocar la tabla. Si queremos colocar una tabla como esta sobre un fondo distinto al blanco deberíamos crear unos gráficos que tengan el mismo color que el fondo, en lugar de blanco.

Tabla con esquinas redondeadas

Esta tabla tiene otro color de fondo, pero está creada con las mismas imágenes que la tabla anterior.
Lo bueno de que el otro color utilizado en la imagen sea transparente es que la tabla que creamos puede tener el color de fondo que se desee. Esta otra tabla -a la derecha- se crea con las mismas imágenes del ejemplo y, como se puede ver, tiene otro color de fondo que la anterior.

Creación de la tabla

Ahora vamos a estudiar el código HTML que hace falta para crear esta tabla con esquinas redondeadas. Probablemente con otro código HTML más simple también se podría construir, pero hemos preferido añadirle un pequeño exceso de atributos y etiquetas que servirá para estar seguros de que se puede visualizar correctamente en todos los navegadores.

La tabla que utilizamos contiene varias celdas dispuestas en tres filas y tres columnas. En las celdas de las esquinas es donde colocamos las imágenes que hacen que los bordes aparezcan redondeados. En el resto de celdas de la tabla que forman el borde, para asegurarnos de que tienen el tamaño correcto, colocamos imágenes de un píxel transparente con sus correspondientes atributos de anchura y altura modificados a lo que necesitamos. En la celda del centro es donde colocamos el cuerpo de la tabla, con todo el texto que queremos que vaya dentro, sus imágenes, etc.

<table width=300 cellspacing=0 cellpadding=0 bgcolor="#333399" border=0>
<tr>
<td width=11><img src="sup-izq.gif" width=11 height=11></td>
<td width=278><img src="pixeltrans.gif" width=278 height=1></td>
<td width=11 align=right><img src="sup-der.gif" width=11 height=11></td>
</tr>
<tr>
<td><img src="pixeltrans.gif" width=1 height=1></td>
<td><font color="#ffffff" face="verdana,arial,helvetica" size=2>
<b>Tabla guay</b>
<br>
<br>
Este es el texto que quieras ponerle a la tabla. Puedes poner tanto texto como desees, que la tabla se hará lo suficientemente grande como para que quepa todo.

</font></td>
<td><img src="pixeltrans.gif" width=1 height=1></td>
</tr>
<tr>
<td width=11><img src="inf-izq.gif" width=11 height=11></td>
<td width=278><img src="pixeltrans.gif" width=278 height=1></td>
<td width=11 align=right><img src="inf-der.gif" width=11 height=11></td>
</tr>
</table>


Si alguno desea utilizar este código para crear sus propias tablas únicamente debería modificar unos pocos datos:
  • Texto del cuerpo de la tabla.
  • En caso de que se desee modificar el ancho de la tabla
    + Tamaño de la tabla. Atributo width de la etiqueta <table>
    + Tamaño de los píxeles transparentes, en la primera y última fila. Atributo width de las etiquetas <img> de los pixels transparentes.
Los anchos de los pixels transparentes (en la primera y última fila de la tabla) tienen que ser el ancho de la tabla menos el ancho de las dos imágenes que aparecen en las esquinas. En nuestro código, como el ancho de la tabla es de 300 píxel y el ancho de las dos imágenes de los bordes es de 11 píxel, el ancho de la imagen de píxel transparente será 300 - 11 x 2 = 300 - 22 = 278

Para acabar, recordamos que se pueden descargar las imágenes, así como el código fuente de la tabla con esquinas redondeadas, en un archivo comprimido.

Tabla con esquinas redondeadas más sencilla

Puede que este otro código sea mucho más interesante para crear una tabla con esquinas redondeadas y conservando, según nuestras pruebas, la compatibilidad con los navegadores. Lo hemos creado a propósito de una revisión del artículo.


Tabla redondeada más sencilla

Esta tabla es básicamente como las otras, pero está construida con muchas menos etiquetas.

Puede que sea más útil, porque no hay que configurar más que el color y el tamaño.

La tabla conserva prácticamente el mismo aspecto, pero en esta ocasión hemos eliminado todos las imágenes con un pixel transparente que utilizábamos en el anterior ejemplo, con lo que el código se simplifica.

En esta ocasión tenemos dos filas y tres columnas. Las imágenes están dispuestas de la misma manera, aplicando más atributos para alinearlas correctamente. La fila central, que es donde está el cuerpo de la tabla, está expandida a dos filas con el atributo rowspan=2.

<table width=400 cellspacing=0 cellpadding=0 bgcolor="#663366" border=0 align="right">
<tr>
<td width=11 valign="top" align=left><img src="images/sup-izq.gif" width=11 height=11></td>
<td rowspan=2>
<font color="#ffffff" face="verdana,arial,helvetica" size=1>
<br>
<b>Tabla redondeada más sencilla</b>
<br>
<br>
Esta tabla es básicamente como las otras, pero está construida con muchas menos etiquetas.
<br>
<br>
Puede que sea más útil, porque no hay que configurar más que el color y el tamaño.
<br>
<br>
</font>
</td>
<td width=11 valign="top" align=right><img src="images/sup-der.gif" width=11 height=11></td>
</tr>
<tr>
<td width=11 align=left valign=bottom><img src="images/inf-izq.gif" width=11 height=11></td>
<td width=11 align=right valign=bottom><img src="images/inf-der.gif" width=11 height=11></td>
</tr>
</table>

Si alguno desea utilizar este código para crear sus propias tablas únicamente debería modificar:

  • Texto del cuerpo de la tabla.
  • color de fondo de la tabla

Autor

Juliana Monteiro Lazaro

Directora de CriarWeb.com

Compartir

Comentarios

clever

20/6/2002
Sencillo y útil ejemplo de como dar aspectos a una tabla, en este caso redondeada.

Pero he visto en muchas webs, tablas en las que tienen una silueta redondeada, y esto no se como hacerlo sin poner una imagen de fondo.

Si sabéis como hacerlo y lo podéis explicar lo agradecería.

Saludos y felicidades por la web.

Christian Santalucía

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

Luis

30/7/2004
Excelente sito para los q recien nos iniciamoes en el desarrollo de pg Web

Sigan adelate......!!!!!

PAOLA

28/7/2005
ME GUSTARIA DE GRAN MANERA ALGUIEN ME PUDIERA AYUDAR , PUES NO ENCUENTRO EN NINGUN LUGAR UNA PAGINA COMPLETA DONDE PUEDA AGARRAR CODES PARA PONERLE CORAZONES Y DE OTRAS IMAGENES EN EL MAUSE PARA MI PAGINA EH MIRADO MUHCAS PAGINAS DONDE SALEN CORAZONES Y NIEVE AL PERSEGUIR EL MAUSE AGRADECERIA ENORMENENTE SI ME PUEDEN AYDUDAR
ATENTAMENTE
PAOLA
GRACIAS DE ANTE MANO.

Sara Rodríguez Sánchez

21/8/2005
HOLA!!!
Saludos a todos los que colaboran para que esta página sea de mucha utilidad. Felicitaciones. A partir de que tuve trabajos escolares de html, visito su página y me parece muy entendible.

Tengo una duda con respecto a las tablas redondeadas, descargué el archivo y no entiendo bien cómo hacer que las esquinas tengan esa apariencia, ya que por más que modifico el código, no pasa nada.
Tal vez me puedan ayudar...

Agradeceré la respuesta... GRACIAS

Jorge T.

05/6/2006
hola buen dia . he estado interesado en lo de la tablas con esquina redondeada y lo que vi aca en su explicacion es muy bueno y me funciono, lo unico es que en el Internet explorer me aparece la silueta de las 4 imagenes de la esquina en otro color y no la del fondo de la pagina, con Opera,Mozilla, se me muestra bien la tabla redondeada, excepto en internet explorer, a como explique anteriormente.
si alguien sabe por que pasa esto por fa me responde.

gracias por todo

Jorge T.

05/6/2006
Sara lo que tienes qu hacer es copiar el codigo que esta en este sitio web,(yo escogi el segundo , es mas sencillo). descargas las 4 imagenes que estan en la tablita casi al inicio de la pagina , con click der. sobre cada una de ellas y las guardas en la carpeta de imagenes que tienes en tu sitio(ellas se llaman sup-der.gif,sup-izq.gif,inf-izq.gif,inf-der.gif).
luego copias el codigo que esta en el segundo ejemplo del sitio (casi al final) y lo pegas en tu archivo en donde quieras la tabla redondeada guardas el archivo y revisas los cambios en el navegador para ver como te quedo, y luego lo que te queda es ordenar , como quieres tu tabla, mejorar el tamaño, y cambiar el texto que quieras dentro de la tabla.
bueno espero que este mas comprendible mi explicacion,

atte. Jorge T. (jgtm25@yahoo.com)

desarrollador

17/10/2007
hola a todos.

estoy creando un sitio web, para la facultad de una universidad pero no se como registrar usuarios y ademas autenticarlos enviandoles automaticamente un mensaje al correo electronico para darles de alta en mi pagina, utilizo el lenguaje php.

gracias a todos los que me puedan ayudar...

Adrian Olmedo

12/12/2008
Respondo para el que le está haciendo una Web para la facultad de su Universidad.

Se hacer el sistema de login de usuarios, pero sin envio de msn a su correo por que para eso necesitas otro sistema de envio de mensajes llamado mgi, que creo que tiene que ser pagado, pero es mejor que no me preguntes de eso por que no se nada sobre ese sitema solo lo Logeo de Usuarios.

Bueno si estás interesado en hacer el Sistema de Login de Usuario Completo en PHP con MySQL (Base de Datos) este es mi e-mal: adrianolmedo.ve@hotmail.com

Adrian Olmedo - adrianolmedo.ve@hotmail.com

veronica alvarado

05/5/2010
descargo de las imagenes
no se pueden descargar las imagenes para hacer la tabla con esquinas redondeadas como hago me urgen tener esas images y utilizar este tipo de tablas agradecer mucho me hagan llegar las imagenes que utilizan para este tipo de tablas gracias

gio

27/5/2016
mas facil es eto
lo mejor para poder hacer bordes redondeados es css solo tienes que marcar la tabla en css y escribir siendo "r" el radio.
border-radius: "r"px "r"px "r"px "r"px;

asi que cada "r" es el radio de los cuatro bordes que tiene la tabla xao pendejos

Janneth

28/2/2018
codigo
es necesario tener un gráfico previamente, pero este nos dará algo más de trabajo. Con cualquier editor de gráficos (el "Paint" de Windows, por ejemplo) generas un círculo del color que quieras, y con el borde transparente o de otro color. A continuación lo cortas en cuatro porciones, como una tarta, y guardas cada trozo con un nombre cualquiera, por ejemplo, angulo1, angulo2, etc.

Y este es el código necesario:
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#DDE0FC" width="20"><img src="angulo1.gif" width="20" height="20"></td>
<td bgcolor="#DDE0FC"> </td>
<td bgcolor="#DDE0FC" width="20"><img src="angulo2.gif" width="20" height="20"></td>
</tr>
<tr>
<td bgcolor="#DDE0FC" width="20"> </td>
<td bgcolor="#DDE0FC">Recuadro con ángulos redondeados</td>
<td bgcolor="#DDE0FC" width="20"> </td>
</tr>
<tr>
<td bgcolor="#DDE0FC" width="20"><img src="angulo4.gif" width="20" height="20"></td>
<td bgcolor="#DDE0FC"> </td>
<td bgcolor="#E5E7FD" width="20"><img src="angulo3.gif" width="20" height="20"></td>
</tr>
</table>
para que el efecto sea completo hay que dar el mismo color que tienen los gráficos como fondo de las celdas.