Informática Secundaria y Bachillerato

4º Tablas avanzadas

Algunas tablas complejas están formadas por más elementos que filas y celdas de datos. Así, es común que las tablas más avanzadas dispongan de una sección de cabecera, una sección de pie y varias secciones de datos. Además, también es posible agrupar varias columnas de forma lógica para poder aplicar estilos similares a un determinado grupo de columnas.

Las partes que componen las tablas complejas se definen mediante las siguientes etiquetas:

<thead>: Define la cabecera d ela tabla.
<tbody>: Define cada sección de datos.
<tfoot>: Define el pie de la tabla.

Cada tabla puede contener solamente una cabecera y un pie, pero puede incluir un número ilimitado de secciones. Si se define una cabecera y/o un pie, las etiquetas <thead> y/o <tfoot> deben colocarse inmediatamente antes que cualquier etiqueta <tbody>

La siguiente es una tabla avanzada con cabecera, pie y una sección de datos:

Análisis de ventas anuales
AÑO	Expansión de ventas
AÑO	Producto A	Producto B	Producto C	Producto D
AÑO	Producto A	Producto B	Producto C	Producto D
AÑO	Expansión de ventas
N-3	-	-	-	-
N-2	3	5	8	4
N-1	4	4	7	3
N	5	7	6	2

El código HTML necesario para crear la tabla de la imagen anterior hace uso de las etiquetas <thead>,<tbody> y <tfoot>:

<table summary="Análisis de ventas anuales" border="1" align="center">
  <caption>Análisis de ventas anuales</caption>
  <thead>
    <tr>
      <th rowspan="2" scope="col">AÑO</th>
      <th colspan="4" scope="col">Expansión de ventas</th>
    </tr>
    <tr>
      <th scope="col">Producto A</th>
      <th scope="col">Producto B</th>
      <th scope="col">Producto C</th>
      <th scope="col">Producto D</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <th rowspan="2" scope="col">AÑO</th>
      <th scope="col">Producto A</th>
      <th scope="col">Producto B</th>
      <th scope="col">Producto C</th>
      <th scope="col">Producto D</th>
    </tr>
    <tr>
      <th colspan="4" scope="col">Expansión de ventas</th>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <th scope="row">N-3</th><td>-</td><td>-</td><td>-</td><td>-</td>
    </tr>
    <tr>
      <th scope="row">N-2</th><td>3</td><td>5</td><td>8</td><td>4</td>
    </tr>
    <tr>
      <th scope="row">N-1</th><td>4</td><td>4</td><td>7</td><td>3</td>
    </tr>
    <tr>
      <th scope="row">N</th><td>5</td><td>7</td><td>6</td><td>2</td>
    </tr>
  </tbody>
</table>

Aunque al principio resulta extraño, el elemento <tfoot> siempre se escribe antes que cualquier elemento <tbodyt> en el código HTML. De hecho, si la etiqueta <tfoot> aparece después de un elemento <tbody>, la página no se considera válida.

La etiqueta <tbody> permite realizar agrupaciones de filas, pero en ocasiones se necesitan agrupar columnas. Aunque su uso no es muy común, HTML define dos etiquetas similares para agrupar columnas: <col> y <colgroup>.

La etiqueta <col> se utiliza para asignar los mismos atributos a varias columnas de forma simultánea. De esta forma, la etiqueta <col> no agrupa columnas, sino que sólo asigna atributos comunes a varias columnas.

La siguiente imagen muestra una tabla que hace uso de la etiqueta <col>:

Análisis de ventas anuales
AÑO	Producto A	Producto B	Producto C	Producto D
N-3	-	-	-	-
N-2	3	5	8	4
N-1	4	4	7	3
N	5	7	6	2

El código HTML necesario para crear ña tabla anterior es el siguiente:

<table summary="Análisis de ventas anuales" align="center" border="1">
  <caption>Análisis de ventas anuales</caption>

  <col style="width:10%;" />
  <col style="width:30%;" />

  <thead>
    <tr>
      <th scope="col">AÑO</th>
      <th scope="col">Producto A</th>
      <th scope="col">Producto B</th>
      <th scope="col">Producto C</th>
      <th scope="col">Producto D</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">N-3</th><td>-</td><td>-</td><td>-</td><td>-</td>
    </tr>
    <tr>
      <th scope="row">N-2</th><td>3</td><td>5</td><td>8</td><td>4</td>
    </tr>
    <tr>
      <th scope="row">N-1</th><td>4</td><td>4</td><td>7</td><td>3</td>
    </tr>
    <tr>
      <th scope="row">N</th><td>5</td><td>7</td><td>6</td><td>2</td>
    </tr>
  </tbody>
