Tablas avanzadas

Las tablas, pueden tener a veces otras utilidades que la de ser simplemente una forma de presentar datos. Así por ejemplo, pueden usarse para mostrar una contabilidad, o ser los elementos principales de las bases de datos.

No vamos a entrar ahora en las distintas aplicaciones que pueden tener las tablas, pero sí que veremos las distintas partes en las que podemos estructurar una tabla, las cuales pueden distinguirse también, mediante HTML.

SECCIONES DE UNA TABLA

En una tabla avanzada, podemos distinguir entre la cabecera, el pie y las secciones de datos. Esto lo podemos marcar mediante las siguientes etiquetas HTML:

• thead: dentro de esta etiqueta pondremos la cabecera de la tabla. Incluiremos aquí todas las filas (<tr>) y celdas (<td>/<th>) que forman la cabecera.

• tfoot: en esta etiqueta incluiremos el pie o final de la tabla. Se incluirán las filas y celdas que forman el pie de la tabla.

• tbody: dentro de esta etiqueta incluiremos una sección de la tabla, con sus filas y celdas.

Cada tabla puede contener solamente una cabecera y un pie, pero se pueden incluir un número ilimitado de secciones (tbody). Las etiquetas <thead> y <tfoot> deben colocarse siempre antes de cualquier etiqueta <tbody>.

Aunque esto puede parecer extraño, debe hacerse así, la etiqueta <tfoot>escrita antes de la etiqueta <tbody>, que muestra en la página su contenido después de esta (al final de la tabla).

En principio estas etiquetas parece que no varían el contenido de la tabla, y que podríamos prescindir de ellas para construir la tabla; sin embargo, nos permite manejar las distintas partes de la tabla como si fueran bloques enteros, a los que se les puede aplicar un estilo o utilizarlos en otras aplicaciones (JavaScript, BBDD, etc.).

BLOQUES DE COLUMNAS

Podemos referirnos a toda una columna de una tabla mediante la etiqueta <col>…</col>. Esta etiqueta no altera la composición de la tabla, no añade ninguna columna, sino que hace referencia a la primera columna de la tabla. Si añadimos una segunda etiqueta <col>, hará referencia a la segunda columna, y así sucesivamente.

Esta referencia no varía la columna, pero si en la etiqueta <col> añadimos atributos que hagan referencia a estilos o a otras cosas, esos atributos afectaran a toda la columna.

La etiqueta <colgroup>…</colgroup> funciona de la misma manera, solo que se usa para un grupo de columnas. Para indicar el número de columnas a la que afecta, se le incluye el atributo “span=n”, donde “n” es el número de columnas a la que afecta.

NOTA: para agrupar conjuntos de filas <tbody> y para columnas <colgroup>. En el ejercicio se puede ver una tabla de tres filas. Se ha marcado un grupo de dos filas con <tbody>, justamente, las dos últimas. Para esas filas hemos definido, mediante los atributos de la etiqueta <tbody>, un centrado, un color de fondo y una alineación vertical superior. Los atributos que podríamos usar con la etiqueta <tbody> son un grupo reducido de los que podríamos asignar a etiquetas <tr> o <td>: “align”, “bgcolor” y “valign”, así como otras “class” e “id”, además de manejadores de eventos.

De manera similar, se pueden asignar atributos de CSS utilizando el atributo HTML “style”. Aunque hay que decir que el grupo de atributos CSS que son interpretados, cuando los colocamos en <tbody>, es bastante reducido. Internet Explorer y sus evoluciones dan mejor variedad de atributos aceptados.

En cuanto al siguiente ejercicio, se puede ver que <colgroup> se utiliza después de abrir la tabla y antes de empezar a meter los contenidos de filas y celdas. El atributo “span”, indica el número de columnas que se desean agrupar empezando por la primera. En nuestro ejemplo, se han agrupado las dos primeras columnas. Los otros atributos que podemos colocar en <colgroup> son: “align”, “id”, “class”, “style”, “valign”, “width” y manejadores de eventos JavaScript. Aunque Internet Explorer acepta otros atributos como “bgcolor”.

NOTA: podemos definir estilos CSS para las agrupaciones de columnas. De hecho lo correcto es aplicar los estilos con CSS.

Cuando queramos definir estilos para cada una de las columnas de la tabla, de manera que todas las columnas tengan su propio estilo, también utilizaremos . En este caso no se debe utilizar el atributo “span”, sino que se debe agregar la etiqueta , una por cada columna a la que pretendemos asignar estilos.

En el siguiente ejercicio, la tabla tiene tres columnas, hemos colocado la etiqueta , y dentro de esta, tres etiquetas , cada una con estilos propios.

En el primer no hay ningún atributo. Eso quiere decir que no estoy asignando ningún estilo a la primera columna de la tabla. El segundo ha definido una anchura de 100px. El tercer también hemos definido una anchura, pero esta vez con CSS con el atributo “style”.

Los atributos CSS que acepta esta etiqueta también son bastante reducidos en Firefox, aunque Internet Explorer acepta más.

Ejercicio-1

Ejercicio-2

Ejercicio-3

Ejercicio-4

Ejercicio-5

Ejercicio-6