Tablas


Introducción

Las tablas son posiblemente la manera más clara de organizar la información. También es el modo más adecuado de maquetar texto y gráficos de una manera algo más controlada que con los parámetros ALIGN.

Las tablas se definen de la siguiente manera. Primero, las características de la tabla, luego las de cada fila y dentro de ésta, cada celda. Así pues, una tabla con 2 filas y 3 columnas se declarará así:

Código Resultado
<TABLE>
  <TR>
    <TD>1,1</TD>
    <TD>1,2</TD>
    <TD>1,3</TD>
  </TR>
  <TR>
    <TD>2,1</TD>
    <TD>2,2</TD>
    <TD>2,3</TD>
  </TR>
</TABLE>
1,1 1,2 1,3
2,1 2,2 2,3

Como podéis ver (o mejor no ver) la tabla no tiene mucho aspecto de tabla. Quedaría mejor con unos bordes, ¿no? Puede que tampoco le viniese mal mayor espacio entre celdas o mayor anchura. Estas son las cosas que podremos cambiar con los atributos de TABLE:

Atributo Utilidad
BORDER Especifica el grosor del borde que se dibujará alrededor de las celdas. Por defecto es cero, lo que significa que no dibujará borde alguno.
CELLSPACING Define el número de pixels que separarán las celdas.
CELLPADDING Define el número de pixels que habrá entre el borde de una celda y su contenido.
WIDTH Especifica la anchura de la tabla. Puede estar tanto en pixels como en porcentaje de la anchura total disponible para él (pondremos "100%" si queremos que ocupe toda la anchura de la ventana).
ALIGN Alinea la tabla a izquierda (LEFT), derecha (RIGHT) o centro (CENTER).

Si ahora, por ejemplo definimos ahora la tabla anterior como <TABLE BORDER=1 WIDTH="50%" ALIGN=CENTER> veremos lo siguiente:

1,1 1,2 1,3
2,1 2,2 2,3



Definir las columnas

Ahora que hemos definido la tabla nos toca hacer lo mismo con las columnas. Cada columna se define con una etiqueta TR, que tiene los siguientes atributos:

Atributo Utilidad
ALIGN Alinea el contenido de las celdas de la columna horizontalmente a izquierda (LEFT), derecha (RIGHT) o centro (CENTER).
VALIGN Alinea el contenido de las celdas de la columna verticalmente arriba (TOP), abajo (BOTTOM) o centro (MIDDLE) .



Definir las filas

Por último, nos queda definir cada celda gracias a la etiquetas TD y TH. Estas etiquetas son equivalentes, pero la última se utiliza para cabeceras, de modo que su interior se escribirá en negrita y centrado. Estos son los atributos de ambas:

Atributo Utilidad
ALIGN Alinea el contenido de la celda horizontalmente a izquierda (LEFT), derecha (RIGHT) o centro (CENTER).
VALIGN Alinea el contenido de la celda verticalmente arriba (TOP), abajo (BOTTOM) o centro (MIDDLE) .
WIDTH Especifica la anchura de la celda con respecto a la anchura de la tabla. También se puede especificar tanto en pixels como en porcentaje.
NOWRAP Impide que, en el interior de la celda, se rompa la línea en un espacio.
COLSPAN Especifica el número de celdas de la fila situadas a la derecha de la actual que se unen a ésta (incluyendo la celda en que se declara este parámetro). Es por defecto uno. Si se pone igual a cero, se unirán todas las celdas que queden a la derecha.
ROWSPAN Especifica el número de celdas de la columna situadas debajo de la actual que se unen a ésta.

Posiblemente los dos últimos parámetros no puedan quedar claros sin ejemplos. Vamos a ver una tabla de 3x3 con una celda que se une a una de la derecha y otra que se une a otra de debajo:

Código Resultado
<TABLE BORDER=1>
  <TR>
    <TD ROWSPAN=2>1,1 y 1,2</TD>
    <TD>1,3</TD>
  </TR>
  <TR>
    <TD COLSPAN=2>2,1 y 3,1</TD>
    <TD>2,2</TD>
    <TD>2,3</TD>
  </TR>
  <TR>
    <TD>3,2</TD>
    <TD>3,3</TD>
  </TR>
</TABLE>
1,1 y 1,2 1,3
2,1 y 3,1 2,2 2,3
3,2 3,3

Como podemos ver, cuando declaramos un celda con ROWSPAN o COLSPAN, no deberemos declarar las celdas absorbidas o la tabla se nos liará de una manera horrible.


Título de la tabla

Por último, vamos a ver como definir un título a la tabla. Esto se hace por medio de la etiqueta CAPTION. Para ver cómo funciona, vamos a incluirlo en la declaración de la tabla anterior:

Código Resultado
<TABLE BORDER=1>
  <CAPTION>
    Ejemplo de tablas
  </CAPTION>
...
</TABLE>
Ejemplo de tablas
1,1 y 1,2 1,3
2,1 y 3,1 2,2 2,3
3,2 3,3

Esta etiqueta admite sólo un parámetro: ALIGN, que es por defecto TOP. Si lo definimos como BOTTOM el título se colocará al final de la tabla en lugar del comienzo.

Lección Anterior HTML Lección Siguiente
Lección Anterior

Lección Siguiente