Título en tabla HTML

En este ejemplo vamos a ver cómo podemos poner un título en tabla HTML. Para ello vamos a ver cómo podemos utilizar el elemento caption de HTML.

Crear la tabla básica

Lo primero será partir de una tabla. En este caso hemos escogido una tabla con datos demográficos.

<table>
  <tr>
    <th>País</th>
    <th>Capital</th>
    <th>Superficie</th>
    <th>Habitantes</th>
  </tr>
  <tr>
    <td>España</td>
    <td>Madrid</td>
    <td>504.645 km<sup>2</sup></td>
    <td>46,6 M</td>
  </tr>
  <tr>
    <td>Italia</td>
    <td>Roma</td>
    <td>301.338 km<sup>2</sup></td>
    <td>60,7 M</td>
  </tr>
</table>

Vemos que la estructura de la tabla es la normal, con su elemento table, con sus filas definidas mediante el elemento tr y las celdas ya sean de cabecera th o normales td.

Añadir el elemento caption

Para poner el título en tabla HTML deberemos de añadir el elemento caption justamente después del elemento table.

El elemento caption es un elemento con etiquetas de inicio y cierre que contendrá el texto representativo del título.

Es decir, el código HTML nos quedará de la siguiente forma:

<table>
  <caption>Datos Demográficos</caption>
  <tr>
    <th>País</th>
    <th>Capital</th>
    <th>Superficie</th>
    <th>Habitantes</th>
  </tr>
  <tr>
    <td>España</td>
    <td>Madrid</td>
    <td>504.645 km<sup>2</sup></td>
    <td>46,6 M</td>
  </tr>
  <tr>
    <td>Italia</td>
    <td>Roma</td>
    <td>301.338 km<sup>2</sup></td>
    <td>60,7 M</td>
  </tr>
  <tr>
    <td>Francia</td>
    <td>París</td>
    <td>675.417 km<sup>2</sup></td>
    <td>66 M</td>
  </tr>
  <tr>
    <td>Grecia</td>
    <td>Atenas</td>
    <td>131.990 km<sup>2</sup></td>
    <td>10,7 M</td>
  </tr>
  <tr>
    <td>Alemania</td>
    <td>Berlin</td>
    <td>357.168 km<sup>2</sup></td>
    <td>81,2 M</td>
  </tr>
</table>

Resultado visual

Visualmente el título en tabla HTML se muestra centrado encima de la tabla. Si bien mediante CSS podremos ponerlo encima o debajo de la tabla (lo veremos en otro artículo) o modificar su representación visual.

De esta forma tan sencilla podemos añadir un título descriptivo a nuestras tablas HTML utilizando el elemento caption, mejorando así la accesibilidad y comprensión de nuestros datos tabulares.