Les tableaux HTML

Les tableaux sont un moyen simple et efficace de présenter des données sous forme de liste / colonnes. Il est possible d’avoir un en-tête, un pied-de-tableau, d’effectuer des fusions de cellules, d’avoir une gestion des bordures etc.

Les balises des tableaux

Exemple complet :

<table>
    <caption>Titre du tableau</caption>
    <thead>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Val 1.1</td>
            <td>Val 1.2</td>
            <td>Val 1.3</td>
        </tr>
        <tr>
            <td>Val 2.1</td>
            <td>Val 2.2</td>
            <td>Val 2.3</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total 1</td>
            <td>Total 2</td>
            <td>Total 3</td>
        </tr>
    </tfoot>
</table>

Il faut savoir qu’il est tout à fait possible d’écrire d’abord le code de l’en-tête, puis le code du pied, puis le contenu du corps. Le navigateur qui se charge d’afficher chacune des trois sections dans le bon ordre.

Fusion de cellules

Pour fusionner deux cellules horizontalement (fusion de colonnes donc), on utilise l’attribut colspan sur la 1ère cellule et on lui indique le nombre de cellules / colonne qu’elle doit occuper.

Pour fusionner deux cellules verticalement (fusion de lignes donc), on utilise l’attribut rowspan sur la 1ère cellule et on lui indique le nombre de cellules / lignes qu’elle doit occuper.

La fusion de cellules s’effectue aussi bien dans le corps d’un tableau que dans son en-tête et son pied. Une même cellule peut à la fois fusionner des lignes et des colonnes. Elle possède alors les deux attributs colspan et rowspan.

Mise en forme

Espacement entre les bordures

Par défaut, il y a un espace entre chaque cellule de chaque ligne / colonne et les bordures sont donc doublées. C’est parce que par défaut les tableaux ont la propriété CSS border-collapse sur la valeur separate. Pour ne pas avoir ce comportement, il faut changer la valeur de cette propriété pour indiquer la valeur collapse.

Positionnement du titre de la légende

Le titre est par défaut positionné en haut mais il peut être affiché en bas à l’aide de la propriété CSS caption-side qui peut prendre les valeurs top et bottom.

Mise en forme différente pour un groupe de colonnes

Dans l’exemple ci-dessous, la première colonne sera sur fond blanc, les colonnes 2 et 3 sur fond bleu puis les colonnes 4 et 5 sur fond orange.

<table>
    <caption>Superheros and sidekicks</caption>
    <colgroup>
        <col>
        <col span="2" class="batman">
        <col span="2" class="flash">
    </colgroup>
    <tr>
        <th> </th>
        <th scope="col">Batman</th>
        <th scope="col">Robin</th>
        <th scope="col">The Flash</th>
        <th scope="col">Kid Flash</th>
    </tr>
    <tr>
        <td scope="row">Skill</td>
        <td>Smarts</td>
        <td>Dex, acrobat</td>
        <td>Super speed</td>
        <td>Super speed</td>
    </tr>
</table>

.batman {
    background-color: #d7d9f2;
}
 
.flash {
    background-color: #ffe8d4;
}
 
caption {
    padding: 8px;
    caption-side: bottom;
}
 
table {
    border-collapse: collapse;
    border: 2px solid rgb(100, 100, 100);
}
 
td, th {
    border: 1px solid rgb(100, 100, 100);
    padding: 10px 10px;
}