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 pueden organizar 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 sería el siguiente:
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>
<tr>
...
Cuerpos de tabla (<tbody>), encabezados (<thead>) y pies (<tfoot>)
Los elementos <tbody>, <thead> y <tfoot> abarcan una o varias filas seguidas para indicar que varias filas forman 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>)
Si una tabla contiene un elemento <thead>, este debe aparecer al principio. Si una tabla contiene un elemento <tfoot>, este debe aparecer al final.
Una tabla puede contener varios <tbody> consecutivos.
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.
En el ejemplo siguiente, la tabla contiene un encabezado <thead> y un pie <tfoot>, pero no contiene un cuerpo de tabla <tbody>. Si no se van a crear varios <tbody>, las etiquetas de ese <tbody> se suelen omitir, como muestra el ejemplo siguiente.
En el ejemplo siguiente, la tabla contiene dos cuerpos de tabla <tbody>, agrupando las filas de países que pertenecen al mismo continente. Visualmente, el navegador no distingue estos dos <tbody>, salvo que lo indiquemos nosotros mediante propiedades de estilo.
<table>
<caption>Ejemplo de tabla</caption>
<tbody>
<tr>
<td>Reino de España</td>
<td>Madrid</td>
<td>Euro</td>
</tr>
<tr>
<td>Reino de Dinamarca</td>
<td>Copenhague</td>
<td>Corona danesa</td>
</tr>
</tbody>
<tbody>
<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>
</table>
Si una tabla contiene filas (<tr>) no incluidas en algún grupo (<tbody>, <thead> o <tfoot>), los navegadores crean automáticamente elementos <tbody> que agrupen las filas consecutivas no incluidas en ningún grupo. En el ejemplo siguiente el contenido de la fila se ve de color rojo debido a la regla de estilo de <tbody>, aunque el código fuente no contiene explícitamente el elemento <tbody>, lo que indica que el navegador lo ha creado (de hecho, si se abre el inspector del navegador se puede ver ese elemento <tbody>).
tbody {
color: red;
}
<table>
<caption>Ejemplo de tabla</caption>
<tr>
<td>Reino de España</td>
<td>Madrid</td>
<td>Euro</td>
</tr>
</table>
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.
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.
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>.
