referencia-html/datos-tabulados.rst

.. 4.9

===============
Datos Tabulados
===============

El elemento ``table``
=====================

Representa datos con más de una dimensión, en forma de tabla.

Las tablas pueden contener los siguientes elementos:

- Opcionalmente puede tener un elemento ``<caption>``,
- seguido por cero o más elementos ``<colgroup>``,
- alternativamente puede tener un elemento ``<thead>``,
- continuado por cero o más elementos ``<tbody>``
- o uno o más elementos ``<tr>``,
- opcionalmente también puede poseer un elemento ``<tfoot>``.

El elemento ``<table>`` posee el atributo ``border``, el cual permite darle un
grosor determinado en pixeles que el cual puede ser una cadena vacia o un valor númerico.
Por ejemplo, ``border="1"``.

Si se va a utilizar una tabla para diseño, el debe utilizarse el atributo ``role``
con el valor presentation (``role = 'presentation'``). Así, se comunica al
navegador que la tabla se utiliza con fines de diseño.

Sin embargo, no se deben usar tablas como ayuda para el diseño.

Técnicas para describir tablas
==============================

Es recomendable en las tablas poner una descripción que explique la forma la cual
se presenta los datos de la tabla en cuestion, algo como
'Las características son mostradas en la segunda columna, con el lado negativo en la
columna izquierda y el lado positivo en la columna derecha'. Esta descripción,
acompañada por el atributo ``aria-describedby`` hace posible que personas
invidentes puedan conocer los datos que componen la tabla mediante sistemas
de lectura asistida.

  .. code-block:: html

     <p id="summary">En el siguiente ejemplo, las caracteristicas son
     mostradas en la segunda columna, con el lado negativo
     a la izquierda de dicha columna
     y el lado positivo a la derecha de dicha columna.</p>
     <table aria-describedby="summary">
       <caption>Características con lados positivos y negativos</caption>
       <thead>
       <tr>
         <th id="n"> Negativo
         <th> Características
         <th> Positiva
       <tbody>
       <tr>
         <td headers="n r1"> Triste
         <th id="r1"> Humor
         <td> Feliz
       <tr>
         <td headers="n r2"> Debil
         <th id="r2"> Grado
         <td> Pasajero
     </table>

En el ejemplo de arriba el atributo ``aria-describedby`` es usado para las
tecnologías de asistencia para personas invidentes.

A continuación, se muestra el mismo ejemplo con el elemento ``<figure>``.

  .. code-block:: html

     <figure aria-labelledby="caption">
       <p>Las características se dan en la segunda columna,
          con el lado negativo en la columna izquierda y el
          lado positivo en la columna derecha.</p>
       <table>
         <caption id="caption">Características con lados positivos y negativos</caption>
       <thead>
         <tr>
           <th id="n"> Negativo
           <th> Características
           <th> Positiva
       <tbody>
         <tr>
           <td headers="n r1"> Triste
         <th id="r1"> Humor
           <td> Feliz
         <tr>
           <td headers="n r2"> Debil
         <th id="r2"> Grado
           <td> Pasajero
       </table>
     </figure>

El elemento ``<figure>`` en este ejemplo ha sido etiquetado por el subtítulo de la ``<table>``
usando el atributo ``aria-labelledby.``

El elemento ``caption``
=======================

Representa el título del elemento ``<table>`` que sera su padre más directo.

El elemento ``<caption>`` puede introducir el contexto de una tabla, haciéndola
más fácil de comprender.

Consideremos el siguiente ejemplo sin la etiqueta ``<caption>``.

  .. code-block:: html

     <table>
       <thead>
        <tr>
         <th>1</th>
         <th>2</th>
         <th>3</th>
         <th>4</th>
         <th>5</th>
         <th>6</th>
        </tr>
       </thead>
       <tbody>
        <tr>
         <td>5</td>
         <td>7</td>
         <td>4</td>
         <td>5</td>
         <td>2</td>
         <td>4</td>
        </tr>
       </tbody>
      </table>

Una tabla con este formato no es nada intutitiva; es por ello que el elemento
``<caption>`` ayuda a un mayor entendimiento de los datos que se muestran en
la tabla. Veamos el mismo ejemplo con la etiqueta ``<caption>``.

  .. code-block:: html

     <table>
       <caption>
         <p>Table 1.</p>
         <p>Esta tabla muestra los resultados de lanzar un dado con seis caras</p>
         <p>Cada encabezado representa una cara del dado, debajo se muestra
         el número de veces que ha salido ese resultado</p>
       </caption>
       <thead>
        <tr>
         <th>1</th>
         <th>2</th>
         <th>3</th>
         <th>4</th>
         <th>5</th>
         <th>6</th>
        </tr>
       </thead>
       <tbody>
        <tr>
         <td>5</td>
         <td>7</td>
         <td>4</td>
         <td>5</td>
         <td>2</td>
         <td>4</td>
        </tr>
       </tbody>
      </table>

El elemento ``colgroup``
========================

Define un grupo de una o más columnas de una tabla.

Contiene el atributo ``span`` que representa el número de columnas que abarca el elemento

