El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem com utilitzar encapçalaments i peus de taula per organitzar i presentar dades de manera clara i estructurada en una taula HTML. Els encapçalaments de taula (<thead>) i els peus de taula (<tfoot>) són elements essencials per millorar la llegibilitat i la comprensió de les dades.

Objectius

Entendre la funció dels encapçalaments (<thead>) i peus de taula (<tfoot>) en una taula HTML.
Aprendre a crear i estilitzar encapçalaments i peus de taula.
Veure exemples pràctics d'ús d'encapçalaments i peus de taula.

Estructura bàsica d'una taula amb encapçalaments i peus de taula

Una taula HTML pot tenir tres seccions principals:

Encapçalament de la taula (<thead>): Conté les capçaleres de les columnes.
Cos de la taula (<tbody>): Conté les files de dades.
Peu de taula (<tfoot>): Conté informació resumida o notes finals.

Exemple bàsic

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exemple de Taula amb Encapçalaments i Peus de Taula</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #000;
            padding: 8px;
            text-align: left;
        }
        thead {
            background-color: #f2f2f2;
        }
        tfoot {
            background-color: #f9f9f9;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Nom</th>
                <th>Edat</th>
                <th>Ciutat</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Anna</td>
                <td>28</td>
                <td>Barcelona</td>
            </tr>
            <tr>
                <td>Joan</td>
                <td>34</td>
                <td>València</td>
            </tr>
            <tr>
                <td>Maria</td>
                <td>22</td>
                <td>Madrid</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">Total: 3 persones</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

Explicació del codi

Encapçalament de la taula (<thead>):
- Utilitzem l'etiqueta <thead> per agrupar les capçaleres de les columnes.
- Dins de <thead>, utilitzem <tr> per crear una fila i <th> per definir les cel·les de capçalera.
Cos de la taula (<tbody>):
- Utilitzem l'etiqueta <tbody> per agrupar les files de dades.
- Dins de <tbody>, utilitzem <tr> per crear files i <td> per definir les cel·les de dades.
Peu de taula (<tfoot>):
- Utilitzem l'etiqueta <tfoot> per agrupar les cel·les del peu de taula.
- Dins de <tfoot>, utilitzem <tr> per crear una fila i <td> per definir les cel·les del peu de taula.
- En aquest exemple, utilitzem l'atribut colspan per fusionar les cel·les del peu de taula en una sola cel·la que abasta totes les columnes.

Exercici pràctic

Instruccions

Crea una taula HTML que mostri una llista de productes amb les següents columnes: Nom del Producte, Preu, Quantitat.
Afegeix un encapçalament de taula amb les capçaleres corresponents.
Afegeix algunes files de dades al cos de la taula.
Afegeix un peu de taula que mostri el total de productes.

Solució

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exercici de Taula amb Encapçalaments i Peus de Taula</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #000;
            padding: 8px;
            text-align: left;
        }
        thead {
            background-color: #f2f2f2;
        }
        tfoot {
            background-color: #f9f9f9;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Nom del Producte</th>
                <th>Preu</th>
                <th>Quantitat</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Producte A</td>
                <td>10€</td>
                <td>5</td>
            </tr>
            <tr>
                <td>Producte B</td>
                <td>20€</td>
                <td>3</td>
            </tr>
            <tr>
                <td>Producte C</td>
                <td>15€</td>
                <td>7</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">Total: 3 productes</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

Resum

En aquesta secció, hem après com utilitzar els encapçalaments (<thead>) i peus de taula (<tfoot>) per organitzar i presentar dades en una taula HTML. Hem vist com crear i estilitzar aquestes seccions per millorar la llegibilitat i la comprensió de les dades. A més, hem practicat amb un exercici per reforçar els conceptes apresos.

En el següent tema, explorarem com fusionar cel·les en una taula utilitzant els atributs colspan i rowspan.

Encapçalaments i peus de taula

Objectius

Estructura bàsica d'una taula amb encapçalaments i peus de taula

Exemple bàsic

Explicació del codi

Exercici pràctic

Instruccions

Solució

Resum

Curs d'HTML

Mòdul 1: Introducció a l'HTML

Mòdul 2: Formatació de text en HTML

Mòdul 3: Enllaços i mitjans en HTML

Mòdul 4: Taules en HTML

Mòdul 5: Formularis en HTML

Mòdul 6: Elements semàntics d'HTML5

Mòdul 7: Tècniques avançades d'HTML

Mòdul 8: Integració d'HTML i CSS

Mòdul 9: Disseny web responsiu

Mòdul 10: Millors pràctiques i accessibilitat

Mòdul 11: Projecte: Construint un lloc web complet