CHAPITRE 9 : LES TABLEAUX : PARTIE 2

Video du chapitre : chaine GeniusClassrooms

Aller plus loin

Le chapitre précédent a posé les bases. Voyons maintenant comment fusionner des cellules et structurer un tableau en sections : deux notions attendues en examen.

1. Fusionner horizontalement : colspan

colspan="2" étend une cellule sur 2 colonnes.

<table>
    <tr>
        <th colspan="2">Coordonnees</th>
    </tr>
    <tr>
        <td>Telephone</td>
        <td>652 02 71 93</td>
    </tr>
</table>

La première ligne ne contient qu'une cellule, qui occupe la largeur de deux. Règle d'or : une cellule avec colspan="2" compte pour deux, retirez donc une <td> de cette ligne.

2. Fusionner verticalement : rowspan

<table>
    <tr>
        <th rowspan="2">Lundi</th>
        <td>08h - 10h</td>
        <td>Algorithmique</td>
    </tr>
    <tr>
        <td>10h - 12h</td>
        <td>Base de donnees</td>
    </tr>
</table>

La cellule « Lundi » descend sur deux lignes. La deuxième ligne n'a que 2 cellules : la place de la première est déjà occupée. C'est ce qui déroute le plus au début : dessinez le tableau sur papier avant de l'écrire.

3. Structurer : thead, tbody, tfoot

<table>
    <caption>Depenses du mois</caption>
    <thead>
        <tr>
            <th scope="col">Poste</th>
            <th scope="col">Montant</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Transport</td>
            <td>15 000 FCFA</td>
        </tr>
        <tr>
            <td>Connexion</td>
            <td>10 000 FCFA</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th scope="row">Total</th>
            <td>25 000 FCFA</td>
        </tr>
    </tfoot>
</table>

Ces balises sont facultatives mais recommandées : à l'impression d'un long tableau, le navigateur peut répéter le <thead> sur chaque page.

4. Méthode de vérification

Pour contrôler un tableau fusionné, comptez les cellules ligne par ligne, en comptant chaque colspan="n" pour n. Le total doit être identique partout.

Ligne 1 : th colspan="3"            -> 3
Ligne 2 : td + td + td              -> 3
Ligne 3 : th rowspan="2" + td + td  -> 3
Ligne 4 : td + td                   -> 2 + 1 occupee = 3  OK

À retenir

• colspan fusionne en largeur, rowspan en hauteur
• Une cellule fusionnée occupe la place de plusieurs : retirez les cellules correspondantes
• thead, tbody et tfoot structurent le tableau
• En cas de doute, dessinez d'abord sur papier