Table

L'élément table

L'élément table sert à représenter des tableaux.

Un premier exemple

​x
 
1
<!DOCTYPE html>
2
<html lang="fr">
3
4
5
<head>
6
    <meta charset="utf-8">
7
    <title> Table  </title>
8
    <!--  mise en forme du tableau : encadrement des cellules,
9
    encadrement du tableau :  -->
10
    <style>
11
        /* cadre noir autour du tableau: */
12
        table{
13
            border: 2px solid black;
14
            padding: 3px;
15
        }
16
17
        /* cadre bleu autour de chaque cellule: */
18
        td {
19
            border: 1px solid blue;
20
        }
21
    </style>
22
</head>
23
​
24
​
25
<body>
26
    <table>
27
    <tr> <td> Elément 1.1 </td> <td> Elément 1.2 </td><td> Elément 1.3 </td> </tr>
28
     <tr> <td> Elément 2.1 </td> <td> Elément 2.2 </td><td> Elément 2.3 </td> </tr>
29
    </table>
30
</body>
31
​
32
33
</html>

Les balises essentielles apparaissent ici :

  • les balises <table> </table> encadrent l'ensemble du tableau.
  • les balises <tr> </tr> (table row) définissent une ligne du tableau.
  • les balises <td> </td> (table data) définissent une cellule du tableau.

Remarque : par défaut, il n' y a pas de mise en forme des tableaux (la seule mise en forme par défaut consiste en un alignement des colonnes et un retour à la ligne à chaque nouvelle ligne).

Modifier, effacer... la ligne <style> </style> dans l'exemple ci-dessus pour voir les effets.

Un second exemple

On peut également séparer le tableau en une partie entête et une partie corps du tableau.

  • les balises <thead> </thead> encadrent l'entête.
  • les balises <th> </th> définissent une cellule d'entête du tableau.
  • les balises <tbody> </tbody> encadrent le corps du tableau.
37
 
1
<!DOCTYPE html>
2
<html lang="fr">
3
4
​
5
<head>
6
    <meta charset="utf-8">
7
    <title> Films  </title>
8
9
    <style>
10
        /*  encadrement des cellules */
11
        th,td {border: 1px solid black;}
12
13
        /* fond rouge pour une cellule d'entête */
14
        th{ background-color : red; }
15
    </style>
16
</head>
17
​
18
​
19
<body>
20
​
21
    <table> <!-- début du tableau -->
22
23
    <thead> <!-- début de l'entête -->
24
    <tr> <th> Titre de film </th> <th> Un acteur </th>  </tr>
25
    </thead> <!-- fin de l'entête -->
26
27
    <tbody> <!-- début de la partie corps -->
28
     <tr> <td> Terminator </td> <td> Arnold Schwarzenegger </td>  </tr>
29
     <tr> <td> Star Wars </td> <td> Harrison Ford </td> </tr>
30
    </tbody> <!-- fin de la partie corps -->
31
32
    </table> <!-- fin du tableau -->
33
34
</body>
35
36
37
</html>

Dans l'exemple ci-dessus, vous pouvez constater :

  • qu'en général les navigateurs centrent par défaut le texte dans une cellule d'entête, mais pas dans une cellule de données.
  • que la largeur d'une colonne s'adapte par défaut au plus long contenu d'une cellule de la colonne.

Troisième exemple

On peut également ajouter une balise de légende pour le tableau (balises <caption> </caption> ) ainsi qu'une balise de pied du tableau (balises <tfoot> </tfoot> ).

Attention, la balise de pied doit être écrite dans le code entre le thead et le tbody, bien que ce pied s'affiche en bas du tableau par défaut.

51
 
1
<!DOCTYPE html>
2
<html lang="fr">
3
4
<head>
5
    <meta charset="utf-8">
6
    <title> EDT  </title>
7
8
    <style>
9
        /*  encadrement des cellules */
10
        th,td {border: 1px solid black;}
