HTML 5 - Les tableaux
Introduction
Lorsque nous devons afficher des données, il est souvent utile
d'employer un tableau, ensemble d'éléments
classés dans des lignes (rows en
anglais) et des colonnes (columns).
Un tableau se définit donc en spécifiant le
nombre de lignes et le nombre de colonnes.
Dans ce chapitre, nous allons aborder les
tableaux en HTML. Nous verront d'abord les
balises spécifiques aux tables et les
attributs d'un tableau. Nous découvrirons également comment
décorer un tableau grâce aux feuilles de style.
Grâce à la fusion de cellules,
il est possible d'obtenir une mise en forme plus complexe.
Les tableaux en HTML
En HTML, l'implémentation d'un tableau permet de spécifier
différentes parties, comme nous le montre l'exemple suivant.
Le titre de la table
|
entête de colonne |
Une colonne |
Une autre colonne |
Entête de ligne |
Une cellule dans la ligne |
Une autre cellule |
X |
Une autre ligne |
|
Y |
Z |
Le titre du tableau décrit l'objet du tableau, il se
place au dessus du tableau, mais il peut aussi être placé en
légende, en bas ou sur un des cotés.
Les différents éléments sont définis par ligne, les uns à
la suite des autres.
Les cellules d'un tableau sont les cases individuelles qui
apparaissent dans le tableau et qui contiennent les données
à afficher.
Les en-têtes sont des cellules spéciales qui
contiennent la description de la colonne ou de la ligne, elles se
placent en début de ligne ou en début de colonne.
Les données sont les valeurs présentes dans
les cellules du tableau.
Découvrons ensemble les balises qui permettent de dessiner un
tableau dans une page web.
Les balises spécifiques aux tables
-
Le tableau est déterminé par les balises <table> ...
</table>, tous les éléments
constituant le tableau doivent se trouver entre ces 2 balises.
-
Le tableau est donné ligne par ligne, une ligne est
indiquée par les balises <tr> ... </tr>
-
A l'intérieur d'une ligne chaque cellule est
délimitée par les balises <td> ... </td>. Il est
préférable de donner le même nombre
d'éléments dans chaque ligne pour obtenir un tableau
bien structuré.
Une cellule peut contenir n'importe quel type de
données, du texte, du code HTML (par exemple une autre
table), des liens, des images, .. et même rien du tout pour
indiquer une cellule vide.
-
Les cases d'en-tête sont
délimitées par les balises <th>
... </th>. Ces en-têtes sont facultatives,
elles peuvent être placées soit en début de
ligne, soit en début de colonne, ou même en
début de ligne et de colonne.
-
Le titre du tableau est donné
par les balises <caption>
... </caption>.
-
Les balises <thead>,
<tbody> et <tfoot> sont de nouvelles
balises qui ont pour but de structurer les données présentes dans
l'élément table. La balise <thead> est ainsi censée
regrouper les informations concernant l'en-tête du tableau comme
le titre et le nom des colonnes par exemple. La balise <tbody> est destinée à
contenir l'ensemble des données et la balise <tfoot>
des remarques ou une légende.
Le véritable apport vient du fait que pour une table volumineuse
un scroll va permettre de visualiser les données inclues dans la
balise <tbody> alors que
les données présentent dans thead
et tfoot resteront toujours
visibles. Cependant aucun navigateur ne supporte encore cet effet.
Nous pouvons maintenant placer ces différents éléments dans le
code ci-dessous, pour obtenir le tableau donné en introduction au
début de la page.
<table>
<caption>Le titre de la table </caption>
<thead>
<tr> <!-- 1ère ligne, entête des colonnes-->
<th> </th>
<th>Entête de colonne </th>
<th>Une colonne </th>
<th>Une autre colonne </th>
</tr>
</thead>
<tbody>
<tr> <!-- 2ème ligne-->
<th>Entête de ligne </th>
<td>Une cellule dans la ligne</td>
<td>Une autre cellule</td>
<td> X</td>
</tr>
<tr>
<th>Une autre ligne <!-- 3ème ligne--> </th>
<td> <!-- Une cellule vide--> </td>
<td>Y</td>
<td>Z</td>
</tr>
</tbody>
</table>
Pour la lisibilité du code de la page, il est vivement
conseiller d'user et d'abuser de l'indentation (attention l'excès
nuit en tout). Cette mise en page du code n'a pas d'influence sur le
rendu de la page lors de l'affichage dans un navigateur.
Résumons les principales balises permettant la création de
table en HTML:
Balise |
Signification |
Usage |
table |
|
délimite la table |
caption |
|
donne le titre |
tr |
table row |
délimite une ligne |
td |
table data |
délimite une cellule de données |
th |
table header |
donne une cellule d'en-tête de ligne ou colonne |
La déco avec les feuilles de style
La mise en forme d'un tableau, même si elle peut être réalisée grâce
aux attributs des balises HTML, bénéficie de la souplesse et de la
puissance des feuilles de style (CSS). Une table, une cellule, est
considérée comme une boîte au sens CSS et leurs attributs peuvent donc s'appliquer aux tableaux.
Voici quelques propriétés applicables aux tableaux.
La position de la légende peut être spécifiée par la
propriété caption-side
qui accepte les valeurs
-
top
- légende en haut (valeur pas défaut)
-
bottom
- légende en bas
-
left
- légende à gauche
-
right
- légende à droite
La fusion des bordures des cellules
est possible grâce à l'attribut border-collapse
qui prend les valeurs collapse ou separate.
La propriété border-spacing
spécifie l'écartement entre les cellules (en px).
Voici trois exemples :
1er exemple (même écartement des cellules de 10px de tous les
cotés)
<html>
<head>
<style type="text/css">
table.one {
border-collapse : separate;
border-spacing : 10px;
}
</style>
</head>
<body>
<table class="one">
<tr>
<td>Alpha</td>
<td>Beta</td>
</tr>
<tr>
<td>Gamma</td>
<td>delta</td>
</tr>
</table>
</body>
</html>
Affichage :
2ème exemple (écartement différent en vertical 30px et en
horizontal 10px)
<html>
<head>
<style type="text/css">
table.two {
border-collapse: separate;
border-spacing: 10px 30px;
}
</style>
</head>
<body>
<table class="two">
<tr>
<td>Rouge</td>
<td>Orange</td>
</tr>
<tr>
<td>Vert</td>
<td>Jaune</td>
</tr>
</table>
</body>
</html>
Affichage :
3ème exemple (pas d'écartement border-collapse:
collapse)
<html>
<head>
<style type="text/css">
table.three {
border-collapse: collapse;
}
</style>
</head>
<body>
<table class="three">
<tr>
<td>Rouge</td>
<td>Orange</td>
</tr>
<tr>
<td>Vert</td>
<td>Jaune</td>
</tr>
</table>
</body>
</html>
Affichage :
Les cellules peuvent s'apparenter au modèle de boîte que vous avez
déjà rencontré lors de l'introduction des CSS. Mais la gestion des marges
est cependant toute différente. Elle se réalise au niveau de la
table (!! il n'est pas possible de traiter séparément chaque
cellule).
La mise en forme plus complexe d'un tableau
HTML permet de fusionner des cellules
pour une organisation plus souple des données.
L'attribut rowspan (colspan) des balises <td> ou <th>
permet de spécifier le nombre lignes (colonnes) que l'on
désire fusionner.
Ce premier exemple montre la fusion de 2 cellules dans une
même ligne
Figure |
dimension(s) |
rectangle |
6 |
4 |
carré |
2 |
En HTML :
<table >
<tbody>
<tr >
<th>Figure</th>
<th colspan = "2">dimension(s)</th>
</tr>
<tr>
<td>rectangle</td>
<td>6</td>
<td >4</td>
</tr>
<tr>
<td>carré</td>
<td colspan = "2">2</td>
</tr>
</tbody>
</table>
Cet autre exemple fusionne des cellules dans la colonne
|
|
Rectangle |
Carré |
dimension |
Longueur |
10 |
6 |
largeur |
5 |
En HTML :
<table>
<tbody>
<tr >
<th></th><th></th>
<th>Rectangle</th>
<th>Carré</th>
</tr>
<tr>
<th rowspan = "2">dimension</th>
<td>Longueur</td>
<td>10</td>
<td rowspan = "2">6</td>
</tr>
<tr>
<td>largeur</td>
<td>5</td>
</tr>
</tbody>
</table>