• 1. Introducción
• 2. Ejemplo sencillo
• 3. El atributo summary
• 4. El pie de la tabla (footer)
• 5. Elementos de una tabla gráficamente

1. Introducción

Las tablas son una interesante herramienta para el marcado de información tabular, otros usos y abusos (como maquetación y diseño) se desaconsejan encarecidamente. De nuevo: mantener por separado, el diseño del contenido.

2. Ejemplo sencillo

Veamos un poco de código para empezar a hablar de tablas:

<table>
  <caption>Elementos XHTML</caption>
 <thead>
 <tr>
 <th>ELEMENTO</th>
 <th>TIPO</th>
 <th>SEMANTICA</th>
 </tr>
</thead>
 <tbody>
    <tr>
      <td>em</td>
      <td>línea</td>
      <td>mayor énfasis</td>
    </tr>
    <tr>
      <td>strong</td>
      <td>línea</td>
      <td>mayor fuerza</td>
    </tr>
    <tr>
      <td>pre</td>
      <td>bloque</td>
      <td>texto preformateado</td>
    </tr>
  </tbody>
</table>

El resultado es el siguiente:

Elementos XHTML

ELEMENTO	TIPO	SEMANTICA
em	línea	mayor énfasis
strong	línea	mayor fuerza
pre	bloque	texto preformateado

NOTA: cuando pruebes este ejemplo no verás bordes, aquí son mostrados mediante una propiedad CSS que explicaré más adelante.

El elemento table da comienzo a la tabla. Dentro tenemos a caption que encierra el título que llevará la tabla.

A partir de aquí definimos dos partes principales: thead dónde se ubica el encabezado, y tbody que encierra a las celdas del cuerpo.

tr es el encargado de contener filas, el encabezado tiene una sola fila, cuyas celdas de encabezado se contienen mediante tres etiquetas del elemento th.

Luego dentro del cuerpo (tbody) tenemos 3 filas más (tr) cuyas celdas se contienen mediante el uso del elemento td.

3. El atributo summary

El atributo summary se puede específicar dentro del elemento table, este nos permite agregar algo de semántica, al ponerle como valor un resumen del contenido de la tabla para que pueda ser reconocido por robots (ej. buscadores) u otros agentes de usuario.

Ejemplo de su uso:

<table summary="Elementos del lenguaje
XHTML">...

Los navegadores no suelen representar summary.

4. El pie de la tabla (footer)

Vimos en el ejemplo anterior como dividir la tabla en dos secciones, mediante los elementos thead y tbody.

Ahora incluyamos una tercera sección con el elemento tfoot, el cual determinará la sección del pie (al final de la tabla).

Utilizamos un código parecido al anterior, pero con la sección foot y otros datos.

<table summary="Comparativa de exploits entre IE 6 y Firefox">
 <caption>Comparativa: Exploits IE vs Firefox</caption>
 <thead>
  <tr>
   <th>Año</th>
   <th>Firefox</th>
   <th>Internet Explorer</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>2004</td>
   <td>15</td>
   <td>27</td>
  </tr>
  <tr>
   <td>2005</td>
   <td>33</td>
   <td>45</td>
  </tr>
  <tr>
   <td>2006</td>
   <td>37</td>
   <td>49</td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <th>Total</th>
   <td>85</td>
   <td>121</td>
  </tr>
 </tfoot>
</table>

El resultado es el siguiente:

Comparativa: Exploits IE vs Firefox

Año	Firefox	Internet Explorer
Total	85	121
2004	15	27
2005	33	45
2006	37	49

NOTA: Estos datos son inventados y las sumas no fueron verificadas :P.

En estos ejemplos podríamos haber omitido marcar secciones (encabezado, cuerpo, pie) y la tabla tendría el mismo aspecto, sin embargo marcar estas secciones no sólo la dotarán de un valor semántico sino que también nos facilitará mucho la aplicación de estilos a estos grupos de celdas.

Notar también que en la sección tfoot la celda Total fue marcada con th ya que no es un dato estádistico.

5. Elementos de una tabla gráficamente

Quizá los maree un poco seguir la estructura de la tabla en el código, para ayudar aquí tienen un gráfico que muestra la tabla anterior visualmente y los elementos utilizados para construirla

Nota: gráfico creado con Kivio, software gratuito para el entorno KDE.