Tema 7 - Tablas

<TABLE> Definición de la Tabla

• Permite la representación de datos por filas y columnas, en forma tabular.

• Sólo hay que indicar los elementos que forman cada fila y columna, calculándose de forma automática el tamaño que deben tener las celdas.

• Podemos introducir todo tipo de elementos del lenguaje HTML como imagenes, enlaces, texto, listas, cabeceras, formularios, tablas, 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.

• Si una fila tiene 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 >
        <TR>            Nueva Fila
            <TD>             Elemento (Celda)
            <TD>             Elemento (Celda)
        <TR>            Nueva Fila
            <TD>             Elemento (Celda)
            <TD>             Elemento (Celda)
    </TABLE>

    Ejemplo de tabla 1

ATRIBUTOS de <TABLE>

• ALIGN = "left | center | right"

     Indica la alineación de la tabla dentro del documento. Puede tomar uno de los siguientes valores:

• left : Alineación a la izquierda de la celda. (Por defecto)
• right: Alineación a la derecha.
• center : Indicará centrado.

• BORDER ="n"

     Si se especifica se dibujará un borde alrededor de la tabla y separando las distintas celdas que presenta. Indicaremos un número que especificará el tamaño del borde, por defecto es 1. Si se omite no se dibujará ningún borde. Aunque no se dibuje el borde sí se mantendrá el espaciado entre los elementos de la tabla.

Ejemplo de tabla 4

Ejemplo de tabla 5

• CELLSPACING="n"

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

• CELLPADDING="n"

     Es la cantidad de espacio entre el borde de la celda y el contenido de esta, por defecto es 1.

Ejemplo de tabla 6

• WIDTH="n" o "n%"

     Indica el ancho de la tabla, se puede indicar como valor absoluto o como porcentaje del ancho de la ventana. En el primer caso se definirá en puntos. Se recomienda utilizar tamaños de tabla en porcentaje, ya que de esta forma la tabla queda perfectamente ajustada para cualquier tamaño de ventana.

Ejemplo de tabla 9

• HEIGHT="n" o "n%"
  

     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.

ELEMENTOS DE UNA TABLA

    Dentro del bloque de la tabla se incluirán las diversas etiquetas que defininen el contenido de la tabla.

<CAPTION> Título de la tabla

      Especifica el título de la tabla, este se mostrará resaltado en la parte superior (o inferior) externa de la tabla. Se mostrará centrado horizontalmente.

<CAPTION ALIGN="top | bottom">Título de la tabla</CAPTION >

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

<TR> Fila de la tabla

     Introduce cada una de las filas de la tabla y contiene los aributos 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  si será necesario incluir la etiqueta de cierre.

<TR ALIGN="left | center | right"  VALIGN="top | middle | bottom">

• ALIGN="left | center | right"

     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. (Por defecto)
• right: Alineación a la derecha.
• center : Centrado horinzontalmente.

• VALIGN="top | middle | bottom"

     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 inferior de la celda.

• BGCOLOR="#rrvvaa" ó "nombre_color"

     Indica el color de fondo que tendrán todas las celdas de la fila de la tabla.

Ejemplo de tabla 10

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

• Definen cada una de las celdas de una fila de la tabla.
• TH se usará para definir una celda de tipo cabecera, que se mostrará destacada en negrita.
• TD para definir una celda de datos.
• Ambos tienen los mismos atributos.
• Estos elementos deben aparecer tras los elementos TR.
• Existirá una columna por cada elemento TD ó TH que se defina.
• Aunque se puede indicar la etiqueta de cierre, no es necesario al tomarse implícitamente.

<TD  ALIGN="left | center | right"  

         VALIGN="top | middle | bottom" 

         WIDTH="n | n%" 

         BGCOLOR="#rrvvaa | nombre_color"  

         ROWSPAN="Filas que debe agrupar la celda" 

         COLSPAN= "Columnas que agrupa la celda"  

         NOWRAP>

Ejemplo de tabla 3

ATRIBUTOS de <TH> y <TD>

• ALIGN:

     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

• VALIGN:

     Indica 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

• WIDTH:

     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.

• BGCOLOR:

     Indica 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.

Ejemplo de tabla 10

• ROWSPAN:

     Indica 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

• COLSPAN:

      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

• NOWRAP:

      Si la usamos, las líneas de texto no se dividirán dentro de la celda en varias líneas. Por tanto si la línea es muy larga la columna de la tabla será tan ancha como la línea, sólo se dividirá si se usa el elemento <BR>.

Ejercicios con Tablas