# Tablas

En esta página se tratan los siguientes temas:

## Estructura de una tabla (<table>)

Una tabla XHTML (<table>) es una rejilla rectangular de celdas, formada por los siguientes elementos:

- Leyenda (<caption>)
- Cabecera de tabla (<thead>)
- Cuerpos de tabla (<tbody>)
- Pie de tabla (<tfoot>)

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

Volver al principio de la página

## 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:

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

Volver al principio de la página

## 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.

Volver al principio de la página

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

Nota: Internet Explorer 8 muestra correctamente el borde de las celdas cuando una celda está vacía. Las versiones anteriores lo hacían incorrectamente, como se comenta en la página de diferencias entre IE8 e IE7.

Volver al principio de la página

## 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.

    1   <table border="1" >
    2     <caption>Leyenda</caption>
    3     <colgroup><col /><col /></colgroup><colgroup><col /></colgroup>
    4     <tbody>
    5       <tr>
    6         <td>1</td>
    7         <td>2</td>
    8         <td>3</td>
    9       </tr>
    10     </tbody>
    11  </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>.

Volver al principio de la página

Esta obra está bajo una licencia de Creative Commons Reconocimiento-CompartirIgual 3.0 España.