La balise table est trop souvent mal exploitée

Par j0k le mercredi 07 juin 2006, 02:06 - 4011 vues

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 ``

<table>         <tr>                 <td></td>                 <td></td>         </tr> </table>

`` 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 ``

<table border="1" summary="tableau d'exemple">         <caption>Un exemple de tableau</caption>         <thead>                 <tr>                         <th>ID</th>                         <th>Nom</th>                         <th>Prénom</th>                 </tr>         </thead>         <tfoot>                 <tr>                         <th>ID</th>                         <th>Nom</th>                         <th>Prénom</th>                 </tr>         </tfoot>         <tbody>                 <tr>                         <td>1</td>                         <td>DUPONT</td>                         <td>Jacques</td>                 </tr>                 <tr>                         <td>2</td>                         <td>AREFI</td>                         <td>Luc</td>                 </tr>                 <tr>                         <td>3</td>                         <td>POLIR</td>                         <td>Carl</td>                 </tr>         </tbody> </table>

``Ce qui donne un tableau bien structuré.

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

6 commentaires en tout !

1. iDo le mercredi 07 juin 2006, 02:11 #permalien
iDo

J'en pense que IE, a son habitude, ne gere que TRES TRES mal un tableau bien structuré... En effet, avec tbody, on pourrait immaginer faire scroller le contenu du tableau sans que les header ni les footer ne bouge... Firefox : ok, mais IE.....

2. Country le mercredi 07 juin 2006, 03:47 #permalien
Country

Petite erreur : le tfoot se place juste après le thead.
L'autre avantage d'avoir un tableau structuré est, si je me souviens bien, dans le cas des grand tableaux : l'affichage du tableau peu commencer sans même avoir reçu la totalité de celui-ci. Tandis qu'avec un tableau &quot;classique&quot; on attend d'en avoir reçu la totalité avant de l'afficher.

Sinon on peux encore pousser la &quot;struturation&quot; avec les attributs id, scope et headers (permettant de définir à quelles lignes/collones se rapportent les titres).

iDo : à ce niveau je pense qu'il s'agit plutôt d'un problème de CSS, non de la prise en charge des tableaux &quot;bien structurés&quot;.

3. j0k le mercredi 07 juin 2006, 03:59 #permalien
j0k

Le truc que je ne trouve pas logique, c'est que si on met le tfoot juste après le thead, il s'affiche juste en dessous dans le rendu de la page. Alors que dans la logique (ma logique ?) il devrai se placer tout en bas. C'est pour ça que moi je l'ai placé en bas, pour qu'il soit en bas :)

4. Country le mercredi 07 juin 2006, 04:22 #permalien
Country

heu non, si tu le place juste en dessous du thead, il apparait quand même à la fin du tableau ;)

5. j0k le mercredi 07 juin 2006, 04:34 #permalien
j0k

Bouarf t'as raison, je sais pas comment je m'étais débrouiller pour qu'il se retrouve juste en dessous du thead ..

6. Anonymous le vendredi 07 juillet 2006, 02:28 #permalien
Anonymous

A mon avis le tfoot ce place juste après le thead pour qu'il s'affiche dès le chargement de la page.
Dans le cas d'un tableau assez conséquent le header et le footer s'afficheraient en premier et le tableau se remplirai au fur et à mesure (cela à dur être pensé pour les connexions à très faible débit, ou aux tableaux gigantesques).

Mais ça reste mon avis ^^.

Pensez à vous inscrire !

  • C'est rapide
  • Utiliser votre compte Facebook
  • Ou votre Open ID
Laisser un commentaire




Accueil

Catégories

Tags

Liens