Tabla con las esquinas redondeadas

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

18/6/02 -

	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.


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

+ 1 manual relacionado
+ 1 categoria relacionada
+ 2 comentarios (Añadir)
+ 6 comentarios no revisados

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

Informe de Juliana Monteiro Lazaro* Directora de CriarWeb.com URL: http://www.criarweb.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

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 muestran 2 comentarios revisados

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.

 Se han encontrado 6 comentarios sin revisar

Ver los comentarios no revisados

Añadir un comentario del artículo

Enlaces:

Maestrosdelweb

  Ir arriba