Diseño y Programación de Páginas Web

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
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 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 , 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
. La altura será la suficiente para que quepan todos los contenidos de la tabla.
Este es el código en cuestión:
Cuerpo esto es el Cuerpo esto es el Cuerpo esto es el Cuerpo...
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.
103