ETIQUETA TABLE

LAS PROPIEDADES DE LAS TABLAS EN HTML

Las tablas tienen sus propios atributos o propiedades que se colocaran dentro de su etiqueta, la etiqueta <table>. Entre los más importantes destacamos:

align	Alinea horizontalmente la tabla con respecto a su entorno.
background	Nos permite colocar un fondo para la tabla a partir de un enlace a una imagen.
bgcolor	Da color de fondo a la tabla.
border	Define el número de píxel del borde principal.
bordercolor	Define el color del borde.
cellpadding	Define, en píxel, el espacio entre los bordes de la celda y el contenido de la misma.
cellspacing	Define el espacio entre los bordes (en píxel).
height	Define la altura de la tabla en píxel o porcentaje.
width	Define la anchura de la tabla en píxel o porcentaje.

Los atributos height y width de la tabla funcionan igual que como explicamos para la celda. En cambio el atributo align solo nos permite justificar la tabla con respecto a su entorno.

La tabla: <table>
Como ya ocurre con la etiqueta body, a una tabla también lo podemos definir el fondo de la misma. Esto lo podemos conseguir con el parámetro "bgcolor", que nos pondrá un color de fondo,  o "background" para poner una imagen de fondo. Recuerda que si la imagen es más pequeña que la tabla, ésta se repetirá tanto a lo ancho como a lo largo.

Otro aspecto que podemos definir de la tabla es el borde. Esto lo haremos con el parámetro "border". Como en todas los parámetros que ya hemos visto escribiremos: border= "x" siendo la x un número. Ese número indicará el grosor del borde. Si no ponemos borde o lo escribimos "0", la tabla no mostrará borde ninguno. Por supuesto, también podemos darle color al borde, escribiendo la etiqueta "bordercolor" e indicando el color que queramos para nuestro borde.

El parámetro "width" indircará la anchura de la tabla. Esta anchura la podemos poner en píxeles (width= "300") o con porcentaje (width= "100%").

Dos parámetros más son cellspacing (que define el espacio entre las celdas de la tabla) y cellpadding  (que le marca a la tabla el espacio que debe dejar alrededor del texto dentro de una celda).

Como ejemplo, escribiremos el hipotético supuesto de querer una tabla que sea ancha al 100%, con un borde azul de un píxel de grosor y con un cellpadding de 10 y con un cellspacing de 10. El código quedaría de la siguiente forma.

<table width="100%" border="1" bordercolor="#0000FF" cellspacing="10" cellpadding="10"></table>

Una vez explicadas las tablas, vamos a pasar a explicarte las partes fundamentales de las mismas.
Las filas: <tr>
Como hemos visto en el encabezado las filas se escriben gracias a las etiquetas <tr> con su correspondiente cierre </tr>. El contenido de las columnas que están dentro de la fila lo podemos alínear tanto horizontal como verticalmente.
Para alinearlo verticalmente utilizaremos el atributo "valign" para poder alinearlo arriba de la celda ("top"), en el centro ("middle") o debajo ("bottom").
Para alinearlo horizontalmente utilizaremos el atributo "align". Con este atributo podremos alinear el contenido de las celdas en el centro ("center"), a la izquierda ("left"), a la derecha ("right") o justificado ("justify").
Por supuesto a las filas también les podemos definir el color de fondo ("bgcolor") y el color del borde ("bordercolor").
Las celdas <td>
Las celdas que van dentro de cada fila las tenemos que escribirlas con la etiqueta <td> y su correspondiente cierre </td>.
Al igual que en las filas, en las celdas podemos definir el la alineación del contenido que está dentro con los atributos "valign" y "align".
Las celdas poseen unos atributos que nos ayudan a poder agrupar tantas celdas o tantas columnas como indiquemos en él. Para agrupar celdas utilizaríamos el atributo "colspan" y para agrupar celdas el atributo "rowspan".
Por ejemplo, para agrupar en una celda 2 columnas tenemos que escribir: <td colspan="2"></td>. Y para agrupar dos filas, la indicación sería la siguiente: <td rowspan= "2"></td>.

Los atributos que definen las dimensiones, height y width, funcionan de una manera análoga a la de las celdas tal y como hemos visto en el capitulo anterior. Contrariamente, el atributo align no nos permite justificar el texto de cada una de las celdas que componen la tabla, sino más bien, justificar la propia tabla con respecto a su entorno.Vamos a poner tres ejemplos de alineado de tablas, centradas, alineadas a la derecha y a la izquierda.

