A les taules també es poden afegir etiquetes per definir cel·les i files de capçalera o peu.
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 un títol.
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.
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>.
Exemple visual del codi |
<table>
<thead>
<tr> | <th></th> | <th>Títol A</th> | <th>Títol B</th> | </tr> |
</thead>
<tbody>
<tr> | <th>Títol 1</th> | <td>A</td> | <td>B</td> | </tr> |
<tr> | <th>Títol 2</th> | <td>C</td> | <td>D</td> | </tr> |
<tr> | <th>Títol 3</th> | <td>E</td> | <td>F</td> | </tr> |
<tr> | <th>Títol 4</th> | <td>G</td> | <td>H</td> | </tr> |
<tr> | <th>Títol 5</th> | <td>I</td> | <td>J</td> | </tr> |
</tbody>
<tfoot>
<tr> | <th></th> | <th>Peu A</th> | <th>Peu B</th> | </tr> |
</tfoot>
</table>
Codi HTML |
<table style="width: 100%; text-align: center; border-collapse: collapse;">
<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.
Visualitzat en el navegador |
Títol A | Títol B | |
---|---|---|
Títol 1 | A | B |
Títol 2 | C | D |
Títol 3 | E | F |
Títol 4 | G | H |
Títol 5 | I | J |
Peu A | Peu B |