Introduction

Parfois, on a besoin de mettre des informations sous forme de colonnes et de rangées. Cela s'appelle un tableau et c'est facile à faire en HTML. 
Une chose à savoir : À l'intersection d'une ligne (rangée) et d'une colonne, nous avons des cases, et ces cases sont appelées des cellules.

On peut mettre du texte dans un tableau, mais aussi des liens, des images et même d'autres tableaux. Par contre, il ne faut pas les utiliser pour mettre en forme votre page web, ce n'est pas fait pour cela. C'était peut-être une chose pratique au début de la création du HTML, mais maintenant, avec le HTML 5, il est bien plus pratique d'utiliser le CSS 3.

 Mise en forme

 La forme générale

Un tableau se place dans la balise « <table> ». Nous allons délimiter les rangées grâce à la balise « <tr> », et les cellules seront entourées par la balise « <td> ».

Par exemple, nous pouvons avoir : 

<table>
   <tr>
       <td>La première cellule de la ligne 1</td>
      <td>Deuxième cellule de la ligne 1</td>
      <td>Troisième cellule de la ligne 1</td>
      <td>Quatrième cellule de la ligne 1</td>
    </tr>
</table>

Dans ce cas de figure, nous obtenons un tableau avec une seule rangée. 
Pour en obtenir plusieurs, il suffit de multiplier le code contenu dans « <table> » : 

<table> 
     <tr>
       <td>La première cellule de la ligne 1</td>  
        <td>Deuxième cellule de la ligne 1</td>  
        <td>Troisième cellule de la ligne 1</td>  
        <td>Quatrième cellule de la ligne 1</td>  
    </tr>  
    <tr> 
        <td>La première cellule de la ligne 2</td>  
        <td>Deuxième cellule de la ligne 2</td>  
        <td>Troisième cellule de la ligne 2</td>  
        <td>Quatrième cellule de la ligne 2</td>  
    </tr>  
    <tr>
        <td>La première cellule de la ligne 3</td>  
        <td>Deuxième cellule de la ligne 3</td>  
        <td>Troisième cellule de la ligne 3</td>  
        <td>Quatrième cellule de la ligne 3</td>  
    </tr>  
    <tr> 
        <td>La première cellule de la ligne 4</td>  
        <td>Deuxième cellule de la ligne 4</td>  
        <td>Troisième cellule de la ligne 4</td>  
        <td>Quatrième cellule de la ligne 4</td>  
    </tr>  
</table>

Les en-têtes 

Vu que nous savons mettre des rangées à notre tableau, on peut vouloir indiquer à l'utilisateur ce que signifient ces données. Nous allons donc mettre des en-têtes grâce à la balise « <th> » .

<table>  
    <tr>  
        <th></th>  
        <th>Titre de la colonne 1</th>  
        <th>Titre de la colonne 2</th>  
        <th>Titre de la colonne 3</th>  
        <th>Titre de la colonne 4</th>  
    </tr>  
    <tr>
        <th>Titre de la ligne 1</th>  
        <td>La première cellule de la ligne 1</td>  
        <td>Deuxième cellule de la ligne 1</td>  
        <td>Troisième cellule de la ligne 1</td>  
        <td>Quatrième cellule de la ligne 1</td>  
    </tr>  
    <tr>
        <th>Titre de la ligne 2</th>  
        <td>La première cellule de la ligne 2</td>  
        <td>Deuxième cellule de la ligne 2</td>  
        <td>Troisième cellule de la ligne 2</td>  
        <td>Quatrième cellule de la ligne 2</td>  
    </tr>  
    <tr>
        <th>Titre de la ligne 3</th>  
        <td>La première cellule de la ligne 3</td>  
        <td>Deuxième cellule de la ligne 3</td>  
        <td>Troisième cellule de la ligne 3</td>  
        <td>Quatrième cellule de la ligne 3</td>  
    </tr>  
    <tr>
        <th>Titre de la ligne 4</th>  
        <td>La première cellule de la ligne 4</td>  
        <td>Deuxième cellule de la ligne 4</td>  
        <td>Troisième cellule de la ligne 4</td>  
        <td>Quatrième cellule de la ligne 4</td>  
    </tr>  
</table>

Vous remarquerez que vos entêtes de lignes et de colonnes sont à présent en gras et ils sont centrés sans que vous ayez à mettre du CSS. Cette balise contient donc du style.

Textes sur plusieurs lignes ou colonnes

