Tableau (Table)
Un tableau en HTML représente un ensemble organisé de données. Pour créer un tableau en HTML nous allons utiliser la balise <table> qui signifie tableau en anglais.
​
Voici de quoi a l'air un tableau:
table row (tr)
rangée du tableau
table header(th)
en-tête du tableau
table data (td)
donnée du tableau
Éléments d'un tableau
Un tableau est un ensemble de lignes (tr) et de colonnes. L’intersection entre une ligne et une colonne est une cellule (td) de tableau.
​
Pour créer un tableau fonctionnel en HTML, nous allons devoir utiliser au moins 3 éléments :
-
La balise <table> (« tableau » en français) qui va définir le tableau en soi ;
-
La balise <tr>, pour « table row » ou « ligne de tableau »qui nous permet d’ajouter des lignes dans notre tableau ;
-
La balise <td>, pour « table data » ou « donnée de tableau » qui nous permet d’ajouter des cellules dans nos lignes et ainsi de créer automatiquement de nouvelles colonnes. Pour la première ligne du tableau, au lieu de la balise <td> on peut utilise <th> pour faire centrer le texte et le repr/senter en gras.
​
L’élément HTML table va représenter le tableau en soi. Cet élément est composé d’une paire de balises ouvrante <table> et fermante </table> au sein desquelles nous allons placer les différents autres éléments de notre tableau. Les éléments tr et td sont également représentés sous la forme d’une paire de balises avec leur contenu entre les balises.
​
Voici le code pour le tableau duhaut de la page:
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Si on laisse le code comme cela, par contre, on ne verra pas les petites lignes entre les cellules. Pour jouer avec la couleur ou l'épaisseur des lignes, on va utiliser le style CSS. Voilà le code pour cet exemple:
​
​
​
​
​
​
​
​
​
l'attribute border sert à changer le style de la bordure (1px c'est pour l'épaisseur et solid signifie que la ligne est continue). Vous pouvez faire des recherches sur Internet si vous voulez avoir d'autres types de bordures (par exemple, essayez le style dotted ou dashed pour voir les différences).
​
Si vous voulez que votre tableau remplisse la largeur de la page, vous pouvez utiliser le style width: 100% pour la balise table.
​
Si vous voulez réunir (merge) 2 cellules (2 colonnes), vous pouvez utiliser ce code:
<td colspan="2">.
​
Votre DEVOIR consiste à reproduire le tableau suivant. Il doit occuper la largeur totale de la page.
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Une ligne du tableau (row)
Une autre ligne du tableau