Ejemplo de tabla centrada	Esta tabla está centrada (aling="center"). Solo tiene una celda. Este sería un texto cualquiera colocado al lado de una tabla centrada
Ejemplo de tabla alineada a la derecha	Esta tabla está alineada a la derecha (aling="right"). Solo tiene una celda. Para que se vea el efecto de alineado a la tabla debemos colocar un texto al lado y el texto rodeará la tabla, igual que ocurría con las imágenes alineadas a un lado.
Ejemplo de tabla alineada a la izquierda	Esta tabla está alineada a la izquierda (aling="left"). Solo tiene una celda. Para que se vea el efecto de alineado a la tabla debemos colocar un texto al lado y el texto rodeará la tabla, igual que ocurría con las imágenes alineadas a un lado.

Los atributos cellpading y cellspacing nos ayudaran a dar a nuestra tabla un aspecto más estético. En un principio puede parecernos un poco confuso su uso pero un poco de practica será suficiente para hacerse con ellos.En la siguiente imagen podemos ver gráficamente el significado de estos atributos. 

Podéis comprobar vosotros mismos que los atributos definidos para una celda tienen prioridad con respecto a los definidos para una tabla. Podemos definir, por ejemplo, una tabla con color de fondo rojo y una de las celdas de color de fondo verde y se verá toda la tabla de color rojo menos la celda verde. Del mismo modo, podemos definir un color azul para los bordes de la tabla y hacer que una celda particular sea mostrada con un borde rojo. (Aunque esto no funcionará en todos los navegadores debido a que algunos no reconocen el atributo bordercolor.

Tabla de color rojo de fondo	El atributo bgcolor de la tabla está en rojo.
Celda normal	Esta celda está en verde. tiene el atributo bgcolor en color verde

Tablas anidadas

Muy útil también es el uso de tablas anidadas. De la misma forma que podíamos incluir listas dentro de otras listas, las tablas pueden ser incluidas dentro de otras. Así, podemos incluir una tabla dentro de la celda de otra. El modo de funcionamiento sigue siendo el mismo aunque la situación puede complicarse si el número de tablas embebidas dentro de otras es elevado.

Consejo: Páginas como DesarrolloWeb.com y muchas otras (La mayoría de las páginas avanzadas) que basan su diseño en tablas, realizan anidaciones de tablas constantemente para meter unos elementos de la página dentro de otros. Se pueden anidar tablas sin límite, sin embargo, en el caso de Netscape 4 hay que tener cuidado con el número de tablas que anidamos, porque a medida que metemos una tabla dentro de otra y otra dentro de esta y otra más, aumentando el grado de anidación sucesivamente... podemos encontrar problemas en su visualización y puede que la página tarde un poco de tiempo más en mostrarse en pantalla.

Vamos a ver un código de anidación de tablas. Veamos primero el resultado y luego el código, así conseguiremos entenderlo mejor.

Celda de la tabla principal

Tabla anidada, celda 1 Tabla anidada, celda 2 Tabla anidada, celda 3 Tabla anidada, celda 4

Este sería el código:<table cellspacing="10" cellpadding="10" border="3">
<tr>
    <td align="center">
    Celda de la tabla principal
    </td>
    <td align="center">
        <table cellspacing="2" cellpadding="2" border="1">
        <tr>
            <td>Tabla anidada, celda 1</td>
            <td>Tabla anidada, celda 2</td>
        </tr>
        <tr>
            <td>Tabla anidada, celda 3</td>
            <td>Tabla anidada, celda 4</td>
        </tr>
        </table>
    </td>
</tr>
</table>

Ejemplos prácticos

Hasta aquí la información que pretendíamos transmitiros sobre las tablas en HTML. Sería importante ahora realizar algún ejemplo de realización de una tabla un poco compleja. Por ejemplo la siguiente:

Animales en peligro de extinción
Nombre	Cabezas	Previsión 2010	Previsión 2020
Ballena	6000	4000	1500
Oso Pardo	50	0
Lince	10
Tigre	300	210

Se puede ver esta tabla en otra ventana, donde también podremos examinar su código fuente.Otro ejemplo de tabla con el que podemos practicar:

Climas de América del Sur
Venezuela Colombia Ecuador Perú Parte de arriba de América del Sur. Países como:	Argentina Chile Uruguay Paraguay Parte de abajo de América del Sur. Países como:
Bosque tropical, clima de sabana, clima marítimo con inviernos secos.	Climas marítimos con veranos secos, con inviernos secos, climas frios, clima de estepa, clima desértico.

También la podemos ver en una ventana a parte para extraer su código fuente.

Maquetar con tablas

En HTML tradicional se utilizan las tablas, aparte de mostrar información tabulada como hemos visto en este artículo, para maquetar páginas web. Con las tablas podemos generar una serie de espacios donde podemos mostrar contenidos estructurados en columnas y filas, como la maquetación de una revista o un portal. Lamaquetación por tablas la comentamos en un taller de HTML. Es muy recomendable su lectura para hacerse una idea del proceso de creación de páginas medianamente avanzadas y con información bien estructurada.