5.11 - TABLAS

Introducción

     Permite la representación de datos por filas y columnas, en forma tabular. La definición es muy flexible indicando solo los elementos que forman cada fila y columna, calculándose de forma automática el tamaño que deben tener las celdas. En una tabla podemos introducir todo tipo de elementos del lenguaje HTML como imagenes, enlaces, texto, listas, cabeceras, formularios, etc.

     No es necesario definir inicialmente el número de filas o columnas ya que estas se calculan según se va definiendo la tabla. En el caso que una fila tenga más columnas que otra, en las otras filas las columnas se representarán vacias, no siendo necesario que todas las filas sean iguales.

<TABLE> Definición de la Tabla

     Para definir una tabla usaremos la etiqueta <TABLE>, que tiene el siguiente formato:

<TABLE BORDER="tamaño del borde" >
       ... Definición de la tabla ...
</TABLE>

     En la etiqueta inicial TABLE definiremos los atributos que afectarán a toda la tabla, todos los atributos son opcionales. Todo lo que se incluya dentro de la instrucción de tabla se considerará como tal, pudiendo definir tablas anidadas (tablas dentro de tablas).

Ejemplo de tabla 1

     Puede presentar los siguientes atributos:

     Si se especifica se dibujará un borde alrededor de la tabla y separanado los distintos campos que presenta. Indicaremos un número que especificará el tamaño del borde, por defecto será 0, es decir, no se dibujará ningún borde. Aunque no se dibuje el borde sí se mantendrá el espaciado los elementos de la tabla.

Ejemplo de tabla 4

Ejemplo de tabla 5

     Indica el espacio que debe existir entre las distintas celdas de la tabla. Por defecto será 2. Si se indica 0 no habrá ningún espacio entre las celdas.

     Es la cantidad de espacio entre el borde de la celda y el contenido de esta, por defecto es 1. Si se indica 0 las celdas aparecerán sin separación.

Ejemplo de tabla 6

     Será el ancho de la tabla, se puede indicar como valor absoluto o como porcentaje del ancho del documento. En el primer caso se definirá en puntos y en el segundo en función del tamaño del documento (tamaño de la ventana del visualizador). Se recomienda utilizar tamaños de tabla en porcentaje del documento, ya que de esta forma la tabla queda perfectamente ajustada para cualquier tamaño del documento.

Ejemplo de tabla 9

     Definirá el alto de la tabla, a igual que WIDTH, se puede indicar en valor absoluto o en porcentaje. En este caso es más recomendado en valor absoluto ya que el alto es más dificil que pueda coincir con el tamaño de la ventana.

Dentro de la instrucción de la tabla se incluirán los diversas etiquetas que defininen el contenido de la tabla.

<CAPTION> Titulo de la tabla

      Especifica el titulo de la tabla, este se mostrará resaltado en la parte superior externa de la tabla. Siempre se mostrará centrado horizontalmente.

<CAPTION ALIGN=TOP|BOTTOM>Titulo de la tabla</CAPTION >

     Con el atributo ALIGN indicaremos si el titulo debe aparecer arriba (TOP) o debajo (BOTTOM) de la tabla.

<TR> Fila de la tabla

     Definirá cada una de las filas de la tabla y especificará los parámetros que afectarán a todas las celdas de la fila. Por cada elemento TR que se incluya se creará una fila de la tabla. No es necesario indicar la etiqueta de cierre </TR>. En caso de tablas anidadas será necesario incluir la etiqueta de cierre.

<TR ALIGN= LEFT ó CENTER ó RIGHT VALIGN= TOP ó MIDDLE ó BOTTOM >

     Se podrá especificar por defecto la alineación que tendrán los elementos dentro de las celdas.

     Indica la alineación del elemento dentro de la celda, en este caso afectará a todos los valores situados en la fila actual, tambien se podrá indicar individualmente en los elementos TD. Puede tomar uno de los siguientes valores:

  • LEFT: Alineación a la izquierda de la celda. Este el valor que se toma por defecto
  • RIGHT: Alineación a la derecha.
  • CENTER: Indicará centrado.

     Indicará la alineación vertical del dato dentro de la celda. Se podrá especificar donde se colocarán los datos dentro de la celda. Afectarán a toda la fila. Los valores que puede tomar son:

  • TOP: Parte superior de la celda.
  • MIDDLE: Centrado verticalmente dentro de la celda.
  • BOTTOM: En la parte baja de la celda.

     Indicará el color de fondo que tendrán todas las celda de la fila de la tabla. El formato para definir los colores es el mismo al que se usa para los atributos de BODY. Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 3.0 o superior.

Ejemplo de tabla 10

<TH> y <TD> Una celda de la tabla

     Define cada una de las celdas de una fila de la tabla, TH se usará para definir una celda de tipo cabecera, en este caso se mostrarán destacados en negrita y TD para definir una celda de datos. Estos elementos deben aparecer tras los elementos TR para definir cada una de las columnas de la fila. Existirá una columna por cada elemento TD ó TH que se defina. Aunque se puede indicar la etiqueta de cierre, no es necesario al tomarse implicitamente. Utilizaremos los elementos TH para los titulos de las filas o columnas y los elementos TD para los datos.

<TH ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY | DECIMAL ) VALIGN= ( TOP | MIDDLE | BOTTOM | BASELINE ) WIDTH=Tamaño BGCOLOR=color ROWSPAN=“Filas que debe contener la celda” COLSPAN= “Columnas que ocupa la celda” NOWRAP >

<TD ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY ) VALIGN= ( TOP | MIDDLE | BOTTOM ) WIDTH=Tamaño BGCOLOR=color ROWSPAN=“Filas que debe contener la columna” COLSPAN= “Columnas que ocupa la celda” NOWRAP>

Ejemplo de tabla 3

     Pueden presentar los siguientes atributos:

     Indica la alineación horizontal del dato dentro de la celda, se especificará individualmente para cada una de las celdas. Su significado es igual que el expresado para la etiqueta TR.

Ejemplo de tabla 7

     Indicará la alineación vertical del dato dentro de la celda. Se especifica individualmente para cada celda, el formato es el mismo que el expresado para TR.

Ejemplo de tabla 8

     Especifica el ancho que tendra la columna de la tabla, se puede especificar eln valor absoluto, en puntos de la pantalla o en tanto por ciento del tamaño de la tabla.

     Indicará el color de fondo que tendrá la celda de la tabla. El color hay que indicarlo independientemente para cada una de las celdas de la columna. El formato para definir los colores es el mismo al que se usa para los atributos de BODY. Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 3.0 o superior.

Ejemplo de tabla 10

     Indicará el número de filas que ocupará está celda en la misma fila. En este caso la celda se expandirá ocupando tantas celdas de la tabla inicial como se especifique. Esto permite definir por ejemplo celdas de cabecera que afecten a varias celdas de la tabla, ó bien, crear una fila que ocupen toda la tabla.

Ejemplo de tabla 2

      Indicará el número de columnas que ocupará la celda actual, obtendremos una celda que ocupa varias columnas. Igual que el anterior pero para el caso de las columnas.

Ejemplo de tabla 2

      Se usará para que no se divida la línea por defecto. Si la usamos las líneas de texto no se dividirán dentro de la celda en varias líneas. Por tanto si la linea es muy larga la columna de la tabla será tan ancha como la línea, solo se dividirá si se usa el elemento
.