6. Márgenes y separación de celdas
El único aspecto que nos queda por aprender sobre las tablas en HTML es el correspondiente a los márgenes en las celdas y la separación entre ellas. Antes de nada es conveniente comentar que el lenguaje HTML considera a cada celda como un elemento individual con sus propios bordes que no comparte con las celdas adyacentes. Basándonos en esta forma de ver las tablas podemos cambiar la distancia que existe entre los bordes de las células adyacentes usando el atributo CELLSPACING (Espaciado de celdas). El valor por defecto de este atributo es 1. En general se suele usar para eliminar el espaciado entre celdas (como veremos en el ejercicio 7-3) o para aumentarlo para crear un efecto como el del siguiente ejemplo:
<TABLE CELLSPACING="10"
BORDER="1">
... Código de la tabla ...
</TABLE>
|
cuyo resultado podemos observar en la figura 7.16:
Figura 7.16. El atributo CELLSPACING controla el espaciado entre los bordes de cada una de las celdas de la tabla.
Una segunda propiedad de las tablas de gran importancia es el margen que existe entre los elementos de las celdas y sus bordes. Esta separación es nula por defecto, pero puede aumentarse usando el atributo CELLPADDING. La forma de usar este atributo queda descrita en el siguiente ejemplo:
<TABLE CELLPADDING="10"
BORDER="1"
ALIGN="LEFT">
... Código de la tabla ...
</TABLE>
|
y en la figura 7.17:
Figura 7.17. Con el atributo CELLPADDING podemos aumentar los márgenes entre el contenido de las celdas y su borde.
Tanto en el atributo CELLPADDING como en el atributo CELLSPACING el valor entre comillas representa un tamaño en pixeles.
Para practicar un poco el uso de estos dos atributos se propone un ejercicio con el que conseguiremos crear el efecto de una imagen entera a partir de sus trozos.
6.1. Ejercicio 7.3
Este ejercicio consiste en la división de una imagen grande en cuatro partes de igual tamaño. El objetivo será volver a juntarlas. Para ello usaremos una tabla de 2x2 con una de las partes en cada celda, sin borde y con márgenes y espaciado de las celdas nulo. El resultado buscado debe parecerse al de la figura 7.18 (exceptuando las flechas y las letras rojas que son indicativas):
Figura 7.18. Ejercicio 7.3. Aunque pueda parecer que hay una sola imagen, en realidad hay cuatro cuidadosamente colocadas.
Las imágenes a usar, así como una posible solución, a este ejercicio pueden encontrarse en el archivo ej7-3.zip .
6.2. Conclusión
Bueno, ya podemos respirar tranquilos, ya sabemos todo lo que se puede saber sobre la creación de tablas en el lenguaje HTML estándar. Sin duda es como para estar orgullosos, porque el método que usa este lenguaje no es excesivamente sencillo. Por esta razón no debe desanimarse el lector que llegado a este punto no recuerde parte de las etiquetas y atributos descritos en este capítulo. Nuestro objetivo no era ese, sino que como buenos creadores de páginas web conozcamos las etiquetas del lenguaje HTML sin llegar a saberlas de memoria pero lo suficiente para reconocer su función, conocer las posibilidades de las tablas y poder crear rápidamente tablas sencillas. Para la creación de tablas muy complicadas es recomendable usar un asistente como los que incluyen FrontPage o HomeSite (la versión shareware será incluida en el archivo FrontPage.zip y HomeSite.zip). Aunque estos asistentes no siempre nos ofrecen justo lo que queremos, nosotros ya conocemos lo suficiente para retocar el código de la tabla una vez creada.