# Créer un tableau HTML avec la balise table

Tableau HTML

En HTML la balise <table> permet de créer des tableaux.

<table>
    <tr>
        <th>En-tête 1</th>
        <th>En-tête 2</th>
        <th>En-tête 3</th>
    </tr>
    <tr>
        <td>Ligne 1, Cellule 1</td>
        <td>Ligne 1, Cellule 2</td>
        <td>Ligne 1, Cellule 3</td>
    </tr>
    <tr>
        <td>Ligne 2, Cellule 1</td>
        <td>Ligne 2, Cellule 2</td>
        <td>Ligne 2, Cellule 3</td>
    </tr>
</table>

Cette balise table est enrichie de plusieurs autres balises tr, td, th qui permettent de délimiter les lignes et les colonnes du tableau.

tr

La balise <tr> (table row) délimite une ligne du tableau.

<table>
    <tr>
        <th>Marque</th>
        <th>Prix</th>
    </tr>
    <tr>
        <td>Apple</td>
        <td>1000€</td>
    </tr>
    <tr>
        <td>Samsung</td>
        <td>800€</td>
    </tr>
    <tr>
        <td>Xiaomi</td>
        <td>500€</td>
   </tr>
</table>

Ici nous avons 3 lignes <tr>.

th

La balise <th> (table header) insérée au sein d’une balise <tr> permet de délimiter les colonnes, tout comme <td> qu’on verra juste après. A la différence que th s’applique à la première ligne du tableau et sert à délimiter les titres. Dans l’exemple ci-dessous th est utilisé pour séparer les deux colonnes “Marque” et “prix”.

<table>
    <tr>
        <th>Marque</th>
        <th>Prix</th>
    </tr>
    <tr>
        <td>Apple</td>
        <td>1000€</td>
    </tr>
    <tr>
        <td>Samsung</td>
        <td>800€</td>
    </tr>
</table>

td

La balise <td> (table data) insérée au sein d’une balise <tr> délimite les colonnes du tableau sur toutes les lignes autres que la première ligne des titres. Dans l’exemple ci-dessous <td> sépare chaque valeur.

<table>
    <tr>
        <th>Marque</th>
        <th>Prix</th>
    </tr>
    <tr>
        <td>Apple</td>
        <td>1000€</td>
    </tr>
    <tr>
        <td>Samsung</td>
        <td>800€</td>
    </tr>
</table>