</table>

Por otra parte, la etiqueta <colgroup> se emplea para agrupar de forma estructural varias columnas de la tabla. La forma habitual de indicar el número de columnas que abarca la agrupación es utilizar el atributospan, que establece el número de columnas de cada agrupación.

La siguiente es una tabla avanzada con una agrupación de columnas realizada con la etiqueta<colgroup>:

Análisis de ventas anuales
AÑO	Producto A	Producto B	Producto C	Producto D
N-3	-	-	-	-
N-2	3	5	8	4
N-1	4	4	7	3
N	5	7	6	2

El código necesario para crear la tabla anterior es el siguiente:

<table summary="Análisis de ventas anuales" border="1" align="center">
  <caption>Análisis de ventas anuales</caption>

  <colgroup span="1" style="color:red;" />
  <colgroup span="3" style="color:blue;" />

  <thead>
    <tr>
      <th scope="col">AÑO</th>
      <th scope="col">Producto A</th>
      <th scope="col">Producto B</th>
      <th scope="col">Producto C</th>
      <th scope="col">Producto D</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">N-3</th><td>-</td><td>-</td><td>-</td><td>-</td>
    </tr>
    <tr>
      <th scope="row">N-2</th><td>3</td><td>5</td><td>8</td><td>4</td>
    </tr>
    <tr>
      <th scope="row">N-1</th><td>4</td><td>4</td><td>7</td><td>3</td>
    </tr>
    <tr>
      <th scope="row">N</th><td>5</td><td>7</td><td>6</td><td>2</td>
    </tr>
  </tbody>
</table>

El uso de las etiquetas <colgroup> y <col> no está muy extendido, debido a que la mayoría de navegadores no soportan muchas de sus funcionalidades.

Color de fondo en las tablas

Podemos conseguir que las tablas tengan un color de fondo, siguiendo un procedimiento totalmente análogo al empleado para que una página tenga un color de fondo uniforme Para ello debemos utilizar el atributo BGCOLOR="#XXYYZZ", visto en dicho capítulo.

Se puede conseguir:

· Que la totalidad de la tabla tenga un color de fondo. Para ello, colocamos el atributo dentro de la etiqueta TABLE. Por ejemplo, vamos a hacer que la tabla tenga un fondo verde (#00FF00):

<TABLE BORDER BGCOLOR="#00FF00">

· Que sólamente una celda determinada tenga un color de fondo. Para ello, colocamos el atributo dentro de la etiqueta de la celda correspondiente. Por ejemplo, vamos a hacer que sólo la celda 1 de la fila 1 tenga un color verde: <TABLE BORDER> <TR><TD BGCOLOR="#00FF00"> alguna celda tenga uno particular.

· El atributo del color general se coloca en la etiqueta TABLE, y el del color particular en la etiqueta de la celda en cuestión (una combinación de los dos casos anteriores). Imágenes de fondo en las tablas

Imagen de fondo en las tablas

El Explorer de Microsoft soporta la colocación de imágenes de fondo en el interior de las tablas, de una manera análoga a como se hace en una página : <TABLE BORDER BACKGROUND="imagen.jpg">
Si, por el contrario, sólo se pone este atributo dentro de la etiqueta de una celda concreta (<TD> o <TH>), entonces la imagen de fondo se verá sólo en esa celda

Separación entre las celdas de una tabla

Por defecto, la separación entre las distintas celdas de una tabla es de dos pixels. Pero se puede variar esto con el atributo CELLSPACING, que se pone dentro de la etiqueta TABLE. Por ejemplo, para obtener una separación de 20 pixels entre celdas ponemos: <TABLE BORDER CELLSPACING=20> A primera vista parece como si esto fuera lo mismo que si hubiéramos aumentado el espesor de los bordes. Pero para comprobar que no es así, hagamos que en el caso anterior, tenga además unos bordes de 5 de espesor: <TABLE BORDER=5 CELLSPACING=20>

clases

Color de fondo en las tablas

Imagen de fondo en las tablas

Separación entre las celdas de una tabla