Por defecto, al crear una tabla, el navegador se encarga de irla creando a medida que va leyendo las etiquetas, por lo que la tabla se crea en el orden que se han especificado sus elementos, desde arriba hacia abajo.
Sin embargo, podemos utilizar una serie de etiquetas contenedoras semánticas para tablas que nos permitirán incluso establecer la zona de la tabla donde deben aparecer, de forma que el navegador se encarga de reorganizarla a la hora de renderizar.
Estas etiquetas semánticas son las siguientes:
| Etiqueta | Descripción |
|---|---|
<thead> | Etiqueta contenedora de la cabecera de la tabla. Generalmente, parte superior. |
<tbody> | Etiqueta contenedora del cuerpo de la tabla. Generalmente, parte central. |
<tfoot> | Etiqueta contenedora del pie de la tabla. Generalmente, parte inferior. |
<caption> | Establece un título de la tabla, independientemente de su posición. |
Supongamos la siguiente tabla:
<table>
<tr>
<th rowspan="2">Estudiante</th>
<th colspan="3">Calificación</th>
</tr>
<tr>
<th>1º ev.</th>
<th>2º ev.</th>
<th>3º ev.</th>
</tr>
<tr>
<td>Bernardo</td>
<td>5.7</td>
<td>8.3</td>
<td>8.9</td>
</tr>
<tr>
<td>Remigio</td>
<td>4.7</td>
<td>4.7</td>
<td>1.3</td>
</tr>
<tr>
<td>Ana</td>
<td>9.7</td>
<td>9.7</td>
<td>9.9</td>
</tr>
<!-- ... -->
</table>
th, td {
border: 1px solid #000;
}
A estas etiquetas de tabla y atributos que ya hemos visto en artículos anteriores, podemos añadir las mencionadas nuevas etiquetas, definiendo así la zona donde aparecerán las diferentes partes de la tabla, aunque no tengan el orden correcto.
La etiqueta <caption>
La etiqueta <caption> debe aparecer en el interior de la tabla <table> y como primer elemento inmediato. En su interior, se establece una leyenda que hará referencia a la tabla, donde podemos describirla o dar contexto sobre los datos que contiene.
Si visualmente queremos que el <caption> aparezca en otra parte, podemos utilizar una propiedad CSS para ello:
table {
caption-side: bottom;
}
Por defecto, esta propiedad
caption-sideviene establecida atop, pero podemos darle valorbottompara colocar abajo la leyenda.
Agrupaciones de partes de la tabla
Las etiquetas <thead>, <tbody> y <tfoot> son las etiquetas semánticas de agrupación de las tablas. Con ellas podemos definir mediante estas etiquetas "invisibles", la zona donde queremos que aparezca cada parte de la tabla.
Por ejemplo, observa que en el siguiente fragmento de código, se ha colocado intencionadamente la etiqueta <tfoot> al principio de la tabla, antes de <tbody> y <thead>. Aunque lo normal no es hacer esto, comprobarás que aunque el footer esté en primer lugar, en la tabla será renderizado al final.
Veamos el fragmento de código:
<table>
<caption>Calificaciones de los alumnos</caption>
<tfoot>
<tr>
<td>Ref.</td>
<td>5.0</td>
<td>5.0</td>
<td>5.0</td>
</tr>
</tfoot>
<thead>
<tr>
<th rowspan="2">Estudiante</th>
<th colspan="3">Calificación</th>
</tr>
<tr>
<th>1º ev.</th>
<th>2º ev.</th>
<th>3º ev.</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bernardo</td>
<td>5.7</td>
<td>8.3</td>
<td>8.9</td>
</tr>
<tr>
<td>Remigio</td>
<td>4.7</td>
<td>4.7</td>
<td>1.3</td>
</tr>
<tr>
<td>Ana</td>
<td>9.7</td>
<td>9.7</td>
<td>9.9</td>
</tr>
</tbody>
<!-- ... -->
</table>
th, td {
border: 1px solid #888;
}
tfoot td {
background: #666;
color: #eee;
border: 0;
}
Esto nos puede servir para crear tablas de forma más precisa sin tener que mantener una estructura lógica y realista (aunque siempre se recomienda hacerlo). En algunos lenguajes de programación puedes necesitar construir la tabla de forma dinámica a medida que se procesan ciertos detalles, por lo que esto podría ser bastante útil e interesante.