Se utiliza como hijo de un elemento de ``<table>``, después de cualquier elemento del subtítulo y antes de los siguientes elementos: ``<thead>``, ``<tbody>``,
``<tfoot>`` y ``<tr>``.

  .. code-block:: html

     <table>
       <colgroup>
         <col span="2" style="background-color:red">
         <col style="background-color:yellow">
       </colgroup>
       <tr>
         <th>ISBN</th>
         <th>Titulo</th>
         <th>Precio</th>
       </tr>
       <tr>
         <td>3476896</td>
         <td>El señor de los anillos</td>
         <td>30€</td>
       </tr>
       <tr>
         <td>5869207</td>
         <td>1984</td>
         <td>10€</td>
       </tr>
     </table>

El elemento ``col``
===================

Permite especificar propiedades para una columna o un grupo de ellas.

Este elemento se puede utilizar como hijo de un elemento ``<colgroup>`` que
no tiene un atributo ``span``.

Si un elemento ``<col>`` tiene un elemento padre ``<table>`` y un elemento ``<colgroup>``,
entonces el elemento ``<col>`` representa una o más columnas en el grupo de columnas
representado por ese ``<colgroup>``.

En el siguiente ejemplo definimos un grupo de columnas con ``<colgroupd>`` en
una tabla con cinco encabezados. El primer atributo ``<col>`` establece un
color de fondo de color rojo para la primera columna; el segundo utiliza
para el color de fondo el verde para las siguientes tres columnas (``span="3"``);
y el último utiliza el color naranja para la última columna.

  .. code-block:: html

     <table border="1">
       <colgroup>
         <col style="background:red;">
         <col span="3" style="background:green;">
         <col style="background:orange;">
       </colgroup>
       <tr>
         <th>Encabezado 1</th>
         <th>Encabezado 2</th>
         <th>Encabezado 3</th>
         <th>Encabezado 4</th>
         <th>Encabezado 5</th>
       </tr>
       <tr>
         <td>Celda</td>
         <td>Celda</td>
         <td>Celda</td>
         <td>Celda</td>
         <td>Celda</td>
       </tr>
       <tr>
         <td>Celda</td>
         <td>Celda</td>
         <td>Celda</td>
         <td>Celda</td>
         <td>Celda</td>
       </tr>
     </table>


El elemento ``tbody``
=====================

Define un bloque de filas que consiste en un cuerpo
de datos de una tabla.

Este elemento se utiliza como hijo de un elemento de ``<table>``, después de
cualquier elemento ``<caption>``, ``<colgroup>`` y ``<thead>``, pero sólo si
no hay elementos ``<tr>`` que sean hijos del elemento de ``<table>``.

  .. code-block:: html

     <table border="1">
       <thead>
         <tr> <td colspan="2">Cabecera de la tabla (thead)</td></tr>
       </thead>
       <tbody>
         <tr>
           <td>Celda 1 - parte de tbody</td>
           <td>Celda 2 - parte de tbody</td>
         </tr>
         <tr>
           <td>Celda 3 - parte de tbody</td>
           <td>Celda 4 - parte de tbody</td>
         </tr>
         <tr>
           <td>Celda 5 - parte de tbody</td>
           <td>Celda 6 - parte de tbody</td>
         </tr>
       </tbody>
       <tfoot>
         <tr> <td colspan="2">Pie de la tabla (tfoot)</td></tr>
       </tfoot>
     </table>

El elemento ``thead``
=====================

Representa el bloque de filas que consiste en las títulos de las columnas de
una tabla.

Se puede utilizar como hijo de un elemento de ``<table>``, después de cualquier ``<caption>``,
y elementos de ``<colgroup>`` y antes de cualquier elemento ``<tbody>``, ``<tfoot>``
y ``<tr>``, pero sólo si no hay otros elementos ``<thead>`` que sean hijos del
elemento ``<table>``.

A continuación, se muestra un ejemplo.

  .. code-block:: html

     <table>
       <caption>Hoja de subasta</caption>
         <thead>
           <tr>
             <th><label for=e1>Nombre</label>
             <th><label for=e2>Producto</label>
             <th><label for=e3>Fotografia</label>
             <th><label for=e4>Precio</label>
           <tr>
             <td>Tú nombre
             <td>¿Qué vas a vender?
             <td>Enlace a la fotografía.
             <td>El precio.
      <tbody>
         <tr>
           <td>Pepe
           <td>Galletas
           <td><img src="https://example.com/galletas.png" title="Las galletas de Pepe">
           <td>0.40€
         <tr>
           <td><input id=e1 type=text name=quien required form=f>
           <td><input id=e2 type=text name=que required form=f>
           <td><input id=e3 type=url name=foto form=f>
           <td><input id=e4 type=number step=0.01 min=0 value=0 required form=f>
     </table>
     <form id=f action="/subasta.cgi">
       <input type=button name=add value="submit">
     </form>

El elemento ``tfoot``
=====================

Representa el bloque de filas que consiste en los
resúmenes de las columnas (pie de página) de una tabla.

