CAPITULO 8 (Tablas para todo)

Si, aunque solo fuera por un momento, pensaste que las listas eran el elemento definitivo en cuanto a forma de ordenar la información, te equivocaste de plano. Esta de aquí abajo sí es la forma definitiva, el modo mas decente y, a veces, la chapuza que te sacará de algún apuro con el formateo.

Vale, imagino que ahora te haces una idea de qué es una tabla. Por si las moscas, vamos a verlo un poco mas despacio:

La tabla anterior tiene el siguiente código:

Parece un poco complicado, así que veamoslo más despacio:

El tag que define la tabla es <TABLE> </TABLE>, toda la tabla debe estar entre estas dos etiquetas, y las opciones que se apliquen aquí tendrán efecto sobre toda la tabla.

Con <TR> </TR> defininos cada una de las líneas de la tabla, los atributos que se empleen en este tag tendrá efecto en toda la línea. En resumen, tendremos tantos <TR>...</TR> como filas tenga la tabla y, como la tabla de arriba tiene dos filas, entonces tiene dos tags <TR>...</TR>.

Y, por últmo, dentro de cada fila indicamos una celda concreta con las etiquetas <TD> </TD>, entre las cuales pondremos lo que queremos que valla en esa celda (Texto en nuestro caso, aunque pueden ser imágenes o cualquier otra cosa).

Esto es lo básico de las tablas, ahora vamos a meternos un poco mas en profundidad.

Los principales atributos aplicables al tag <TABLE> son:

align=(valor), que puede valer "left", "right" o "center", y que, como te estás imaginando, alinea toda la tabla a la izquierda, derecha y centro, respectivamente.

bgcolor=(color), esta opción permite elegir el color del fondo de la tabla, para esto se usan los códigos de color que ya conocemos.

border=(tamaño), donde tamaño es el grosor en pixels del borde de la tabla. Si es cero, la tabla no tendrá borde (es la opción por defecto si no usas el atributo border) si no pones nada ( o sea, solo pones "border", sin signo igual),entonces se considera como si fuera "border=1".

width=(ancho), donde (ancho) puede ser un número que representará el ancho de la tabla, o estar en la forma número% (por ejemplo, 50%) que indicaría el ancho en proporción al ancho total de la ventana.

cellspacing=(separación), que indica la separación en pixels que existe entre cada celda.

cellpadding=(separación), no la confundas con la anterior, esta indica la separación entre el borde de la celda y su contenido.

cols=(columnas), especifica el número de columnas de la tabla (no es obligatorio ponerlo, pero se supone que los navegadores modernos tardan menos en representar la tabla si lo pones).

Un nuevo atributo para TABLE, que no es soportado por muchos navegadores, es FRAME, que permite decidir la forma en la que se verán los bordes exteriores de la tabla. Su valor puede ser uno de los siguientes:

frame="void" hace que se no muestre el ningún borde lde la tabla.

frame="avove" hace que se muestre solo la línea superior de la tabla (igual que con border=0, es la opción por defecto).

frame="below" muestra solo el borde inferior de la tabla.

frame="hsides" hace que se vean los bordes inferior y superior.

frame="vsides" para mostrar solo los bordes derecho e izquierdo.

frame="lhs" solo muestra el lado izquierdo.

frame="rhs" solo muestra el lado derecho.

frame="border" o frame="box" hacen que se vean los cuatro lados de la tabla.

Otro atributo parecido, pero este dedicado a modificar el aspecto de las líneas de separación entre celdas, es RULES:

rules="none" hace que no aparezcan líneas entre las celdas.

rules="all" para que aparezcan líneas entre todas las celdas.

rules="rows" aparecen solo las líneas horizontales, entre fila y fila.

rules="cols" hace que solo aparezcan las líneas verticales, entre columna y columna.

rules="groups" solo mostrará las líneas entre grupos de filas y/o grupos de columnas (más adelante veremos qué son estos grupos).

Las filas, que como hemos visto se declaran con los tags <TR>...</TR>, tiene las siguientes opciones:

align=(valor), que puede ser left, center, right o justfy, los cuales, respectivamente, alinean el CONTENIDO de la celda a la izquierda, centrado, derecha o justificado.(bueno, lo de justfy lo dicen las especificaciones del HTML pero, hasta ahora, no hay navegadores que lo soporten).

valign=(valor), alinea verticalmente los datos en cada celda (si esta ocupa mas de una línea), puede ser top, middle, botton o baseline, que se corresponden con situar los dato arriba, en el centro, abajo o (mucha atención) arriba, pero alineando la linea de base de las letras, aunque uses fuentes de distinto tamaño. (lo malo es que los navegadores todavía no soportan esto).

Y, por último, las celdas tienen los siguientes atributos:

bgcolor=(color), igual que en <TABLE>

align=(valor), igual que en <TR>

valign=(valor), igual que en <TR>

colspan=(número), ver más abajo.

rowspan=(número), ver más abajo.

colspan hace que una celda se expanda una o más columnas a la derecha, y rowspan hace lo mismo, pero hacia abajo. ambas propiedades se pueden usar conjuntamente. Veamoslo con un ejemplo:

pica aquí para ver la tabla resultante directamente.

Y, como último consejo, ten en cuenta que, si quieres que una celda de una tabla aparezca en blanco, tendrás que "llenarla" usando nuestra vieja amiga "&nbsp;", porque si no lo haces no aparecerá la celda en cuestión, o aparecerá de forma extraña o incorrecta.

Puedes ponerle un título a tu tabla por medio de la etiqueta <CAPTION> del siguiente modo:

<CAPTION ALIGN="modo">título de la tabla</caption>

