HTML : LES TABLEAUX

Utilisation des tableaux en HTML

Il y’a quelques années, à l’époque où le CSS n’en était qu’au stade d’embryons, les tableaux étaient utilisés pour la mise en page complète d’une page HTML. Cette fâcheuse pratique a duré pas mal de temps, même après l’apparition du CSS. Aujourd’hui, les tableaux sont reconnus pour leurs justes valeurs : présenter une collection de données structurées pour le visiteur, cela peut être des tarifs, des listes de populations, et beaucoups d’autres choses, du moment que ça reste des données.  

Comment définir un tableau

Un tableau se définit par une balise nommée <table> de cette manière : 

<table> (contenu de mon tableau) </table>

Définir des lignes et colonnes.

La balise <tr> est utilisée pour créer des lignes tandis que la balise <td> est utilisée pour créer des « colonnes » ou plutôt des cellules vous comprendrez pourquoi avec cet exemple : 

<table>
    <tr>
        <td> cellule ligne1 colonne 1 </td>
        <td> cellule ligne2 colonne 2 </td>
        <td> cellule ligne3 colonne 3 </td>
    </tr>    
    <tr>
        <td> cellule ligne1 colonne 1 </td>
        <td> cellule ligne2 colonne 2 </td>
        <td> cellule ligne3 colonne 3 </td>
    </tr>
</table>

Dans cet exemple, on à créé deux lignes (tr) et on a « simulé » 3 colonnes par l’ajout de cellules (td) en position horizontale identique sur chaque ligne. Attention, nous devons obtenir le même nombre de cellules par ligne pour ne pas casser l’affichage du tableau.

Fusion des cellules en colonne

Pour fusionner une cellule sur deux colonnes, il faut indiquer à la cellule concernée qu’elle représentera l’espace de deux cellules. En conséquence, il est logique de supprimer la cellule suivante sous peine d’obtenir 4 cellules sur notre première ligne et 3 sur la ligne suivante.

<table>
    <tr>
        <td> cellule ligne1 colonne 1 </td>
        <td colspan=2> cellule ligne1 colonne 2 et 3 </td>
    </tr>    
    <tr>
        <td> cellule ligne1 colonne 1 </td>
        <td> cellule ligne2 colonne 2 </td>
        <td> cellules ligne3 colonne 3 </td>
    </tr>
</table>

Fusion des cellules en ligne

Même principe pour la fusion des cellules en ligne sauf qu’il faut penser à supprimer la cellule de la ligne suivante.

<table>
    <tr>
        <td> cellule ligne1 colonne 1 </td>
        <td rowspan=2 > cellule ligne1 et 2 colonnes 2</td>
        <td> cellule ligne3 colonne 3 </td>
    </tr>    
    <tr>
        <td> cellule ligne1 colonne 1 </td>
        <td> cellule ligne3 colonne 3 </td>
    </tr>
</table>

On peut s’amuser comme ça à fusionner des cellules sur plusieurs colonnes et lignes et même produire des résultats amusants, mais je pense que vous imaginez déjà le casse-tête que cela peut produire.