Bon, c'est bien, nous savons maintenant réaliser un tableau. Et si nous voulions mettre un texte sur plusieurs colonnes… C'est tout à fait possible et on va utiliser pour cela un attribut de la balise « <th> »  : « rowspan ». Si nous voulons le mettre sur plusieurs lignes, alors nous utiliserions « colspan ». 
Admettons que l'on veuille mettre du texte sur deux lignes, cela va donner  « <th rowspan="2"> ».

Passons au code complet : 

<table>  
    <tr>  
        <th></th>  
        <th>Titre de la colonne 1</th>  
        <th colspan="3">Titre de la colonne 2 - 3 - 4</th>  
    </tr>  
    <tr>
        <th>Titre de la ligne 1</th>  
        <td>La première cellule de la ligne 1</td>  
        <td>Deuxième cellule de la ligne 1</td>  
        <td>Troisième cellule de la ligne 1</td>  
        <td>Quatrième cellule de la ligne 1</td>  
    </tr>  
    <tr>
        <th>Titre de la ligne 2 et 3</th>  
        <td>La première cellule de la ligne 2</td>  
        <td rowspan="2">Deuxième cellule de la ligne 2 et 3</td>  
        <td>Quatrième cellule de la ligne 2</td>  
    </tr>  
    <tr>
        <th rowspan="2">Titre de la ligne 3 et 4</th>  
        <td>La première cellule de la ligne 3</td>  
        <td>Troisième cellule de la ligne 3</td>  
        <td>Quatrième cellule de la ligne 3</td>  
    </tr>  
    <tr>
        <td>La première cellule de la ligne 4</td>  
        <td>Deuxième cellule de la ligne 4</td>  
        <td>Troisième cellule de la ligne 4</td>  
        <td>Quatrième cellule de la ligne 4</td>  
    </tr>  
</table>

Titre et légende

On peut tout à fait mettre un titre à un tableau grâce à la balise « <caption> ». D'ailleurs, selon le positionnement en CSS, ce titre peut très bien servir de légende s'il est placé après le tableau. Que cela soit pour un tableau ou pour un titre, il doit obligatoirement se placer après la balise « <table> ».

<table>  
    <caption>  
        Voici mon tableau  
    </caption>

En-tête, corps et pied de page

Plus haut dans cet article, nous avons réalisé un en-tête. Pour une question de sémantique, et pour réaliser un meilleur CSS, nous allons indiquer aux explorateurs internet et à divers robots (bots), où se trouve l'en-tête, les données de notre tableau et s'il y en a un, le pied de notre tableau.

Pour l'entête, on placera la balise « <thead> » juste après « <caption> ».
Pour le corps du tableau, on va utiliser la balise  « <tbody> ».
Et pour le pied de tableau, on va utiliser « <tfoot> ».

Et cela va donner  : 

<table>  
    <caption>  
        Voici mon tableau  
    </caption>  
    <thead>
        <tr>  
            <th></th>  
            <th>Titre de la colonne 1</th>  
            <th colspan="3">Titre de la colonne 2 - 3 - 4</th>  
        </tr>  
    </thead>  
    <tbody>
        <tr>  
            <th>Titre de la ligne 1</th>  
            <td>La première cellule de la ligne 1</td>  
            <td>Deuxième cellule de la ligne 1</td>  
            <td>Troisième cellule de la ligne 1</td>  
            <td>Quatrième cellule de la ligne 1</td>  
        </tr>  
        <tr>
            <th>Titre de la ligne 2 et 3</th>  
            <td>La première cellule de la ligne 2</td>  
            <td rowspan="2">Deuxième cellule de la ligne 2 et 3</td>  
            <td>Quatrième cellule de la ligne 2</td>  
        </tr>  
        <tr>
            <th rowspan="2">Titre de la ligne 3 et 4</th>  
            <td>La première cellule de la ligne 3</td>  
            <td>Troisième cellule de la ligne 3</td>  
            <td>Quatrième cellule de la ligne 3</td>  
        </tr>  
    </tbody>  
    <tfoot> 
       <tr>  
            <th></th>  
            <td>La première cellule du pied de page</td>  
            <td>Deuxième cellule du pied de page</td>  
            <td>Troisième cellule du pied de page</td>  
            <td>Quatrième cellule du pied de page</td>  
        </tr>  
    </tfoot>  
</table>

Comme vous pouvez le constater, cela ne change pas grand-chose visuellement. Il faudra ajouter du CSS pour vraiment voir la différence.

En conclusion

Un tableau réalisé uniquement en HTML est fonctionnel, mais pas réellement pratique et sympa visuellement. Il faudra pour cela ajouter du CSS et on verra cela dans un autre article.