Diseño de tablas en páginas HTML

Las tablas son elementos excelentes para mostrar información organizada. Descubra en este artículo algunas de las particularidades de la gestión de tablas en páginas HTML.

Una tabla consta de filas y columnas. El contenido de cada referencia de fila/columna es una celda. El lenguaje HTML permite especificar cabeceras o pies de tabla (lo que sería su leyenda), agrupar celdas, poder una fila de títulos y muchas cosas más. Los tags o etiquetas básicas para crear tablas son:

... Delimita el contenido de una tabla completa. Una tabla consta siempre de filas y, probablemente, de un título o pie. Los atributos soportados son muy numerosos, destacando BORDER=n y WIDTH=n%. En donde n representa un valor numérico referente al ancho del borde, o al ancho de la tabla, respectivamente; en este último caso, se refiere a valores porcentuales del ancho total de la ventana del navegador. Por ejemplo, crearía las bases para un tabla con un ancho de borde 1 y que ocupe un 80% del total del ancho de la ventana. Más adelante volveremos sobre el tema y daremos algunos datos adicionales sobre su uso.

Nos permite asociar un título o pie de texto a la tabla. Se puede indicar un modificador de posición (encima o debajo), mediante el atributo ALIGN, que puede tomar los valores TOP o BOTTOM. Por ejemplo, .

... Delimita el contenido de una fila de la tabla. En cada fila habrá, habitualmente, varias celdas. Si escribimos:

Se mostraría una fila con dos celdas, con los textos indicados.

Delimita el contenido de cada una de las celdas, de una primera fila de cabeceras de columna. El texto contenido estará centrado y en negrilla (semejante a indicar ALIGN=CENTER y acotado por ...). Por lo demás, similar al tag delimitador de celdas, que comentamos seguidamente.

Delimita el contenido de cada una de las celdas de una fila. Véase más arriba, cuando expusimos el significado de ....

Por tanto, una estructura básica, algo así como una maqueta de partida, bien podría ser semejante a:

...

Tabla 1

Celda 1	Celda 2
...	...

...

...

...

...

Tabla 1

Serie 1
Celda A1
Celda B1

Como veremos seguidamente, todos estos tags son susceptibles de contener modificadores de aspecto, bien del conjunto de la tabla, bien de cada uno de sus apartados (filas o celdas concretas). Estos modificadores pueden afectar a los colores de fondo y todo lo referente al aspecto de las fuentes de caracteres. Y no sólo eso; unir celdas, fijar espaciados entre el borde y estas, entre el texto y el borde de las celdas y variar el ancho exterior, son también otras variables a conjugar. Por supuesto, también las justificaciones de los contenidos y los tamaños absolutos o relativos de toda la tabla conforman un gran poder de personalización.

Modificadores del aspecto global

Algunas propiedades (o atributos) afectarán al aspecto global de la tabla; ejemplos son la existencia de bordes, el color del propio borde, su ancho, el espaciado entre celdas y entre el borde de cada celda y su contenido. Dentro del tag principal

, podremos incluir los atributos optativos que siguen (observe que se separan mediante un espacio en blanco):

WIDTH Fija el ancho total de la tabla; las referencias pueden ser relativa o absolutas. Por ejemplo WIDTH=70%, que significarían un ancho de la tabla que corresponde al 70% del ancho de la ventana del navegador. Esto es, si modificamos el ancho de la ventana, la tabla cambiará consecuentemente sus dimensiones para abarcar el 70% del ancho nuevo; eso hasta que ya no pueda disminuir más, porque no sería capaz de mostrar la información de las celdas. En el segundo caso, por ejemplo especificando WIDTH=200, se fijaría un ancho absoluto de 200 puntos de pantalla. En esta ocasión, al redimensionar la ventana del navegador, la tabla mantendrá el mismo ancho.

BORDER En la mayor parte de los casos, nos interesará que la tabla esté acotada por un borde externo. Por ejemplo BORDER=4, significaría que se expondrá un borde de un ancho de 4; notará que el formato del borde es de apariencia 3D. El valor numérico del ancho se refiere a puntos de pantalla.

BORDERCOLOR Fija el color del borde de la tabla. Su sintaxis es BORDERCOLOR="color" o bien BORDERCOLOR="#RRGGBB". En el primer caso se pueden utilizar los nombres de color predefinidos, como red, blue, drakblue, yellow, yellowgreen, etc.. En el segundo caso, se indican valores de saturación Rojo/Verde/Azul, con valores hexadecimales de 00 a FF. Así, rojo puro, red, sería equivalente a #FF0000. (NOTA: actualmente, sólo soporta este atributo Microsoft Internet Explorer 2.0 o superior).

CELLPADDING Fija el espacio, en puntos de pantalla, que habrá entre el borde de una celda y su contenido. Por ejemplo CELLPADDING=2, que significaría que se dejaría un espacio de 2 pixeles entre el borde y el texto.

CELLSPACING Fija el espacio, en puntos de pantalla, que habrá entre los bordes de las celdas. Por ejemplo CELLSPACING=4, que significaría que se dejaría un espacio de 4 pixeles entre los bordes laterales, superiores e inferiores de celdas adyacentes.

BACKGROUND Si este atributo, que es muy utilizado en el tag que marca el cuerpo del documento HTML , se incluye en la definición de una tabla, servirá para establecer como fondo, para toda la tabla, una imagen determinada (formatos GIF o JPEG). (NOTA: actualmente, sólo s