12.6. Afegir capçaleres i peu de taula

A les taules també es poden afegir etiquetes per definir el títol, i les cel·les de capçalera o peu.

Amb les etiquetes <caption></caption>, definirem el títol de la taula. Podem definir la seva alineació mitjançant l'estil "text-align" i els paràmetres "left" (esquerra), "center" (centrat) o "right" (dreta). També podem indicar si volem el títol a dalt o abaix, mitjançant l'estil "caption-side" i els paràmetres "top" (a dalt) o "bottom" (abaix).

Si totes les cel·les de la primera fila són capçaleres, podem fer servir les etiquetes <thead></thead> per delimitar-la. Després farem servir les etiquetes <th></th>; així indicam que el contingut d’aquestes cel·les són títols de columnes.

Si en la primera fila tenim només una cel·la que farà de capçalera, dins les etiquetes <tr></tr> que defineixen la fila normal dins el cos de la taula, farem servir les etiquetes <th></th>; així indicam que el contingut d’aquestes cel·les és un títol de fila.

Si totes les cel·les de la darrera fila són peus, podem fer servir les etiquetes <tfoot></tfoot> per delimitar-la. Després farem servir les etiquetes <th></th> per a definir les cel·les.

Per raons d'accessibilitat, heu de fer servir correctament les etiquetes corresponents al títol, capçalera i peu de taula, ja que així els lectors de pantalla ho indicaran de manera correcta a la persona que escolta.

<table>
<caption style="text-align: left; caption-side: top;">Títol de la taula</caption>
<thead>

</thead>
<tbody>

</tbody>
<tfoot>

</tfoot>
</table>

<table style="width: 100%; text-align: center; border-collapse: collapse;">
<caption style="text-align: left; caption-side: top;">Títol de la taula</caption>
<thead>
<tr>
<th></th>
<th style="border: 1px solid black; width: 33%;">Títol A</th>
<th style="border: 1px solid black; width: 33%;">Títol B</th>
</tr>
</thead>
<tbody>
<tr>
<th style="border: 1px solid black;">Títol 1</th>
<td style="border: 1px solid black;">A</td>
<td style="border: 1px solid black;">B</td>
</tr>
<tr>
<th style="border: 1px solid black;">Títol 2</th>
<td style="border: 1px solid black;">C</td>
<td style="border: 1px solid black;">D</td>
</tr>
<tr>
<th style="border: 1px solid black;">Títol 3</th>
<td style="border: 1px solid black;">E</td>
<td style="border: 1px solid black;">F</td>
</tr>
<tr>
<th style="border: 1px solid black;">Títol 4</th>
<td style="border: 1px solid black;">G</td>
<td style="border: 1px solid black;">H</td>
</tr>
<tr>
<th style="border: 1px solid black;">Títol 5</th>
<td style="border: 1px solid black;">I</td>
<td style="border: 1px solid black;">J</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th style="border: 1px solid black;">Peu A</th>
<th style="border: 1px solid black;">Peu B</th>
</tr>
</tfoot>
</table>

IMPORTANT: a la primera cel·la de la línia de capçalera no hem inclòs cap estil "width". Això fa que el percentatge restant que hi deixen les altres dues cel·les (100 % - 33 % - 33 % = 34 %) s'hi assigni automàticament.