Tablas

Nota: Como se comenta en la lección Atributos de tablas, los bordes de los elementos de una tabla se establecen mediante propiedades de estilo. En los ejemplos de código de esta página no se muestran esas propiedades.

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>)

Las celdas de la tabla suelen ser elementos <td>, aunque también pueden ser elemento <th> para indicar que la celda es una cabecera de la fila o columna correspondiente.

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

<table>
  <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>
ERROR (no puede mostrarse el objeto)
Enlace externo

Leyenda (<caption>)

La leyenda (<caption>) es un 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>
  <caption>Liga de <strong>Fútbol</strong> española - Resultados de la Copa del Rey</caption>
  <tbody>
    <tr>
...
ERROR (no puede mostrarse el objeto)
Enlace externo

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

Los elementos <tbody>, <thead> y <tfoot> abarcan una o varias filas seguidas para formar un grupo de filas. Un grupo de filas puede ser una cabecera de la tabla (<thead>), un pie de tabla (<tfoot>) o formar parte del contenido de la tabla (<tbody>)

En una tabla puede haber uno o varios <tbody>, pero tanto la cabecera de la tabla (<thead>) como el pie de tabla (<tfoot>) son opcionales y sólo puede haber uno de cada en una tabla.

Si una tabla contiene <thead> o <tfoot>, también debe contener <tbody>.

Al imprimir una tabla que ocupa varias páginas, los navegadores repiten al principio y al final de cada página las cabeceras <thead> y pies de tabla <tfoot>. Se puede comprobar, por ejemplo, con la lista de entidades de carácter de HTML 4, que no cabe en una sola página.

<table>
  <caption>Ejemplo de tabla</caption>
  <thead>
    <tr>
      <th>País</th>
      <th>Capital</th>
      <th>Moneda</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Reino de España</td>
      <td>Madrid</td>
      <td>Euro</td>
    </tr>
    <tr>
      <td>Estados Unidos Mexicanos</td>
      <td>Ciudad de México</td>
      <td>Peso</td>
    </tr>
    <tr>
      <td>República Argentina</td>
      <td>Buenos Aires</td>
      <td>Peso</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>País</th>
      <th>Capital</th>
      <th>Moneda</th>
    </tr>
  </tfoot>
</table>
ERROR (no puede mostrarse el objeto)
Enlace externo

Filas (<tr>)

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

<table>
  <caption>Ejemplo de tabla</caption>
  <tbody>
    <tr>
      <td>celda A1</td>
      <td>celda A2</td>
      <td>celda A3</td>
    </tr>
    <tr>
      <td>celda B1</td>
      <td>celda B2</td>
      <td>celda B3</td>
    </tr>
    <tr>
      <td>celda C1</td>
      <td>celda C2</td>
      <td>celda C3</td>
    </tr>
  </tbody>
</table>
ERROR (no puede mostrarse el objeto)
Enlace externo

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>
  <caption>Fútbol Copa del Rey</caption>
  <tbody>
    <tr>
      <td></td>
      <th>2020/2021</th>
      <th>2021/2022</th>
    </tr>
    <tr>
      <th>Campeón</th>
      <td>F.C. Barcelona</td>
      <td>Real Betis Balompié</td>
    </tr>
    <tr>
      <th>Subcampeón</th>
      <td>Athletic Club</td>
      <td>Valencia C.F.</td>
    </tr>
  </tbody>
</table>
ERROR (no puede mostrarse el objeto)
Enlace externo

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 vacía <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 etiquetas <col> y <colgroup> en una tabla.

<table >
  <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 definidos dos grupos de columnas, el primero de los cuales abarca dos columnas y el segundo una columna.

El número de columnas que se defina mediante etiquetas <col> y <colgroup> debe coincidir con el número de columnas de la tabla.

Todas las etiquetas <col> deben estar incluidas en algún <colgroup>. Si alguna o algunas etiquetas <col> no están incluidas en ninguna etiqueta <colgroup>, los navegadores crean automáticamente etiquetas <colgroup> que agrupan las etiquetas <col> "huérfanas" consecutivas. Por ejemplo, si no se incluye ninguna etiqueta <colgroup>, el navegador creará un etiqueta <colgroup> que agrupe todas las columnas. Y si se incluye una o varias etiquetas <colgroup>, pero quedan etiquetas <col> no incluidas en ninguno de los <colgroup>, el navegador creará etiquetas <colgroup> para esas etiquetas <col>.