Les tableaux HTML

Les tableaux HTML sont un élément important de la structure d'une page web qui permet de présenter des données sous une forme claire, en grille, composée de lignes et de colonnes. Si tu as du mal à distinguer ce qui est une ligne de ce qui est une colonne - souviens-toi que les lignes sont horizontales et les colonnes verticales !

Disons que nous voulons créer un simple tableau présentant des données de personnes :

Le code HTML des seules lignes de données pourrait ressembler à ceci (nous ajouterons la ligne d'en-tête dans un instant) :

1<table>
2  <tr>
3    <td>Jean</td>
4    <td>Dupont</td>
5  </tr>
6  <tr>
7    <td>Marie</td>
8    <td>Dupont</td>
9  </tr>
10</table>

Décomposons ce code en parties pour mieux comprendre ce que fait chaque élément :

<table> : Cette balise ouvre le tableau. Tout ce qui se trouve entre la balise d'ouverture <table> et la balise de fermeture </table> est considéré comme faisant partie du tableau.

<tr> : Ligne de tableau. Nous ouvrons chaque ligne avec la balise <tr> et la fermons avec </tr>. Les lignes créent les lignes horizontales de notre tableau.

<td> : Cellule de tableau. À l'intérieur de chaque ligne, les cellules sont définies à l'aide de la balise <td> (de « table data »). C'est là que nous plaçons les données spécifiques que nous voulons présenter dans le tableau.

Dans l'exemple ci-dessus, nous avons créé un tableau de deux lignes, chacune contenant deux cellules.

Sections de tableau

Le HTML permet aussi de diviser le tableau en sections, telles que l'en-tête (<thead>), le corps (<tbody>) et le pied (<tfoot>). Cette structure peut être utile lorsqu'on traite de plus grandes quantités de données.

Ajouter des en-têtes de tableau

Souvent, nous voulons que la première ligne du tableau ait des en-têtes décrivant le contenu des colonnes. À cette fin, nous utilisons la balise <th> au lieu de <td>.

1<table>
2<tr>
3  <th>Pyramide</th>
4  <th>Hauteur (m)</th>
5</tr>
6<!-- Lignes restantes -->
7</table>

Ajouter des bordures et des espacements

Tu peux ajouter des bordures et des espacements avec les attributs border et cellspacing, mais la spécification HTML les considère comme obsolètes. Les navigateurs les comprennent encore, mais aujourd'hui les bordures et les espacements se règlent en CSS, comme le montre l'étape 4.

1<table border="1" cellspacing="0">
2  <!-- Lignes et cellules -->
3</table>

1<table border="1">
2<thead>
3<tr>
4<th colspan="3">Pyramides de Gizeh</th>
5</tr>
6<tr>
7<th>Pyramide</th>
8<th>Pharaon</th>
9<th>Hauteur d'origine (m)</th>
10</tr>
11</thead>
12<tbody>
13<tr>
14<td>Grande Pyramide</td>
15<td>Khéops</td>
16<td>146,6</td>
17</tr>
18<tr>
19<td>Pyramide de Khéphren</td>
20<td>Khéphren</td>
21<td>143,5</td>
22</tr>
23<tr>
24<td>Pyramide de Mykérinos</td>
25<td>Mykérinos</td>
26<td>65,5</td>
27</tr>
28</tbody>
29<tfoot>
30<tr>
31<td colspan="2">Pyramide la plus haute</td>
32<td>146,6</td>
33</tr>
34</tfoot>
35</table>

Tableaux et CSS

En pratique, le CSS est souvent utilisé conjointement avec le HTML pour donner aux tableaux une apparence plus attrayante et les rendre plus lisibles. La connaissance du CSS sera donc essentielle lorsque nous voudrons créer des tableaux vraiment impressionnants. Mais nous en parlerons dans les prochains chapitres !

Souviens-toi, les tableaux ne sont qu'un des nombreux éléments qui aident à présenter des données sur une page web. Il est bon d'apprendre à les utiliser efficacement !

Exercice : Créer des tableaux HTML

Dans cet exercice, tu vas apprendre à créer des tableaux HTML qui permettent de présenter des données sous une forme claire, en grille, composée de lignes et de colonnes. Ta tâche sera de créer une page web contenant un tableau avec des données de ton choix.

Étape 1 : Crée la structure de base d'un document HTML

D'abord, crée un nouveau fichier HTML et ajoute la structure de base d'un document HTML.

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Tableau HTML</title>
7</head>
8<body>
9    <main>
10        <!-- Place ton tableau ici -->
11    </main>
12</body>
13</html>

Étape 2 : Ajoute un tableau HTML

Maintenant, ajoute un tableau à l'intérieur de l'élément <main>. Commence par définir le tableau et la première ligne avec les en-têtes de colonnes.

1<table border="1" cellspacing="0">
2    <thead>
3        <tr>
4            <th>Prénom</th>
5            <th>Nom de famille</th>
6        </tr>
7    </thead>
8    <tbody>
9        <tr>
10            <td>Jean</td>
11            <td>Dupont</td>
12        </tr>
13        <tr>
14            <td>Marie</td>
15            <td>Dupont</td>
16        </tr>
17    </tbody>
18</table>

Étape 3 : Ajoute des lignes de données supplémentaires

Enrichis le tableau avec des lignes supplémentaires pour présenter plus de données.

1<tbody>
2    <tr>
3        <td>Jean</td>
4        <td>Dupont</td>
5    </tr>
6    <tr>
7        <td>Marie</td>
8        <td>Dupont</td>
9    </tr>
10    <tr>
11        <td>Sophie</td>
12        <td>Martin</td>
13    </tr>
14    <tr>
15        <td>Pierre</td>
16        <td>Bernard</td>
17    </tr>
18</tbody>

Étape 4 : Ajoute une mise en forme CSS

Maintenant, ajoute des styles CSS pour améliorer l'apparence du tableau. Tu peux ajouter une feuille de style interne dans la section <head>.

1<head>
2    <style>
3        table {
4            width: 100%;
5            border-collapse: collapse;
6        }
7        th, td {
8            padding: 8px;
9            text-align: left;
10            border: 1px solid #ddd;
11        }
12        th {
13            background-color: #f2f2f2;
14        }
15    </style>
16</head>

Résultat

Après avoir terminé toutes les étapes, ton fichier HTML devrait ressembler à ceci :

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Tableau HTML</title>
7    <style>
8        table {
9            width: 100%;
10            border-collapse: collapse;
11        }
12        th, td {
13            padding: 8px;
14            text-align: left;
15            border: 1px solid #ddd;
16        }
17        th {
18            background-color: #f2f2f2;
19        }
20    </style>
21</head>
22<body>
23    <main>
24        <table border="1" cellspacing="0">
25            <thead>
26                <tr>
27                    <th>Prénom</th>
28                    <th>Nom de famille</th>
29                </tr>
30            </thead>
31            <tbody>
32                <tr>
33                    <td>Jean</td>
34                    <td>Dupont</td>
35                </tr>
36                <tr>
37                    <td>Marie</td>
38                    <td>Dupont</td>
39                </tr>
40                <tr>
41                    <td>Sophie</td>
42                    <td>Martin</td>
43                </tr>
44                <tr>
45                    <td>Pierre</td>
46                    <td>Bernard</td>
47                </tr>
48            </tbody>
49        </table>
50    </main>
51</body>
52</html>

Maintenant, tu as une page web complète avec un tableau présentant des données. Continue à expérimenter en ajoutant plus de lignes, de colonnes, ou en changeant les styles avec le CSS pour améliorer l'apparence du tableau.