Acerca de

TABLAS COMPLEJAS

por ruben dario ramirez

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.

Un ejemplo clásico de tablas avanzadas es el de las tablas utilizadas en contabilidad, como por ejemplo la tabla que muestra el balance de una empresa:

Ejemplo de tabla compleja correspondiente al balance de una empresa

Figura 7.10. Ejemplo de tabla compleja correspondiente al balance de una empresa

Las partes que componen las tablas complejas se definen mediante las etiquetas <thead>, <tbody> y <tfoot>. La cabecera de la tabla se define con la etiqueta <thead>, el pie de la tabla se define mediante <tfoot> y cada sección de datos se define con una etiqueta <tbody>.

<thead><tbody><tfoot>Cabecera de tablaSección de una tablaPie de tabla
Atributos comunesbásicos, i18n y eventos
Atributos específicos–
Tipo de elementoBloque
DescripciónSe emplean para agrupar varias filas en una cabecera (thead) un pie (tfoot) o una sección (tbody) de una 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 imagen muestra una tabla avanzada con cabecera, pie y una sección de datos:

Ejemplo de tabla avanzada con cabecera, pie y secciones

Figura 7.11. Ejemplo de tabla avanzada con cabecera, pie y secciones

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

<html>
<head><title>Ejemplo de tabla avanzada</title></head>
<body>
 
<h3>Análisis de ventas</h3>
 
<table summary="Análisis de ventas anuales">
  <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>
 
</body>
 
</html>