HTML 5: las tablas… ¿de multiplicar?

Y aquí un día más para seguir hablando de HTML 5. Por cierto he creado una sección especial en la que he recopilado todas las entradas sobre ello.

En esta ocasión toca hablar de las tablas, y es que, aunque las tablas han sido un elemento que parecía que iba a desaparecer, no es así aunque sí que se le quiere dar un uso muy concreto. Y es que las tablas representan información en una o más dimensiones que se pueden representar en forma de tabla (qué frase más retroalimentada…).

Lo que sí queda muy escrito es que las tablas no pueden ser parte del layout de un sitio web.

table

Las table son un elemento muy interesante ya que disponen de muchos subelementos, y son un contenedor de información en sí que hay que tratar de forma muy distinta al de un texto corriente.

Además, sus elementos han de estar en un orden determinado, ya que sino no se pueden formar correctamente e implican una lentitud excesiva al tener que crearlas por parte sobre todo de los navegadores.

Así, en este orden, puede haber un elemento caption seguido de cero o más colgroup, seguidos opcionalmente de un thead, seguido opcionalmente de un tfoot, seguido de cero o más tbody o uno o más tr seguido opcionalmente de un tfoot (aunque sólo puede haber uno en toda la tabla como máximo).

Esto, como veis, hace que construir una tabla no sea algo trivial, sino que requiere de un buen hacer por parte de los creadores. También hay que tener en cuenta que no puede haber filas o columnas en blanco. Además, para que se comprendan mejor, se solicita a los editores que incluyan una cabecera en la tabla, para su mejor comprensión. De todas formas, lo mejor es hacer la tabla tan sencilla que no hagan falta muchas explicaciones.

El único atributo que soporta el elemento table es el summary, que será muy parecido a la cabecera explicativa de la tabla en sí. Aun esto, es interesante indicar en este atributo la interpretación de la tabla o cómo hacer un uso de ella, quedando la cabecera como el título y el summary como la explicación de la tabla, por ejemplo, para alguien que no pudiera leerla.

caption

El caption es el primer elemento que puede haber en una tabla y representa el título de dicha tabla. En el caso en el que la tabla está dentro de un elemento figure, entonces el texto del título cambiará del caption al figcaption.

El título ha de ser lo más breve posible, pero lo suficientemente identificativo como para poder explicar de qué va el contenido de la tabla en sí.

colgroup

El elemento colgroup representa la agrupación de una o más columnas de una tabla. En caso de que no incluya elementos col, sí que deberá incorporar el atributo span que indique la cantidad, siempre mayor que cero.

col

En el caso en que un colgroup no tenga el atributo span, utilizaremos col para indicar cada una de las columnas. De igual manera que el anterior, puede incorporar el atributo span.

thead

El elemento thead representa el bloque de filas que contienen la cabecera (nombre) de las distintas columnas de la tabla.

tbody

El elemento tbody representa un bloque de filas que contienen la información principal de la tabla. En resumen, es el bloque que agrupa las filas principales (que no son cabecera o pie).

tfoot

El elemento tfoot representa el bloque de filas que contienen el pie (resultados, por ejemplo) de las distintas columnas de la tabla.

tr

Los tr son las distintas filas que puede tener una tabla. Cada una de ellas ha de tener cero o más celdas (td o th).

td

Cada una de las td son las celdas de una tabla. Han de formar parte de un elemento tr (fila).

Puede tener distintos atributos como colspan, rowspan y headers.

• colspan: indica el número de columnas en las que se divide esa celda.
• rowspan: indica el número de filas en las que se divide esa celda.
• headers: este elemento ha de contener el identificador de un elemento th que forma parte de la misma tabla. Con esto se pueden relacionar los datos de la tabla y así interpretarlos.

th

Al igual que los td, los th hacen la misma funcionalidad pero indican el nombre del contenido de la fila, o su valor principal destacado.

Además de disponer de los mismos elementos que las celdas normales, puede incluir el atributo scope. Este atributo puede tener 4 posibles valores:

• row: es el indicador de todos los elementos de esa fila.
• col: es el indicador de todos los elementos de esa columna.
• rowgroup: es el indicador de esa fila y de las siguientes integradas en el contenedor (que suele ser un tbody).
• colgroup: es el indicador de esa columna y de las siguientes integradas en el contenedor (que suele ser un colgroup).

Ejemplo 1


<table>
  <caption>Specification values: <b>Steel</b>, <b>Castings</b>, Ann. A.S.T.M. A27-16, Class B;* P max. 0.06; S max. 0.05.</caption>
  <thead>
    <tr>
      <th rowspan=2>Grade.</th>
      <th rowspan=2>Yield Point.</th>
      <th colspan=2>Ultimate tensile strength</th>
      <th rowspan=2>Per cent elong. 50.8mm or 2 in.</th>
      <th rowspan=2>Per cent reduct. area.</th>
    </tr>
    <tr>
      <th>kg/mm<sup>2</sup></th>
      <th>lb/in<sup>2</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Hard</td>
      <td>0.45 ultimate</td>
      <td>56.2</td>
      <td>80,000</td>
      <td>15</td>
      <td>20</td>
    </tr>
    <tr>
      <td>Medium</td>
      <td>0.45 ultimate</td>
      <td>49.2</td>
      <td>70,000</td>
      <td>18</td>
      <td>25</td>
    </tr>
    <tr>
      <td>Soft</td>
      <td>0.45 ultimate</td>
      <td>42.2</td>
      <td>60,000</td>
      <td>22</td>
      <td>30</td>
    </tr>
  </tbody>
</table>


Specification values: Steel, Castings, Ann. A.S.T.M. A27-16, Class B;* P max. 0.06; S max. 0.05.

Grade.	Yield Point.	Ultimate tensile strength		Per cent elong. 50.8mm or 2 in.	Per cent reduct. area.
		kg/mm2	lb/in2
Hard	0.45 ultimate	56.2	80,000	15	20
Medium	0.45 ultimate	49.2	70,000	18	25
Soft	0.45 ultimate	42.2	60,000	22	30

Ejemplo 2


<table>
  <colgroup>
    <col>
  <colgroup>
    <col>
    <col>
    <col>
  <thead>
    <tr>
      <th>
      <th>2008
      <th>2007
      <th>2006
  <tbody>
    <tr>
      <th scope=rowgroup>Research and development
      <td>$ 1,109
      <td>$ 782
      <td>$ 712
    <tr>
      <th scope=row>Percentage of net sales
      <td>3.4%
      <td>3.3%
      <td>3.7%
  <tbody>
    <tr>
      <th scope=rowgroup>Selling, general, and administrative
      <td>$ 3,761
      <td>$ 2,963
      <td>$ 2,433
    <tr>
      <th scope=row>Percentage of net sales
      <td>11.6%
      <td>12.3%
      <td>12.6%
</table>


	2008	2007	2006
Research and development	$ 1,109	$ 782	$ 712
Percentage of net sales	3.4%	3.3%	3.7%
Selling, general, and administrative	$ 3,761	$ 2,963	$ 2,433
Percentage of net sales	11.6%	12.3%	12.6%