La balise table est trop souvent mal exploitée

Le

Cette news n’a pas pour but de parler de la guerre tableau / full CSS, puisqu’on sait bien qu’il vaut mieux utiliser une structure CSS pour faire un site plutôt que d’utiliser massivement des tableaux. Les tableaux doivent être utilisés uniquement pour afficher des données tabulaires. Cette news montre plutôt l’utilisation de la balise table dans toute sa splendeur et surtout comme il faudrait qu’elle soit.

Généralement quand on fait un tableau en HTML, on fait tout simplement : HTML <div class="html4strict"><span class="sc2"><a target="_blank"&nbsp; href="http://december.com/html/4/element/table.html"><span class="kw2">&lt;table&gt;</a> &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2"><a target="_blank"&nbsp; href="http://december.com/html/4/element/tr.html"><span class="kw2">&lt;tr&gt;</a> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2"><a target="_blank"&nbsp; href="http://december.com/html/4/element/td.html"><span class="kw2">&lt;td&gt;</a><span class="sc2"><span class="kw2">&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2"><a target="_blank"&nbsp; href="http://december.com/html/4/element/td.html"><span class="kw2">&lt;td&gt;</a><span class="sc2"><span class="kw2">&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2"><span class="kw2">&lt;/tr&gt; <span class="sc2"><span class="kw2">&lt;/table&gt;</div> C’est la base d’un tableau et quand on fait cela, ça marche sans problème. Cependant, il manque beaucoup d’éléments qui facilitent par exemple l’accessibilité de votre tableau et qui le rende aussi plus logique. Avec un regard d’accessibilité pour les mal-voyants (possédant des navigateurs comme Braille), l’attribut summary permet de donner un résumé du tableau. Je ne le croise quasiment jamais sur les sites internets et je pense que personne ne sait vraiment à quoi sert cet attribut (cf. mon cher Adrien ;)). C’est bien dommage !

Si l’on regarde dans le contenu du tableau, la balise caption permet d’afficher la légende du tableau. Elle est en général placée tout en haut du tableau et permet à quiconque (plus aux personnes mal-voyantes) de connaître le contenu du tableau (un surplus de l’attribut summary).

Vous avez aussi certainement croisé la balise tbody. DreamWeaver aime la rajouter dans tous les tableaux. En fait, il existe aussi la balise thead (pour le header de votre tableau) et tfoot (logiquement pour le footer de votre tableau). Ils permettent de placer des titres à vos colonnes en utilisant la balise th. Ce que beaucoup faisait déjà mais sans encapsuler les balises th par la balise thead/tfoot.

Avec les balises thead et tfoot, la structure du tableau est bien divisée en 3 parties. Le thead est certainement plus utilisé que le tfoot.

Le tfoot sert en fait à rappeler le titre des colonnes. Vous vous imaginez bien que sur un tableau à 3/4 entrées, cela ne soit pas nécessaire. Par contre sur un très gros tableau, c’est plus qu’utile. Apparemment cela permettrait aussi lors de l’impression du tableau sur plusieurs pages, de répéter le tfoot et le thead (automatiquement) en bas et en haut de chaque page imprimée. Plutôt intéressant !

A noter que la balise tbody est très recommandée uniquement si le tableau contient des thead / tfoot. Sinon, ce n’est pas la peine de le mettre.

