Aller au contenu principal

Les tableaux

Notions théoriques​

Les tableaux HTML sont définis avec la balise <table>.

A l'intérieur de la balise <table> il suffit de placer les balises <tr>, <td> ou <th>:

  • Chaque ligne est définie avec la balise <tr> (table row).
  • Chaque cellule d'un tableau est définie avec la balise <td> (table data).
  • Les en-têtes de tableau sont définis avec la balise <th> (table header).

Parfois, vous voudrez peut-être fusionner des cellules horizontalement ou verticalement. Pour cela, vous pouvez utiliser les attributs colspan et rowspan:

  • L'attribut rowspan permet à une cellule de s'étendre sur plusieurs lignes.
  • L'attribut colspan permet à une cellule de s'étendre sur plusieurs colonnes.
    <table border="1">
        <tr>
            <th></th>
            <th>Lundi</th>
            <th>Mardi</th>
            <th>Mercredi</th>
            <th>Jeudi</th>
            <th>Vendredi</th>
        </tr>
        <tr>
            <td rowspan="2">8h-10h</td>
            <td>Mathématiques</td>
            <td>Français</td>
            <td>Anglais</td>
            <td rowspan="2">Mathématiques</td>
            <td>Histoire</td>
        </tr>
        <tr>
            <td>Physique</td>
            <td>Anglais</td>
            <td>Français</td>
            <td>Anglais</td>
        </tr>
    </table>

Dans cet exemple, la cellule "Mathématiques" s'étend sur deux lignes.

Bonne pratique - th vs td

Utilisez <th> pour les en-tetes (gras, centre par defaut) et <td> pour les donnees — c'est important pour l'accessibilite des tableaux.

Bonne pratique - rowspan et colspan

Quand vous utilisez rowspan ou colspan, supprimez les cellules correspondantes dans les lignes/colonnes suivantes — sinon le tableau sera decale.

Les balises à connaître​

  • <table> : Crée un tableau.
  • <tr> : Définit une ligne de tableau.
  • <td> : Définit une cellule de tableau.
  • <th> : Définit un en-tête de tableau.

Test de mémorisation/compréhension​


Quelle balise est utilisée pour créer un tableau ?


Quelle balise est utilisée pour définir une ligne de tableau ?


Quelle balise est utilisée pour définir une cellule de tableau ?


Quelle balise est utilisée pour définir un en-tête de tableau ?


Quelle est la fonction de l'attribut rowspan en HTML ?


Quelle est la fonction de l'attribut colspan en HTML ?


Dans quel cas utiliseriez-vous l'attribut rowspan plutôt que colspan ?


Quelle serait la valeur de rowspan si vous voulez fusionner trois cellules verticalement ?


Si vous avez une cellule avec l'attribut colspan="2", combien de cellules horizontales seront fusionnées ?


TP pour réfléchir et résoudre des problèmes​

Votre défi sera de créer un tableau pour afficher votre emploi du temps.

Utilisez un tableau pour placer les heures de cours.

  1. Dans votre répertoire "Documents" créez le répertoire tp_edt

  2. Dans le répertoire tp_edt, créez les fichiers index.html et style.css.

  3. Ajouter le titre "Emploi du temps - SIO1 (Semestre 1)"

Bonne pratique - Titre de page

Utilisez un seul <h1> par page pour indiquer le sujet principal — les moteurs de recherche et les lecteurs d'ecran s'appuient dessus.

  1. Ajouter un tableau, avec une 1ère ligne qui affiche les jours de la semaine

    Dans le fichier index.html :

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>Emploi du temps</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <h1>Emploi du temps - SIO1 (Semestre 1)</h1>

        <table>
            <tr>
                <th></th>
                <th>Lundi</th>
                <th>Mardi</th>
                <th>Mercredi</th>
                <th>Jeudi</th>
                <th>Vendredi</th>
            </tr>
        </table>
            
    </body>
    </html>
Bonne pratique - En-tetes de tableau

Utilisez <th> pour les en-tetes de colonnes et de lignes — cela ameliore la lisibilite et l'accessibilite du tableau.

  1. Ajouter 17 lignes, avec les heures 08h05, 09h00, 09h55, 10h10, 10h50, 11h05, 11h45, 12h00, 12h55, 13h10, 14h05, 14h30, 15h00, 15h10, 16h05, 17h00, 17h55
Bonne pratique - Classes multiples

Vous pouvez combiner plusieurs classes CSS sur un element (class="time min55") pour appliquer plusieurs styles independants.

  1. Ajouter un nouveau style .time qui remonte l'heure au niveau du haut de la ligne

    Dans le fichier style.css :

    .time {
        vertical-align: top;
        position: relative;
        top: -13px;
        font-weight: lighter;
        text-align: right;
    }
Bonne pratique - Alignement vertical

vertical-align: top est particulierement utile dans les cellules de tableau pour aligner le contenu en haut plutot qu'au centre.

  1. Ajouter les styles .min5, .min10 etc... qui fixent la hauteur de la ligne, selon le nombre de minutes.

    Dans le fichier style.css :

    .min5 {
        height: 5px;
    }
    .min10 {
        height: 10px;
    }
    .min15 {
        height: 15px;
    }
    .min25 {
        height: 25px;
    }
    .min30 {
        height: 30px;
    }
    .min40 {
        height: 40px;
    }
    .min55 {
        height: 55px;
    }
Bonne pratique - Nommage semantique des classes CSS

Nommez vos classes CSS de facon semantique (min55 = 55 minutes) plutot que visuelle (hauteur-grande) — cela facilite la maintenance.

  1. Ajouter des cellules pour les heures de cours avec les attributs rowspan ou colspan pour fusionner plusieurs cellules si besoin.

    Dans le fichier index.html :

        <td rowspan="2">AT. PROFESSIONNALIS. <br/>HOMMET G.</td>
        <td>SUP.DISP.SERV.INF. <br/>BOUQUET L.</td>
        <td rowspan="2">CYBER.SERV.INFORMAT. <br/>ROF P.</td>
    ...
Une solution