Tablas
Las tablas son sin duda uno de los elementos más potentes del HTML. Con pocos elementos se pueden conseguir efectos espectaculares. En el interior de las celdas de una tabla, que pueden ser con borde visible o invisible, se puede poner cualquier cosa: texto de cualquier tamaño y color, imágenes, links... Por supuesto, además de permitir cualquier contenido, tienen sus propios atributos de alineación tanto horizontal como vertical, y atributos de dimensionado. Por defecto se autodimensionan, es decir, se adaptan en tamaño a su contenido, pero también es posible definirlo de forma fija. Las tablas han sido utilizadas largo tiempo para maquetar el contenido de las páginas, y aunque las nuevas tendencias aconsejen hacer esto con bloques (capas XHTML), no es un elemento que vaya a desaparecer, y es mucho más sencillo de utilizar.
El elemento básico de definición de tabla es <TABLE> </TABLE> y en su interior se disponen los sub elementos <TR> para definir una fila (Row) <TH> para definir una cabecera (Header) <TD> para definir una celda de datos (Data). Estos sub elementos también han de llevar sus correspondientes cierres: </TR> </TH> </TD>.
Una cabecera <TH> es lo mismo que una celda de datos <TD> pero de forma automática el texto de su contenido recibe los atributos de negrita y centrado. Sólo es posible definirlas al principio de las filas, de las columnas o de ambas a la vez.
He aquí una tabla-resumen de los elementos utilizados y los atributos que admite cada uno:
Resumen de tablas
| TABLE | TR | TD | TH | CAPTION |
| BORDER | X | - | - | - | - |
| BORDERCOLOR | X | - | - | - | - |
| ROWSPAN | - | - | X | X | - |
| COLSPAN | - | - | X | X | - |
| ALIGN | - | X | X | X | X |
| VALIGN | - | - | X | - | - |
| WIDTH | X | - | X | - | - |
| HEIGTH | X | - | X | - | - |
| CELLPADDING | X | - | - | - | - |
| CELLSPACING | X | - | - | - | - |
| NOWRAP | - | - | X | - | - |
| EVENTS | X | X | X | X | - |
Veamos el significado de cada atributo:
- BORDER Indica el ancho de los bordes de la tabla. Se mide en píxels. Si no se escribe este atributo, es equivalente a BORDER=0 (por defecto).
- BORDERCOLOR Establece el color de los bordes de la tabla. No funciona igual en todos los navegadores.
- CELLSPACING Indica el número de píxels que separan una celda de otra. Aunque pueda parecerlo, no hace lo mismo que BORDER. Su valor por defecto es 2.
- CELLPADDING Indica los píxels de separación entre el borde de la celda y su contenido. Su valor por defecto es 1.
- WIDTH Según donde se escriba, sirve para controlar el ancho de toda la tabla o de sus columnas. Si se incluye en <TABLE> puede indicar el tamaño tanto en píxels como en porcentaje respecto al ancho de la pantalla.
- ALIGN Indica la alineación horizontal de los datos dentro de las celdas. Puede tener tres valores: LEFT (izquierda), RIGHT (derecha) y CENTER (centro).
- VALIGN Indica la alineación vertical de los datos dentro de las celdas. Puede tener tres valores: TOP (arriba), BOTTOM (abajo) y MIDDLE (centro).
- ROWSPAN Se utiliza en la definición de una celda (<TD>) o cabecera (<TH>) para indicar que su anchura o altura son equivalentes a un determinado número de filas.
- COLSPAN Se utiliza en la definición de una celda (<TD>) o cabecera (<TH>) para indicar que su anchura o altura son equivalentes a un determinado número de columnas.
- NOWRAP Para impedir que las líneas de texto dentro de una celda se trunquen en los espacios en blanco.
- EVENTS Se pueden capturar todos los eventos típicos de los navegadores en cualquiera de las partes de una tabla. Para ello es necesario JavaScript, y no es compatible con todos los navegadores.
Por ejemplo: <TABLE BORDER onMouseOver="javascript:alert('Aviso')"> ... </TABLE>
Recientemente se han implementado al elemento <TABLE> algunos atributos muy interesantes que permiten definir qué bordes o líneas de la tabla se mostrarán:
Este atributo sirve para definir qué bordes del marco de la tabla serán visibles: <TABLE FRAME="valor"> ... </TABLE> donde valor puede ser:
- void - Ningún lado (por defecto).
- above - Sólo el borde superior
- below - Sólo el borde inferior.
- hsides - Sólo los bordes superior e inferior.
- vsides - Sólo los lados derecho e izquierdo.
- lhs - Sólo el lado izquierdo.
- rhs - Sólo el lado derecho.
- box - Los cuatro lados.
- border - Los cuatro lados (no es lo mismo que el ya conocido)
Y este otro sirve para definir qué bordes de la tabla serán visibles: <TABLE RULES="valor"> ... </TABLE> donde valor puede ser:
- none - Ninguna línea de división (por defecto).
- groups - Sólo aparecen líneas de división entre grupos de filas y grupos de columnas.
- cols - Sólo aparecerán líneas de división entre filas.
- rows - Sólo aparece líneas de división entre columnas.
Estos últimos atributos no funcionan igual en todos los navegadores, y no funcionan en absoluto si no son de la última generación. Según el navegador de que se trate, puede que haya que combinar más de un atributo para conseguir el efecto deseado. Lo mejor es hacer pruebas con algunas versiones para asegurarse.
Las posibilidades son tan amplias, que lo mejor es ver la página de ejemplos de tablas que encontrarás en el índice.