Reciclaje

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 dealineació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 adesaparecer, 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:
| 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 | - |
Resumen detablas |
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. Aunquepueda 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 alancho 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 losespacios 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...