Objetivos

Las tablas están pensadas exclusivamente para mostrar datos tabulares. Cualquier otro uso no es semántico ni apropiado. Las tablas creadas pueden ser sencillas o más elaboradas, con agrupaciones de columnas, leyendas, etc.

La estructura de las tablas

Para insertar una tabla, debe usar el elemento <table>. Todos los demás elementos estructurales de las tablas (filas, columnas y celdas) se incluirán en este elemento.

Dentro del elemento <table>, es posible insertar:

líneas con <tr>;
celdas con <td> y <th>;
un título con <caption>;
un encabezado con <thead>;
un pie de tabla con <tfoot>;
un cuerpo de tabla con <tbody>;
grupos de columnas con <colgroup> y <col>.

Las filas

En una tabla, las filas se insertan con el elemento <tr> (de table row). Cada fila contendrá celdas.

He aquí una estructura inicial simple con solo tres filas:

<table>   
  <tr>...</tr>   
  <tr>...</tr>   
  <tr>...</tr>   
</table>

Las celdas

En las filas de la tabla, las celdas normales se insertan con el elemento <td> (de table data) y las celdas de encabezado, con <th> (de table header). Las celdas de encabezado se diferencian por mostrar su contenido centrado y en negrita.

He aquí un ejemplo sencillo:

<table>   
  <tr>   
    <th>Enero</th>   
    <th>Febrero</th>   
    <th>Marzo</th>   
  </tr>   
  <tr>   
    <td>123</td>   
    <td>134</td>   
    <td>156</td>   
  </tr>   
  <tr>   
    <td>213</td>   
    <td>256</td>   
    <td>273</td>   
  </tr>   
  <tr>   
    <td>321</td>   
    <td>351</td>   
    <td>372</td>   
  </tr>   
</table>

Y esta es la pantalla resultante:

La combinación de celdas

Es posible combinar o fusionar celdas, ya sea vertical u horizontalmente, con los atributos rowspan y colspan. El valor de estos atributos indica el número de celdas que deben combinarse.

He aquí un ejemplo en el que dos celdas se combinan verticalmente con rowspan:

<table>   
  <tr>   
    <th>Enero</th>   
    <th>Febrero</th>   
    <th>Marzo</th>   
  </tr>   
  <tr>   
    <td>123</td>   
    <td>134</td>        
    <td>156</td>   
  </tr>   
  <tr>   
    <td>213</td>   
    <td rowspan="2">256</td>   
    <td>273</td>   
  </tr>   
  <tr>   
    <td>321</td>   
    <td>372</td>   
  </tr>   
</table>

Para visualizar mejor la combinación de las dos celdas, se han agregado bordes a las celdas usando propiedades...

El título de la tabla

El elemento <caption> permite agregar un título a las tablas. Este título aparecerá encima de la tabla. Este elemento se coloca justo después de la etiqueta de apertura de <table>.

He aquí un ejemplo sencillo:

<table>   
  <caption>Resultados primer trimestre</caption>   
  <tr>   
    <th>Enero</th>   
    <th>Febrero</th>   
    <th>Marzo</th>   
  </tr>   
  <tr>   
    <td>123</td>   
    <td>134</td>   
    <td>156</td>   
  </tr>   
  <tr>   
    <td>213</td>   
    <td>256</td>   
    <td>273</td>   
  </tr>   
  <tr>   
    <td>321</td>   
    <td>351</td>   
    <td>372</td>   
  </tr>   
</table>

Esta es la visualización obtenida...

Los grupos de columnas

1. Agrupar columnas

Para aplicar un formato específico a ciertas columnas, es posible agruparlas con el elemento <colgroup>. Este elemento se coloca justo después de la etiqueta de apertura de <table>.

En el siguiente ejemplo, las dos primeras columnas deben tener un fondo gris claro. Este formato se logra con una regla CSS incluida directamente en el elemento. Para este ejemplo, el número deseado de columnas se indica con el atributo span="2":

<table>   
  <colgroup span="2" style="background-color : #eee;"></colgroup>  
  <tr>   
    <th>Enero</th>   
    <th>Febrero</th>   
    <th>Marzo</th>   
    <th>Abril</th>   
  </tr>   
  <tr>   
    <td>123</td>   
    <td>134</td>   
    <td>156</td>   
    <td>186</td>   
  </tr>   
  <tr>   
    <td>213</td>   
    <td>256</td>   
   ...

Las tablas estructuradas

Las mesas pueden diseñarse de forma muy estructurada con los elementos <thead> y <tfoot>. Estos tres elementos se utilizan conjuntamente. La principal ventaja de usar tablas estructuradas es que, si su contenido es más largo de lo que permite la visualización en pantalla, el encabezado y el pie de página de la tabla seguirán siendo visibles. Lo mismo se aplica en el caso de la impresión de la tabla: el encabezado y el pie se repetirán en la parte superior e inferior de cada página impresa.

El elemento <thead> constituye el encabezado de la tabla. Debe insertarse después del título <caption> y de los grupos de columnas <colgroup>. En este elemento, se colocan las filas <tr> de la tabla.
El elemento <tfoot> constituye el pie de la tabla. Tenga en cuenta que este elemento <tfoot> debe colocarse antes del cuerpo de la tabla <tbody>.
El elemento <tbody> constituye el cuerpo de la tabla y contendrá las filas <tr> de esta.

He aquí un ejemplo de una tabla estructurada:

<table>   
  <thead>   
    <tr>   
      <th>&nbsp;</th>   
      <th>Enero</th>   
     ...