Création de tableaux avec les balises <table>, <tr>, <th>, <td>

Les tableaux sont utilisés pour organiser et afficher des données tabulaires dans une page web. HTML propose plusieurs balises et attributs spécifiques pour créer des tableaux de manière structurée et sémantique. Voici des exemples pour chaque élément :

Balise <table>

La balise <table> est utilisée comme conteneur principal pour le tableau. Elle englobe toutes les autres balises de tableau. Voici un exemple de balise <table> :

<table>
    <!-- Contenu du tableau -->
</table>

Balises <tr> et <td>

La balise <tr> est utilisée pour définir une ligne dans le tableau, tandis que la balise <td> est utilisée pour définir une cellule de données (data) dans le tableau. Voici un exemple de balises <tr> et <td> :

<table>
    <tr>
        <td>Donnée 1</td>
        <td>Donnée 2</td>
    </tr>
    <tr>
        <td>Donnée 3</td>
        <td>Donnée 4</td>
    </tr>
</table>

Balise <th>

La balise <th> est utilisée pour définir une cellule d'en-tête (header) dans le tableau. Elle est généralement utilisée pour la première ligne du tableau. Voici un exemple de balise <th> :

<table>
    <tr>
        <th>En-tête 1</th>
        <th>En-tête 2</th>
    </tr>
    <tr>
        <td>Donnée 1</td>
        <td>Donnée 2</td>
    </tr>
</table>

Attribut summary

L'attribut summary de la balise <table> permet de fournir une description textuelle du tableau. Il aide les utilisateurs à comprendre le contenu et la structure du tableau. Voici un exemple d'utilisation de l'attribut summary :

<table summary="Ce tableau affiche les ventes mensuelles par région géographique">
    <!-- Contenu du tableau -->
</table>

Attribut scope

L'attribut scope de la balise <th> permet de spécifier la portée des cellules d'en-tête. Il peut prendre les valeurs row pour une portée sur les lignes ou col pour une portée sur les colonnes. Voici un exemple d'utilisation de l'attribut scope :

<table>
    <tr>
        <th scope="col">En-tête 1</th>
        <th scope="col">En-tête 2</th>
    </tr>
    <tr>
        <td>Donnée 1</td>
        <td>Donnée 2</td>
    </tr>
</table>

Attribut headers

L'attribut headers des balises <td> permet de lier les cellules de données à leurs en-têtes correspondants. Il spécifie une liste d'identifiants d'en-tête séparés par des espaces. Voici un exemple d'utilisation de l'attribut headers :

<table>
    <tr>
        <th id="en-tete1">En-tête 1</th>
        <th id="en-tete2">En-tête 2</th>
    </tr>
    <tr>
        <td headers="en-tete1">Donnée 1</td>
        <td headers="en-tete2">Donnée 2</td>
    </tr>
</table>

Exemple regroupant l'ensemble des éléments

Voici un exemple complet qui regroupe l'ensemble des éléments discutés jusqu'à présent :

<table summary="Ce tableau affiche les ventes mensuelles par région géographique">
    <thead>
        <tr>
            <th scope="col">Mois</th>
            <th scope="col">Région 1</th>
            <th scope="col">Région 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Janvier</th>
            <td headers="mois region1">100</td>
            <td headers="mois region2">150</td>
        </tr>
        <tr>
            <th scope="row">Février</th>
            <td headers="mois region1">120</td>
            <td headers="mois region2">180</td>
        </tr>
    </tbody>
</table>

Ce tableau présente les ventes mensuelles par région géographique, avec une ligne d'en-tête spécifiant les régions et une colonne d'en-tête indiquant les mois. Les cellules de données sont liées à leurs en-têtes correspondants à l'aide de l'attribut headers.

En utilisant ces balises et attributs de manière appropriée, vous pouvez créer des tableaux bien structurés et accessibles dans vos pages web.

Exemple de tableau : Ticket de caisse

Voici un exemple de tableau représentant un ticket de caisse avec le calcul du prix hors taxe (HT) et du prix toutes taxes comprises (TTC) incluant une TVA de 20% :

<table summary="Ticket de caisse">
    <thead>
        <tr>
            <th scope="col">Article</th>
            <th scope="col">Quantité</th>
            <th scope="col">Prix unitaire (HT)</th>
            <th scope="col">TVA</th>
            <th scope="col">Prix unitaire (TTC)</th>
            <th scope="col">Total (TTC)</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td headers="article">T-shirt</td>
            <td headers="quantite">2</td>
            <td headers="prix-ht">20€</td>
            <td headers="tva">20%</td>
            <td headers="prix-ttc">24€</td>
            <td headers="total-ttc">48€</td>
        </tr>
        <tr>
            <td headers="article">Jeans</td>
            <td headers="quantite">1</td>
            <td headers="prix-ht">50€</td>
            <td headers="tva">20%</td>
            <td headers="prix-ttc">60€</td>
            <td headers="total-ttc">60€</td>
        </tr>
        <tr>
            <td headers="article">Chaussures</td>
            <td headers="quantite">1</td>
            <td headers="prix-ht">80€</td>
            <td headers="tva">20%</td>
            <td headers="prix-ttc">96€</td>
            <td headers="total-ttc">96€</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="5">Total (HT)</td>
            <td headers="total-ttc">204€</td>
        </tr>
        <tr>
            <td colspan="5">TVA (20%)</td>
            <td>34€</td>
        </tr>
        <tr>
            <td colspan="5">Total (TTC)</td>
            <td>238€</td>
        </tr>
    </tfoot>
</table>

Dans cet exemple, nous avons ajouté plusieurs colonnes supplémentaires pour afficher le prix unitaire hors taxe (HT), la TVA, le prix unitaire toutes taxes comprises (TTC) et le total TTC. Les attributs headers sont utilisés pour relier les cellules de données aux en-têtes correspondants.

Le pied de tableau a été modifié pour afficher le total HT, le montant de la TVA (calculé en fonction du total HT) et le total TTC.

Ce tableau représente un ticket de caisse avec une liste d'articles, leur quantité, leur prix unitaire HT, la TVA appliquée, le prix unitaire TTC et le total TTC. Le pied de tableau affiche les totaux HT, la TVA et le total TTC de l'achat.

En utilisant ces balises et attributs, vous pouvez créer des tableaux complets avec des calculs de prix HT et TTC, ce qui peut être utile pour afficher des informations financières ou des factures dans vos pages web.

Conclusion

Les balises <table>, <tr>, <th>, <td>, ainsi que les attributs tels que summary, scope, et headers, sont des éléments essentiels pour créer des tableaux structurés et sémantiques dans une page web. En utilisant ces balises et attributs de manière appropriée, vous pouvez organiser et afficher des données tabulaires de manière claire et accessible.

L'utilisation de la balise <table> comme conteneur principal, associée aux balises <tr> pour définir les lignes et aux balises <th> pour les en-têtes, permet de créer une structure cohérente. Les balises <td> sont utilisées pour définir les cellules de données.

Les attributs tels que summary, scope, et headers apportent des informations supplémentaires pour améliorer l'accessibilité et la compréhension du contenu des tableaux.