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.

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 ?

<table>

<tr>

<td>

<th>

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

<table>

<tr>

<td>

<th>

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

<table>

<tr>

<td>

<th>

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

<table>

<tr>

<td>

<th>

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

Il permet de fusionner des cellules horizontalement

Il permet de fusionner des cellules verticalement

Il permet de définir la largeur d'une cellule

Il permet de définir la hauteur d'une cellule

Il permet de colorer une cellule

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

Il permet de fusionner des cellules horizontalement

Il permet de fusionner des cellules verticalement

Il permet de définir la largeur d'une cellule

Il permet de définir la hauteur d'une cellule

Il permet de colorer une cellule

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

Quand vous voulez fusionner des cellules sur la même ligne

Quand vous voulez fusionner des cellules sur la même colonne

Quand vous voulez définir la largeur d'une cellule

Quand vous voulez définir la hauteur d'une cellule

Quand vous voulez colorer une cellule

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.

Dans votre répertoire "Documents" créez le répertoire tp_edt
Dans le répertoire tp_edt, créez les fichiers index.html et style.css.
Ajouter le titre "Emploi du temps - SIO1 (Semestre 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>

Ajouter 17 lignes, avec les heures 08h05, 09h00, 09h55, 10h10, 10h50, 11h05, 11h45, 12h00, 12h55, 13h10, 14h05, 14h30, 15h00, 15h10, 16h05, 17h00, 17h55

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;
}

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;
}

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

Une solution

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

Dans le répertoire tp_edt, créez un nouveau fichier index.html qui utilise le fichier CSS style.css.

Dans le fichier index.html :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css" />
</head>
<body>

</body>
</html>

Dans le fichier style.css :

html {
    font-size: 14px;
}

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

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>

</body>
</html>

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>

Ajouter 17 lignes, avec les heures 08h05, 09h00, 09h55, 10h10, 10h50, 11h05, 11h45, 12h00, 12h55, 13h10, 14h05, 14h30, 15h00, 15h10, 16h05, 17h00, 17h55

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>
        <tr>
            <th class="time min55">08h05</th>
        </tr>
        <tr>
            <th class="time min55">09h00</th>
        </tr>

        ...

    </table>
        
</body>
</html>

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;
}

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;
}

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>
...

Notions théoriques​

Les balises à connaître​

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​

Notions théoriques

Les balises à connaître

Test de mémorisation/compréhension

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