Tablas

Estructura de una tabla (<table>)

Una tabla HTML (<table>) es un conjunto de celdas (<td> o <th>) organizadas en filas (<tr>) que a su vez se organizan en grupos de filas (<thead>, <tbody> o <tfoot>). Además, la tabla puede tener una leyenda (<caption>) y hacer referencia a las columnas (<col /> y <colspan>).

La leyenda y los grupos de filas se muestran en este orden:

Esto es la leyenda Leyenda (<caption>)
...
... ... ... ... ...
...
Cabecera de tabla (<thead>)
...
... ... ... ... ...
...

...

...
... ... ... ... ...
...
Cuerpos de tablas (<tbody>)
...
... ... ... ... ...
...
Pie de tabla (<tfoot>)

A su vez, tanto los cuerpos de tabla como la cabecera y el pie de tabla están formados por varias filas (<tr>) formadas por varias celdas (<td> o <th>). Todas las filas tienen el mismo número de celdas (aunque también se pueden unir celdas horizontal y verticalmente).

Celda Celda ... Celda Celda
...
Fila (<tr>)

El código fuente de una tabla sencilla (con un único <tbody>) sería el siguiente:

<table border="1">
  <caption>Ejemplo de tabla</caption>
  <tbody>
    <tr>
      <td></td>
      <th>A</th>
      <th>B</th>
    </tr>
    <tr>
      <th>1</th>
      <td>A1</td>
      <td>B1</td>
    </tr>
    <tr>
      <th>2</th>
      <td>A2</td>
      <td>B2</td>
    </tr>
  </tbody>
</table>
Ejemplo de tabla
A B
1 A1 B1
2 A2 B2

Leyenda (<caption>)

La leyenda (<caption>) es texto explicativo opcional que se muestra fuera de la tabla (normalmente, arriba). La leyenda no puede incluir párrafos ni otros elementos de bloque, aunque sí etiquetas en línea (<strong>, imágenes, etc).

Los navegadores dan a la leyenda el mismo ancho que a la tabla, por lo que si una leyenda es larga y la tabla estrecha, la leyenda ocupará varias líneas, como muestra el ejemplo siguiente:

<table border="1">
  <caption>Liga de <strong>Fútbol</strong> española - Resultados de la primera división</caption>
  <tbody>
    <tr>
...
Liga de Fútbol española - Resultados de la primera división
2003/2004 2004/2005
Campeón Valencia C.F. F.C. Barcelona
Subcampeón F.C. Barcelona R. Madrid

Cuerpos de tabla (<tbody>), encabezados (<thead>) y pies (<tfoot>)

El cuerpo de tabla (<tbody>) es obligatorio y puede haber tantos como se quiera.

Tanto a cabecera de la tabla (<thead>) como el pie de tabla (<tfoot>) son opcionales y sólo puede haber uno de cada por tabla. En el código fuente, la etiqueta <tfoot> se encuentra situada antes del primer <tbody>, aunque los navegadores la muestran al final de la tabla.

<table border="1">
  <caption>Ejemplo de tabla</caption>
  <thead>
    <tr>
      <th>thead</th>
      <td>celda 1</td>
      <td>celda 2</td>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>tfoot</th>
      <td>celda 1</td>
      <td>celda 2</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <th>tbody</th>
      <td>celda 1</td>
      <td>celda 2</td>
    </tr>
  </tbody>
</table>
Ejemplo de tabla
thead celda 1 celda 2
tfoot celda 1 celda 2
tbody celda 1 celda 2

Al imprimir una tabla que ocupa varias páginas, Firefox repite al principio y al final de cada página las cabeceras <thead> y pies de tabla <tfoot>, mientras que Internet Explorer y Chrome sólo las incluyen al principio y al final de la tabla. Se puede comprobar, por ejemplo, con la página de explicación sobre colores CSS, en la que la tabla de colores X11/SVG no cabe en una sola página. En la vista preliminar de Firefox se puede ver cómo la cabecera <thead> de esta tabla se coloca al principio de cada página, mientras que en la vista preliminar de Internet Explorer o Chrome la cabecera sólo se coloca al principio de la tabla.

Filas (<tr>)

Cada fila de la tabla está marcada con la etiqueta <tr> (fila de tabla).

Celdas de datos (<td>) y celdas de cabecera (<th>)

Cada celda de la tabla está marcada con la etiqueta <td> (celda de datos), aunque también se pueden marcar con la etiqueta <th> (celda de cabecera). Las celdas <th> están pensadas para utilizarse en las celdas que sirven de cabecera para la fila o columna, por lo que los navegadores las muestran resaltadas (normalmente, en negrita y centradas en horizontal), aunque se pueden utilizar en cualquier celda.

<table border="1">
  <caption>Fútbol 1º división</caption>
  <tbody>
    <tr>
      <td></td>
      <th>2003/2004</th>
      <th>2004/2005</th>
    </tr>
    <tr>
      <th>Campeón</th>
      <td>Valencia C.F.</td>
      <td>F.C. Barcelona</td>
    </tr>
    <tr>
      <th>Subcampeón</th>
      <td>F.C. Barcelona</td>
      <td>R. Madrid</td>
    </tr>
  </tbody>
</table>
Fútbol 1º división
2003/2004 2004/2005
Campeón Valencia C.F. F.C. Barcelona
Subcampeón F.C. Barcelona R. Madrid

Columnas (<col />) y grupos de columnas (<colgroup>)

Aunque las celdas de una tabla (<td> y <th>) estén organizadas en filas (<tr>) y grupos de filas (<tbody>, <thead> y <tfoot>), también existen dos etiquetas que permiten hacer referencia a las columnas de una tabla: las etiquetas <col /> (columna) y <colgroup> (grupo de columnas).

La etiqueta <col /> permite hacer referencia a una columna y la etiqueta <colgroup> permite definir grupos de columnas (de manera similar a como la etiqueta <tbody> define grupos de filas).

Las etiquetas <col /> y <colgroup> se encuentran situadas al principio de la tabla, después de la etiqueta <caption>.

El ejemplo siguiente muestra la situación de las estiquetas <col /> y <colgroup> en una tabla.

<table border="1" >
  <caption>Leyenda</caption>
  <colgroup><col /><col /></colgroup><colgroup><col /></colgroup>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

Cada etiqueta <col /> corresponde a una columna, en el mismo orden (la primera etiqueta <col /> corresponde a la primera columna, y así sucesivamente). En el ejemplo anterior, hay definidas dos grupos de columnas, el primero de los cuales abarca dos columnas y el segundo una columna.

Puede haber menos etiquetas <col /> que columnas en la tabla (también puede haber más, pero serían innecesarias).

En una tabla puede haber únicamente etiquetas <col /> (es decir, puede no haber etiquetas <colgroup />), pero si hay una etiqueta <colgroup /> ya no puede haber etiquetas <col /> que no estén dentro de una etiqueta <colgroup>.