Les tableaux sont parmi les éléments les moins bien compris du HTML. Pris entre les personnes qui les utilisent pour structurer la mise en page de leur contenu (au lieu d'utiliser du CSS) et celles qui ne veulent pas en entendre parler, il y a évidemment un fossé.
Dans tous les cas, le code permettant de créer un tableau est le même :
<table> </table>
Cette mésentente est donc liée à l'histoire du web. Lors de l'essor des sites web à la fin des années 1990, le CSS n'était pas encore utilisé. Avec l'accroissement de la taille des sites et des informations à diffuser, la mise en page sur 3 colonnes s'est généralisée, et à cette époque, le tableau était le seul moyen d'y arriver alors même qu'il n'avait pas été prévu pour ça. Pour ceux qui ont pratiqué ces techniques, on se souviendra de la complexité tant en terme de structuration de la page, qu'en terme de quantité de code produit, pour arriver à un résultat simple, somme toute. Le CSS a donc réellement apporté sa pierre et doit maintenant être utilisé exclusivement pour la mise en page. La recommandation HTML5 mentionne : "Tables should not be used as layout aids". Les tableaux ne doivent pas être utilisés comme des moyens de mise en page, et si cela doit être le cas pour une raison ou une autre, par exemple, un site ancien qui serait trop long à refaire, l'attribut role avec la valeur presentation devra lui etre assigné (presentation est une valeur WAI-ARIA enlevant le caractère sémantique de l'interprétation).
<table role="presentation"> </table>
On remarquera aussi que la recommandation incite les navigateurs à interpréter les attributs border="0" et cellspacing="0" cellapadding="0" comme des attributs définissant des propriétés de tableaux de mise en page, la bonne pratique étant d'utiliser le CSS pour de tels effets.
À l'inverse, l'utilisation de balise permettant de sémantiser classera le tableau dans la catégorie des tableaux de données : caption, thead, headers, scope.
Quoi qu'il en soit, réservez à l'heure actuelle l'utilisation de tableaux à la réalisation de tableaux, comme vous le feriez dans un traitement de texte : en général, il s'agit de présenter des données sous forme de grille, les éléments en ligne étant quantifiés par les colonnes ou inversement. Un exemple simple et courant peut être une liste de produit contenant des colonnes quant au poids, au prix, à la couleur, à la disponibilité en stock.
Le tableau est donc une sorte d'enrichissement de liste (qui ne contient qu'une information), cet enrichissement étant provoqué par le rattachement d'informations régulières et organisées à cette liste.
Comme on vient de le voir, il va falloir apporter un peu d'attention à la description de notre tableau. Nous proposons d'avoir recours à l'élément caption prévu explicitement pour cela. Il peut contenir différents éléments permettant de décrire le texte.
<table>
<caption>
<p><strong>Tab1. Liste de prix des livres</strong> Ce tableau liste l'ensemble de notre catalogue de livres et renseigne les prix 2014 hors frais de port ainsi que sa disponibilité en version numérique</p>
</caption>
</table>
Une fois le tableau mis en place, on peut alors commencer à passer à son contenu. En général, il s'agira de faire apparaître en haut du tableau les intitulés pour chaque colonne de manière à faciliter la lecture. On utilisera alors une combinaison de 3 éléments :
thead pour encadrer la ligne informative ;
tr pour créer la ligne ;th pour renseigner le titre de chaque colonne.
<thead>
<tr>
<th>Titre livre</th>
<th>Téléchargeable</th>
<th>Prix TTC</th>
</tr>
</thead>
Ce qui nous donne maintenant le tableau suivant :
<table>
<caption>
<p><strong>Tab1. Liste de prix des livres</strong> Ce tableau liste l'ensemble de notre catalogue de livres et renseigne les prix 2014 hors frais de port ainsi que sa disponibilité en version numérique</p>
</caption>
<thead>
<tr>
<th>Titre livre</th>
<th>Téléchargeable</th>
<th>Prix TTC</th>
</tr>
</thead>
</table>
En HTML5, il est possible d'omettre les balise de fermeture pour les thead, th et les tr
L'ajout des informations dans le tableau ne sera pas plus compliqué que l'ajout de la première ligne. Les éléments utilisés seront alors :
tbody pour encadrer l'ensemble des données ;tr pour chaque ligne de donnée ;td pour chaque donnée proprement dite, en général associée à une colonne définie ;th pour le cas particulier des cellules de début de ligne à mettre en évidence.Ainsi notre liste de livre en vente qui pourrait se présenter sous la forme :
<ul> <li>Germinal</li> <li>Du contrat social</li> <li>Les misérables</li> </ul>
va maintenant devenir
<tbody> <tr> <td>Germinal</td> <td>epub</td> <td>2,5 €</td> </tr> <tr> <td>Du contrat social</td> <td>epub</td> <td>2,5 €</td> </tr> <tr> <td>Les misérables</td> <td></td> <td>9 €</td> </tr> </tbody>
Ainsi construit, le navigateur saura identifier les différentes relations entre les données. Il comprendra qu'à l'horizontale les éléments sont de nature associée et qu'à la verticale, la nature est identique.
La dimension des colonnes est automatiquement ajustée à la taille du contenu le plus grand. Cela peut poser des difficultés dans le cas de colonnes dont la quantité d'information est disparate. L'utilisation de la propriété CSS width sur td impose une largeur de colonne et provoque des renvois à la ligne automatique dans les cellules, si nécessaire.À noter que l'élément tbody peut être répété plusieurs fois pour générer des regroupements plus fort au sein du tableau et que tfoot, définissant un pied de tableau, beaucoup moins utilisé que thead mais qui en reprend souvent les informations, peut s'avérer utile dans les longs tableaux.
Les éléments que nous avons vus jusqu'à présent permettent de réaliser des tableaux simples parfaitement réguliers dans leurs présentations. Or, il n'est pas rare de devoir regrouper certaines informations en ligne ou en colonne. Dans ce cas, l'utilisation de :
colspan pour regrouper sur la ligne
;rowspan pour fusionner en colonne.
Colspan et rowspan prennent tous deux une valeur chiffrée entière correspondant au nombre de cellules à fusionner. Ainsi, colspan="2" fusionnera la colonne en cours avec la suivante.
Par exemple, modifions le tableau précédent en conséquence et tentons d'ajouter une première ligne d'entête qui regroupera Téléchargeable et Prix sous une colonne générale En Vente.
<table border="1">ce qui affiche :<thead> <tr> <th /> <th>En vente</th> <th /> </tr> <tr> <th>Titre livre</th> <th>Téléchargeable</th> <th>Prix TTC</th> </tr> </thead> <tbody> <tr> <td>Germinal</td> <td>epub</td> <td>2,5 €</td> </tr> <tr> <td>Du contrat social</td> <td>epub</td> <td>2,5 €</td> </tr> <tr> <td>Les misérables</td> <td></td> <td>9 €</td> </tr> </tbody> </table>
| En vente | ||
|---|---|---|
| Titre livre | Téléchargeable | Prix TTC |
| Germinal | epub | 2,5 € |
| Du contrat social | epub | 2,5 € |
| Les misérables | 9 € |
Changeons maintenant cette base pour fusionner la ligne En Vente :
<table border="1">ce qui affiche :<thead> <tr> <th /> <th colspan="2">En vente</th> </tr> <tr> <th>Titre livre</th> <th>Téléchargeable</th> <th>Prix TTC</th> </tr> </thead> <tbody> <tr> <td>Germinal</td> <td>epub</td> <td>2,5 €</td> </tr> <tr> <td>Du contrat social</td> <td>epub</td> <td>2,5 €</td> </tr> <tr> <td>Les misérables</td> <td></td> <td>9 €</td> </tr> </tbody> </table>
| En vente | ||
|---|---|---|
| Titre livre | Téléchargeable | Prix TTC |
| Germinal | epub | 2,5 € |
| Du contrat social | epub | 2,5 € |
| Les misérables | 9 € | |
Pour arriver à ce résultat, nous avons :
colspan à la première cellule à fusionner ;2 à cet attribut pour indiquer le nombre de cellule à modifier ;th suivant de manière à ce que le nombre de cellules soit toujours le même implicitement : la première vide, puis la seconde sur une étendue de 2 soient au total 3.
Il est important de noter que le nombre de colonnes doit rester cohérent d'une ligne à l'autre de manière à garder une bonne organisation du tableau. Il appartient à l'intégrateur de porter cette attention lors de l'utilisation des attributs rowspan et colspan. En cas d'erreur, des colonnes ou lignes peuvent être décalées, voire ajouter si le nombre total est différent d'une ligne à l'autre.
Pour améliorer le résultat et sa pertinence, il convient d'attribuer ces propriétés à la première cellule engageant la fusion.
La même opération peut être effectuée avec les lignes par exemple en fusionnant la cellule Titre livre avec sa supérieure :
<table border="1">ce qui affiche :<thead> <tr> <th rowspan="2">Titre livre</th> <th>En vente</th> <th /> </tr> <tr> <th>Téléchargeable</th> <th>Prix TTC</th> </tr> </thead> <tbody> <tr> <td>Germinal</td> <td>epub</td> <td>2,5 €</td> </tr> <tr> <td>Du contrat social</td> <td>epub</td> <td>2,5 €</td> </tr> <tr> <td>Les misérables</td> <td></td> <td>9 €</td> </tr> </tbody> </table>
| Titre livre | En vente | |
|---|---|---|
| Téléchargeable | Prix TTC | |
| Germinal | epub | 2,5 € |
| Du contrat social | epub | 2,5 € |
| Les misérables | 9 € |
Ici, plusieurs actions ont aussi été effectuées :
rowspan ;rowspan. Il existe bien sûr d'autres éléments et attributs associés aux tableaux, mais ils sont bien moins fréquents et ceux-ci permettent déjà de réaliser de grandes choses.
Il y a une erreur de communication avec le serveur Booktype. Nous ne savons pas actuellement où est le problème.
Vous devriez rafraîchir la page.