Este elemento debe ponerse justo despés de <TABLE>, antes de cualquier fila de la tabla. Los navegadores deberían mostrar el título que le indiquemos FUERA del cuerpo de la tabla.

El lugar concreto donde aparezca este título lo indicamos con el atributo ALIGN. Si indicamos TOP (que es la opción por defecto), este aparecerá sobre la tabla, si usamos BOTTON, debería aparecer al pié de esta, con la opción LEFT hacemos que se vea a la izquierda de la tabla, y con RIGHT se smostrará a la derecha.

Otro elemento útil para organizar nuestras tablas es <TH>, que sirve para crear unas celdas especiales llamadas cabeceras. Se usa exactamente igual que <TD>, y también crea una celda, pero se trata de una celda especial, que suele contener información sobre la tabla. Por ejemplo, supongamos que quieres crear un horario en el que organizar tus actividades a lo largo de la semana. Lo mejor para ello es crear una tabla en la que cada colunna sea un día de la semana y cada fila una hora. Para que seas más claro, la primera celda de cada fila contendrá la hora y la primera de cada columna contendrá el dí. Esas son las celdas de cabecera.

Bueno, ya se que es complicado. Veamoslo:

Aquí puedes ver este ejemplo.

Espero que esto aclare el uso de TH. La mayoría de los navegadores pondrán el contenido de esta etiqueta en negrita. Como puedes ver, también hemos usado CAPTION para poner un título a la tabla.

Con esto hemos visto lo más básico de las tablas. Si no te ha quedado claro será mejor que le des otro vistazo antes de continuar. Ahora vamos a ver algunas cosas un poco más complejas.

Complicando la cosa

Con lo que hemos visto hasta ahora ya podemos hacer tablas tremendamente elaboradas. Pero HTML 4.0 nos provee de nuevas herramientas tremendamente poderosas para construir nuestras tablas.

Por ejemplo: Si quieres que el contenido de todas o parte de las celdas de una tabla aprezca centrado, tendrá que usar el atributo ALIGN en cada una de ellas. ¿No habrá una forma de trabajar con grupos de celdas? Lo hay. De hecho, hay varios.

El primer método es usar el elemento <TBODY>, que sirve para agrupar filas de una tabla. Su uso es muy simple: Solo hay que agrupar las filas que quieras entre las etiquetas <TBODY> y </TBODY>. Adepta los mismos atributos ALIGN y VALIGN que hemos visto para <TD>, solo que en este caso se aplicarán a todas las celdas contenidas en TBODY, tal como puedes ver en este ejemplo:

Este ejemplo está aquí.

Como puedes ver, hemos usado dos TBODYs en la tabla anterior. El primero agrupa las dos primeras filas, y el segundo la tercera. Esta etiqueta nos permite asignar comodamente las características de grupos completos de filas.

Pero, a veces, puede ser mucho más interesante organizar nuestra tabla por columnas. Pra ello disponemos, en principio, de la siguiente etiqueta:

<COLGROUP SPAN="número de colunmas" WIDTH="ancho" ALIGN="modo"></COLGROUP>

Vale: En principio, no es necesario cerrar esta etiqueta (aunque es recomendable), luego veremos un caso en el que sí es obligatorio.

En SPAN debes poner el número de columnas que se agrupan (si no usas SPAN, se considerará que se trata de una sola columna), y WIDTH, VALIGN, y ALIGN funcionan exactamente igual que en el elemento TD.

Podemos repetir el elemento COLGROUP tantas veces como sea necesario del siguiente modo:

Y aquí tienes este ejemplo.

Pero COLGROUP nos ofrece otra posibilidad: La de definir algunas características para una o varias columnas dentro de un mismo grupo. Esto se hace por medio de la etiqueta <COL>, que se usa dentro de COLGROUP del siguiente modo:

<COLGROUP>
<COL>
<COL>
</COLGROUP>

Se trata de una etiqueta vacía (esto es, no tiene etiquta de cierre </COL>) y tiene los mismos atributos SPAN, WIDTH, ALIGN y VALIGN que ya conocemos.

Otras dos etiquetas interesantes son las que nos permiten crear, con un grupo de filas, una cabecera y un pié de tabla. La principal utilidad de estos elementos se muestra a la hora de imprimir: Si tu tabla ha de dividirse en varias páginas, la cabecera se imprimirá al principio de cada una de ellas, y el pié al final.

Para poner cabeceras usamos un procedimiento similar al que vimos en TBODY, pero con la siguiente etiqueta:

<THEAD>
<TR><TD>Celda 1</TD><TD>Celda 2</TD></TR>
...
</THEAD>

Como ves, hemos creado, al igual que con TBODY, un grupo de filas. De hecho, la única diferencia práctica con TBODY es la relativa a la impresión del documento.

THEAD acepta los mismos atributos que TBODY.

Para crear un pié de tabla hacemos exactamente lo mismo, pero con el siguiente tag:

<TFOOT>
<TR><TD>Celda 1</TD><TD>Celda 2</TD></TR>
...
</TFOOT>

Que funciona exactamente igual que THEAD.

Al usar estas etiquetas de agrupamiento debes tener muy en cuenta el orden: Primero va THEAD, despues TFOOT y, por último, TBODY. Mejor será que veamos un ejemplo:

Este ejemplo está aquí.

Fijate en que he puesto dos TBODYs. Puedes poner todos los que necesites. Además, aunque TFOOT es el segundo elemento que hemos puesto, aparece al final de la tabla.

Y con esto parece que hemos terminado este capítulo. Probablemente ha sido uno de los más largos y complejos de este curso (Consuélate, los siguientes no pueden ser peores). Nos vemos en la próxima entrega de este curso de Edición Extremadamente Simple de HTML.