Introducció
Les taules històricament s'han utilitzat per a dissenyar les planes web. Així, per exemple, s'utilitzava una taula per a definir l'espai de la capçalera, del peu de plana, del menú, banners, contingut...
En HTML5 la funció de les taules no és la de dissenyar la plana web, sinó la de mostrar dades organitzades en files i columnes. Així, per exemple, és adequat utilitzar una taula per a visualitzar la informació d'un horari, d'una agenda, o les dades dels jugadors d'un partit de bàsquet.
Hi ha múltiples etiquetes per a crear una taula, cada una d'elles amb una funció específica. En aquest document tractarem les següents etiquetes:
- table
- caption
- thead
- tbody
- tfoot
- th
- tr
- td
Etiqueta table
L'etiqueta table és la que em permet crear una taula en un document HTML. Per tant, totes les taules començaran per aquesta etiqueta i contindran la resta d'etiquetes relacionades amb la taula abans del tancament de la taula.
Etiqueta caption
L'etiqueta caption ens permet definir un títol associat a la taula.
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="utf-8">
<title>Definició taula</title>
</head>
<body>
<h1>Taula</h1>
<table>
<caption>Exemple taula</caption>
<!-- OTHER RELATED TABLE TAGS -->
</table>
</body>
</html>
Etiqueta thead , tbody i tfoot
Aquestes tres etiquetes permeten definir les tres parts principals de la taula: la seva capçalera, el cos de la taula i el peu. Crearem una o vàries files en cada una de les parts.
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="utf-8">
<title>Definició taula</title>
</head>
<body>
<h1>Taula</h1>
<table>
<caption>Exemple taula</caption>
<thead><!-- HEADER ROWS --></thead>
<tbody><!-- BODY ROWS --></tbody>
<tfoot><!-- FOOTER ROWS --></tfoot>
</table>
</body>
</html>
Etiqueta tr
L'etiqueta _ tr s'utilitza per a crear una fila en una taula. En cada una de les files podre crear una o vàries cel·les que contindran la informació de la taula.
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="utf-8">
<title>Definició taula</title>
</head>
<body>
<h1>Taula</h1>
<table>
<caption>Exemple taula</caption>
<thead>
<tr><!-- SOME HEADER CELLS --></tr>
</thead>
<tbody>
<tr><!-- SOME BODY CELLS --></tr>
</tbody>
<tfoot>
<tr><!-- SOME FOOTER CELLS --></tr>
</tfoot>
</table>
</body>
</html>
Etiqueta th i td
L'etiqueta th i td s'utilitzen per a crear una cel·la en una fila. Aquestes etiquetes sempre han de tenir com a pare una etiqueta tr . Utilitzarem th quan la cel·la formi part de la capçalera de la taula. En cas contrari, utilitzarem td .
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="utf-8">
<title>Definició taula</title>
</head>
<body>
<h1>Taula</h1>
<table>
<caption>Exemple taula</caption>
<thead> <!-- DEFINICIÓ CAPÇALERA DE LA TAULA -->
<tr>
<th>Cel·la capçalera fila 1 col 1</th>
<th>Cel·la capçalera fila 1 col 2</th>
</tr>
<tr>
<th>Cel·la capçalera fila 2 col 1</th>
<th>Cel·la capçalera fila 2 col 2</th>
</tr>
</thead>
<tbody> <!-- DEFINICIÓ COS DE LA TAULA -->
<tr>
<td>Cel·la cos fila 1 col 1</td>
<td>Cel·la cos fila 1 col 2</td>
</tr>
<tr>
<td>Cel·la cos fila 2 col 1</td>
<td>Cel·la cos fila 2 col 2</td>
</tr>
</tbody>
<tfoot> <!-- DEFINICIÓ PEU DE LA TAULA -->
<tr>
<td>Cel·la peu fila 1 col 1</td>
<td>Cel·la peu fila 1 col 2</td>
</tr>
<tr>
<td>Cel·la peu fila 2 col 1</td>
<td>Cel·la peu fila 2 col 2</td>
</tr>
</tfoot>
</table>
</body>
</html>
 |
| Visualització de la taula amb aplicació del contorn de la taula i cel·les |