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

HOME

Les taules són una manera poderosa d'organitzar informació en files i columnes dins d'una pàgina web. En aquest tema, aprendrem com crear una taula bàsica en HTML, incloent les etiquetes fonamentals i la seva estructura.

Conceptes clau

Etiquetes de taula:
- <table>: Defineix l'inici i el final d'una taula.
- <tr>: Defineix una fila dins de la taula.
- <th>: Defineix una cel·la d'encapçalament (normalment en negreta i centrada).
- <td>: Defineix una cel·la de dades dins d'una fila.
Estructura bàsica:
- Una taula està composta per files (<tr>), i cada fila conté cel·les (<th> o <td>).

Exemple pràctic

A continuació, veurem un exemple pràctic d'una taula bàsica en HTML:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exemple de Taula Bàsica</title>
</head>
<body>
    <h1>Exemple de Taula Bàsica</h1>
    <table border="1">
        <tr>
            <th>Nom</th>
            <th>Edat</th>
            <th>Ciutat</th>
        </tr>
        <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>
    </table>
</body>
</html>

Explicació del codi

Etiqueta <table>:
- Defineix l'inici de la taula.
- L'atribut border="1" afegeix un contorn a la taula per fer-la més visible.
Etiqueta <tr>:
- Defineix una fila dins de la taula.
- En aquest exemple, la primera fila conté encapçalaments (<th>), i les següents contenen dades (<td>).
Etiquetes <th> i <td>:
- <th>: Defineix les cel·les d'encapçalament de la taula. En aquest cas, "Nom", "Edat" i "Ciutat".
- <td>: Defineix les cel·les de dades. Cada fila de dades conté informació sobre una persona.

Exercici pràctic

Instruccions

Crea una taula en HTML que mostri la informació següent sobre tres llibres:

Títol	Autor	Any de publicació
"El Quixot"	Miguel de Cervantes	1605
"1984"	George Orwell	1949
"Cien años de soledad"	Gabriel García Márquez	1967

Solució

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exemple de Taula de Llibres</title>
</head>
<body>
    <h1>Exemple de Taula de Llibres</h1>
    <table border="1">
        <tr>
            <th>Títol</th>
            <th>Autor</th>
            <th>Any de publicació</th>
        </tr>
        <tr>
            <td>El Quixot</td>
            <td>Miguel de Cervantes</td>
            <td>1605</td>
        </tr>
        <tr>
            <td>1984</td>
            <td>George Orwell</td>
            <td>1949</td>
        </tr>
        <tr>
            <td>Cien años de soledad</td>
            <td>Gabriel García Márquez</td>
            <td>1967</td>
        </tr>
    </table>
</body>
</html>

Errors comuns

Oblidar tancar etiquetes: Assegura't de tancar totes les etiquetes (<table>, <tr>, <th>, <td>).
Manca de consistència en les files: Cada fila (<tr>) ha de tenir el mateix nombre de cel·les (<th> o <td>).

Resum

En aquesta secció, hem après com crear una taula bàsica en HTML utilitzant les etiquetes fonamentals. Hem vist un exemple pràctic i hem realitzat un exercici per reforçar els conceptes apresos. Ara estàs preparat per avançar a temes més complexos relacionats amb les taules, com els encapçalaments i peus de taula, i la fusió de cel·les.

Estructura bàsica de taules

Conceptes clau

Exemple pràctic

Explicació del codi

Exercici pràctic

Instruccions

Solució

Errors comuns

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