Voici par exemple un exemple de tableau bien structuré (trop ?) : HTML <div class="html4strict"><span class="sc2"><a target="_blank"&nbsp; href="http://december.com/html/4/element/table.html"><span class="kw2">&lt;table</a> <span class="kw3">border=<span class="st0">"1" <span class="kw3">summary=<span class="st0">"tableau d'exemple"<span class="kw2">&gt;</a> &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2"><a target="_blank"&nbsp; href="http://december.com/html/4/element/caption.html"><span class="kw2">&lt;caption&gt;</a>Un exemple de tableau<span class="sc2"><span class="kw2">&lt;/caption&gt; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2"><a target="_blank"&nbsp; href="http://december.com/html/4/element/thead.html"><span class="kw2">&lt;thead&gt;</a> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2"><a target="_blank"&nbsp; href="http://december.com/html/4/element/tr.html"><span class="kw2">&lt;tr&gt;</a> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2"><a target="_blank"&nbsp; href="http://december.com/html/4/element/th.html"><span class="kw2">&lt;th&gt;</a>ID<span class="sc2"><span class="kw2">&lt;/th&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2"><a target="_blank"&nbsp; href="http://december.com/html/4/element/th.html"><span class="kw2">&lt;th&gt;</a>Nom<span class="sc2"><span class="kw2">&lt;/th&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2"><a target="_blank"&nbsp; href="http://december.com/html/4/element/th.html"><span class="kw2">&lt;th&gt;</a>Prénom<span class="sc2"><span class="kw2">&lt;/th&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2"><span class="kw2">&lt;/tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2"><span class="kw2">&lt;</a>/thead&gt; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2"><a target="_blank"&nbsp; href="http://december.com/html/4/element/tfoot.html"><span class="kw2">&lt;tfoot&gt;</a> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2"><a target="_blank"&nbsp; href="http://december.com/html/4/element/tr.html"><span class="kw2">&lt;tr&gt;</a> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2"><a target="_blank"&nbsp; href="http://december.com/html/4/element/th.html"><span class="kw2">&lt;th&gt;</a>ID<span class="sc2"><span class="kw2">&lt;/th&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2"><a target="_blank"&nbsp; href="http://december.com/html/4/element/th.html"><span class="kw2">&lt;th&gt;</a>Nom<span class="sc2"><span class="kw2">&lt;/th&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2"><a target="_blank"&nbsp; href="http://december.com/html/4/element/th.html"><span class="kw2">&lt;th&gt;</a>Prénom<span class="sc2"><span class="kw2">&lt;/th&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2"><span class="kw2">&lt;/tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2"><span class="kw2">&lt;/tfoot&gt; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2"><a target="_blank"&nbsp; href="http://december.com/html/4/element/tbody.html"><span class="kw2">&lt;tbody&gt;</a> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2"><a target="_blank"&nbsp; href="http://december.com/html/4/element/tr.html"><span class="kw2">&lt;tr&gt;</a> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2"><a target="_blank"&nbsp; href="http://december.com/html/4/element/td.html"><span class="kw2">&lt;td&gt;</a>1<span class="sc2"><span class="kw2">&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2"><a target="_blank"&nbsp; href="http://december.com/html/4/element/td.html"><span class="kw2">&lt;td&gt;</a>DUPONT<span class="sc2"><span class="kw2">&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2"><a target="_blank"&nbsp; href="http://december.com/html/4/element/td.html"><span class="kw2">&lt;td&gt;</a>Jacques<span class="sc2"><span class="kw2">&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2"><span class="kw2">&lt;/tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2"><a target="_blank"&nbsp; href="http://december.com/html/4/element/tr.html"><span class="kw2">&lt;tr&gt;</a> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2"><a target="_blank"&nbsp; href="http://december.com/html/4/element/td.html"><span class="kw2">&lt;td&gt;</a>2<span class="sc2"><span class="kw2">&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2"><a target="_blank"&nbsp; href="http://december.com/html/4/element/td.html"><span class="kw2">&lt;td&gt;</a>AREFI<span class="sc2"><span class="kw2">&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2"><a target="_blank"&nbsp; href="http://december.com/html/4/element/td.html"><span class="kw2">&lt;td&gt;</a>Luc<span class="sc2"><span class="kw2">&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2"><span class="kw2">&lt;/tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2"><a target="_blank"&nbsp; href="http://december.com/html/4/element/tr.html"><span class="kw2">&lt;tr&gt;</a> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2"><a target="_blank"&nbsp; href="http://december.com/html/4/element/td.html"><span class="kw2">&lt;td&gt;</a>3<span class="sc2"><span class="kw2">&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2"><a target="_blank"&nbsp; href="http://december.com/html/4/element/td.html"><span class="kw2">&lt;td&gt;</a>POLIR<span class="sc2"><span class="kw2">&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2"><a target="_blank"&nbsp; href="http://december.com/html/4/element/td.html"><span class="kw2">&lt;td&gt;</a>Carl<span class="sc2"><span class="kw2">&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2"><span class="kw2">&lt;/tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2"><span class="kw2">&lt;/tbody&gt; <span class="sc2"><span class="kw2">&lt;/table&gt;</div>Ce qui donne un tableau bien structuré.

Et vous, vous en pensez quoi du "tableau bien structuré" ?

 blabla

Related Posts