Exercice 1 : Créer un tableau simple

Créez un tableau HTML avec 2 colonnes et 3 lignes. La première ligne doit contenir les en-têtes "Prénom" et "Âge". Remplissez les lignes suivantes avec des données de votre choix.

Indice : Utilisez les balises <table>, <tr>, <th>, et <td>. 

<table>
    <tr>
        <th>Prénom</th>
        <th>Âge</th>
    </tr>
    
</table>

Corrigé :

<table>
    <tr>
        <th>Prénom</th>
        <th>Âge</th>
    </tr>
    <tr>
        <td>Alice</td>
        <td>25</td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>30</td>
    </tr>
    <tr>
        <td>Charlie</td>
        <td>22</td>
    </tr>
</table>

Explication : Les balises <th> définissent les en-têtes du tableau, tandis que <td> définit les cellules de données.

Exercice 2 : Fusionner des cellules

Créez un tableau avec 3 colonnes et 2 lignes. Fusionnez les deux premières cellules de la première ligne pour créer un titre qui s'étend sur deux colonnes. Utilisez l'attribut colspan.

Indice : L'attribut colspan="2" permet de fusionner deux colonnes. 

<table>
    <tr>
        
    </tr>
    <tr>
        <td>Ligne 1, Colonne 1</td>
        <td>Ligne 1, Colonne 2</td>
        <td>Ligne 1, Colonne 3</td>
    </tr>
</table>

Corrigé :

<table>
    <tr>
        <th colspan="2">Titre</th>
        <th>Colonne 3</th>
    </tr>
    <tr>
        <td>Ligne 1, Colonne 1</td>
        <td>Ligne 1, Colonne 2</td>
        <td>Ligne 1, Colonne 3</td>
    </tr>
</table>

Explication : L'attribut colspan indique le nombre de colonnes que la cellule doit occuper.

Exercice 3 : Ajouter une bordure et un style

Ajoutez une bordure et un style de fond aux cellules du tableau ci-dessous en utilisant du CSS intégré.

Indice : Utilisez l'attribut style dans la balise <table> ou <td>. 

<table style="border: 1px solid black;">
    <tr>
        <th>Produit</th>
        <th>Prix</th>
    </tr>
    <tr>
        <td>Pomme</td>
        <td>1,50 €</td>
    </tr>
    <tr>
        <td>Banane</td>
        <td>0,99 €</td>
    </tr>
</table>

Corrigé :

<table style="border: 1px solid black; border-collapse: collapse;">
    <tr>
        <th style="background-color: #f2f2f2;">Produit</th>
        <th style="background-color: #f2f2f2;">Prix</th>
    </tr>
    <tr>
        <td style="border: 1px solid black;">Pomme</td>
        <td style="border: 1px solid black;">1,50 €</td>
    </tr>
    <tr>
        <td style="border: 1px solid black;">Banane</td>
        <td style="border: 1px solid black;">0,99 €</td>
    </tr>
</table>

Explication : L'attribut style permet d'ajouter des styles CSS directement dans les balises HTML.

Exercice 4 : Tableau avec en-tête et pied

Créez un tableau avec une section d'en-tête (<thead>), un corps (<tbody>), et un pied (<tfoot>). Le pied doit contenir la mention "Total : 2 articles".

Indice : Utilisez les balises <thead>, <tbody>, et <tfoot>. 

<table>
    <!-- Ajoutez les sections ici -->
    <tr>
        <td>Pomme</td>
        <td>1,50 €</td>
    </tr>
    <tr>
        <td>Banane</td>
        <td>0,99 €</td>
    </tr>
</table>

Corrigé :

<table>
    <thead>
        <tr>
            <th>Produit</th>
            <th>Prix</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Pomme</td>
            <td>1,50 €</td>
        </tr>
        <tr>
            <td>Banane</td>
            <td>0,99 €</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total : 2 articles</td>
            <td></td>
        </tr>
    </tfoot>
</table>

Explication : Les balises <thead>, <tbody>, et <tfoot> permettent de structurer le tableau en sections logiques.

Exercice 5 : Tableau avec fusion de lignes

Créez un tableau où la première cellule de la première colonne s'étend sur deux lignes. Utilisez l'attribut rowspan.

Indice : L'attribut rowspan="2" permet de fusionner deux lignes. 

<table>
    <tr>
        <!-- Fusionnez cette cellule sur deux lignes -->
        <td>Catégorie</td>
        <td>Fruit</td>
    </tr>
    <tr>
        <td>Pomme</td>
    </tr>
</table>

Corrigé :

<table>
    <tr>
        <td rowspan="2">Catégorie</td>
        <td>Fruit</td>
    </tr>
    <tr>
        <td>Pomme</td>
    </tr>
</table>

Explication : L'attribut rowspan indique le nombre de lignes que la cellule doit occuper.

Retourner aux exercices