Se puede utilizar como hijo de un elemento de ``<table>``, después de cualquier elemento
``<caption>``, ``<colgroup>``, ``<thead>``, ``<tbody>`` y ``<tr>``, pero sólo si no hay otros
elementos ``<tfoot>`` que sean hijos del elemento ``<table>``.

  .. code-block:: html

     <table>
       <thead>
         <tr> <td colspan="2">Cabecera (thead)</td></tr>
       </thead>
       <tbody>
         <tr>
           <td>Celda 1 - parte tbody</td>
           <td>Celda 2 - parte tbody</td>
         </tr>
         <tr>
           <td>Celda 3 - parte tbody</td>
           <td>Celda 4 - parte tbody</td>
         </tr>
         <tr>
           <td>Celda 5 - parte tbody</td>
           <td>Celda 6 - parte tbody</td>
         </tr>
       </tbody>
       <tfoot>
         <tr> <td colspan="2">Pie (tfoot)</td></tr>
       </tfoot>
     </table>

El elemento ``tr``
==================

Define una fila de celdas en una tabla.

Se puede utilizar junto en los siguientes contextos:

- Como un hijo de un elemento ``<thead>``.

- Como un hijo de un elemento ``<tbody>``.

- Como un hijo de un elemento ``<tfoot>``.

- Como hijo de un elemento de ``<table>``, después de cualquier elemento ``<caption>``,
  ``<colgroup>`` y ``<thead>``, pero solo si no hay elementos ``<tbody>`` que son hijos del elemento de ``<table>``.

  .. code-block:: html

   <table border = "1">
     <tr>
       <td>Celda 1</td>
       <td>Celda 2</td>
     </tr>
   </table>

El elemento ``th``
==================

Define una celda del encabezado en una tabla.

Se puede utilizar con los siguientes atributos:

- ``colspan``. El número de columnas que la celda ocupa.
- ``rowspan``. El número de filas que la celda ocupa.
- ``headers``. Las cabeceras de la celda
- ``abbr``. Título alternativo para hacer referencia a la celda desde otros contextos.
- ``scope``. Especifca las celdas a las que se aplica el encabezado.
  Es un atributo enumerado con 5 estados, 4 de los
  cuales tienen palabras clave explícitas:

    - ``col``. Significa que la celda de cabecera se aplica a algunas de las celdas
      subsiguientes en el grupo de columnas.
    - ``colgroup``. Significa que la celda de cabecera se aplica a todas las celdas
      subsiguientes en el grupo de columnas.
    - ``row``. Significa que la celda de cabecera se aplica a algunas de las celdas
      subsiguientes en el grupo de filas.
    - ``rowgroup``. Significa que la celda de cabecera se aplica a todas las celdas
      subsiguientes en el grupo de filas.
    - ``auto``. Significa que la celda de cabecera se aplica a todas las celdas
      seleccionadas basadas en el contexto.

  .. code-block:: html

     <table>
         <caption>Medicion de patas, rabos entre gatos y dalmatas</caption>
       <thead>
         <tr><th> ID <th> Medicion <th> Media <th> Maxima.
       <tbody>
         <tr> <td> <th scope=rowgroup> Gatos <td> <td>
         <tr> <td> 32 <th scope=row> Piernas <td> 2.67 <td> 4.
         <tr> <td> 10 <th scope=row> Cola <td> 1 <td> 1.
       </tbody>
       <tbody>
         <tr> <td> <th scope=rowgroup> Perros <td> <td>
         <tr> <td> 93 <th scope=row> Patas <td> 3.5 <td> 4.
         <tr> <td> 35 <th scope=row> Cola <td> 0.33 <td> 1.
       </tbody>
     </table>

El anterior ejemplo muestra cómo el atributo ``scope`` con la palabra clave
``rowgroup`` afecta a las celdas de los datos que se aplica a las celdas del encabezado.

Las celdas de cabecera con un ``scope = rowgroup`` ('Perros' y 'Gatos') se aplican
a todas las celdas de su grupo de filas distintas de las celdas (a su izquierda)
en la columna 1.

El elemento ``td``
==================

Representa una celda de datos en una tabla.

Este elemento siempre es hijo de un elemento ``<tr>``.

Se puede utilizar con los siguientes atributos:

- ``colspan``. El número de columnas que la celda ocupa.
- ``rowspan``. El número de filas que la celda ocupa.
- ``headers``. Los encabezados de esta celda.

  .. code-block:: html

     <table>
       <thead>
       <tr>
         <th>
         <th>2008
         <th>2007
         <th>2006
       <tbody>
       <tr>
         <th>Net sales
         <td>$ 32,479
         <td>$ 24,006
         <td>$ 19,315
       <tr>
         <th>Cost of sales
         <td>  21,334
         <td>  15,852
         <td>  13,717
       <tbody>
       <tr>
         <th>Gross margin
         <td>$ 11,145
         <td>$  8,154
         <td>$  5,598
       <tfoot>
       <tr>
         <th>Gross margin percentage
         <td>34.3%
         <td>34.0%
         <td>29.0%
     </table>