11
12
        /* fond vert pour une cellule d'entête */
13
        th{ background-color : green; }
14
15
        /* fond gris pour les cellules de pied et texte centré*/
16
        tfoot td {
17
            background-color : rgb(230,230,230);
18
            text-align : center;
19
        }
20
    </style>
21
</head>
22
​
23
​
24
<body>
25
​
26
    <table>
27
28
    <caption>
29
    Emploi du temps
30
    </caption>
31
32
    <thead>
33
    <tr> <th> lundi </th> <th> mardi </th>  </tr>
34
    </thead>
35
36
    <tfoot>
37
    <tr> <td>4 heures</td>   <td>3 heures </td> </tr>
38
    </tfoot>
39
40
    <tbody>
41
     <tr> <td> Maths </td> <td> Sciences Physiques </td>  </tr>
42
     <tr> <td> Informatique </td> <td> Anglais </td> </tr>
43
     <tr> <td> Informatique </td> <td> SVT </td> </tr>
44
     <tr> <td> Français </td> <td>   </td> </tr>
45
    </tbody>
46
47
    </table>
48
49
</body>
50
51
</html>

Regroupement de cellules

On peut regrouper des cellules, c'est à dire faire en sorte qu'une cellule occupe plusieurs lignes ou plusieurs colonnes avec les attributs rowspan et colspan. Ces attributs sont des attributs des éléments td ou des éléments th (éléments cellule).

Cellules s'étendant sur plusieurs colonnes.

38
 
1
<!DOCTYPE html>
2
<html lang="fr">
3
4
5
<head>
6
    <meta charset="utf-8">
7
    <title>  regroupement de cellules </title>
8
    <style>
9
        table{ border : 2px solid black;}
10
        th, td{ border : 1px solid green; padding : 5px; }
11
    </style>
12
</head>
13
​
14
​
15
<body>
16
​
17
    <table>
18
19
    <thead>
20
    <tr> <!-- début de la première ligne du tableau -->
21
        <th colspan="3"> Disciplines scientifiques </th>
22
        <th colspan="2"> Disciplines littéraires</th>
23
    </tr> <!-- fin de la première ligne du tableau -->
24
    </thead>
25
26
    <tbody>
27
    <tr>  <!-- début de la seconde ligne du tableau -->
28
    <td> Mathématiques </td> <td> Sciences-Physiques </td> <td> Sciences de l'ingénieur </td>
29
    <td> Lettres </td> <td> Allemand </td>
30
    </tr> <!-- fin de la seconde ligne du tableau -->
31
    </tbody>
32
33
    </table>
34
35
</body>
36
37
38
</html>

Cellules s'étendant sur plusieurs lignes

51
 
1
<!DOCTYPE html>
2
<html lang="fr">
3
4
5
<head>
6
    <meta charset="utf-8">
7
    <title>  regroupement de cellules </title>
8
    <style>
9
        table{ border : 2px solid black;}
10
        th, td{ border : 1px solid green; padding : 5px; }
11
    </style>
12
</head>
13
​
14
​
15
<body>
16
​
17
    <table>
18
19
    <thead>
20
    <tr>
21
        <th>Catégorie</th><th> Titre de film </th>
22
    </tr>
23
    </thead>
24
25
    <tbody>
26
27
    <tr>
28
        <td rowspan="3"> comique </td> <td> Le dîner de cons </td>
29
    </tr>
30
    <tr>
31
        <td> Bienvenue chez les Ch'tis</td>
32
    </tr>
33
    <tr>
34
        <td> Les Visiteurs  </td>
35
    </tr>
36
37
    <tr>
38
        <td rowspan="2"> SF </td> <td> Total Recall </td>
39
    </tr>
40
    <tr>
41
        <td>Bienvenue à Gattaca</td>
42
    </tr>
43
44
    </tbody>
45
46
    </table>
47
48
</body>
49
​
50
​
51
</html>