Tabla con las esquinas redondeadas, tipo 2
Otro ejemplo de tabla con las esquinas redondeadas, en este caso con un borde de un pixel, también redondeado.
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.
Seguir navegando a partir aquí:
+ 1 manual relacionado
+ 1 categoria relacionada
+ 1 comentario (Añadir)
+ 3 comentarios no revisados
| 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.
|
Manuales relacionados con este artículo
Categorias relacionadas
A través de las categorías de nuestro directorio se pueden encontrar otro tipo de recursos relacionados con este artículo:
+ Entrar en
Taller HTML
Comentarios de los visitantes
|
Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar.
|
| Se muestra un comentario revisado |
Comentario de Christian
11/11/02
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
| Comentarios sin revisar |
|
Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.
|
Se han encontrado 3 comentarios sin revisar
Ir arriba