Blog Tool Box

Osez les tableaux pour vos données tabulaires

Les tableaux HTML sont de plus en plus dénigrés par les communautés de développeurs web. Avant l’utilisation des CSS, les tableaux étaient utilisés pour la mise en page de pages web : on coupait notre page web en quatre grandes cellules et l’on obtenait ainsi quatre portions qui nous suffisait de remplir pour disposer notre contenu.
Cette technique marche, ok, mais les tableaux HTML ne sont pas fait pour ça, ils servent à afficher, sous forme de tableaux, des données tabulaires.

Donc maintenant, si vous avez besoin d’afficher un tableau, pas la peine d’aller chercher midi à quatorze heure avec des CSS, il suffit de mettre en place un tableau HTML. Parce que utiliser des astuces CSS pour réaliser un tableau est aussi mal adapté que d’utiliser des tableaux pour faire de la mise en page.

Exemple de tableau HTML tout simple :

Taux de croissance du PIB
Pays 2003 2004 2005 2006
Chine 10,0 % 10,1 % 10,4 % 10,7 %
Inde 7,3 % 7,8 % 9,2 % 9,2 %
France 1,1 % 2,0 % 1,2 % 2,1 %

Et même sous sa forme la plus basique (sans couleurs, sans bordures, etc), le tableau affiche ce que l’on veut, et il le fait bien.

La syntaxe basique HTML d’un tableau c’est ça :

<table>
    <caption>Titre du tableau</caption>
    <tr>
        <th>Titre 1</th>
        <th>Titre 2</th>
        <th>Titre 3</th>
    </tr>
    <tr>
        <td>Donnée</td>
        <td>Donnée</td>
        <td>Donnée</td>
    </tr>
    <tr>
        <td>Donnée</td>
        <td>Donnée</td>
        <td>Donnée</td>
    </tr>
</table>

Je vous renvoie sur le tutoriel du Site du Zéro pour apprendre à réaliser des tableaux basiques comme des tableaux plus complexes stylés avec des CSS.

  • Mat

    Je suis tout à fait d’accord avec toi. On a tellement dit que les tableaux c’est nul, c’est dépassé maintenant avec les et le CSS, que peu de gens osent encore utiliser les tableaux dans leurs sites.

  • bruno bichet

    C’est toujours bon de rappeller que les tableaux sont très utiles pour présenter des données tabulaires ;) Toutefois, je n’ai pas souvenir d’avoir lu qu’ils ne fallait pas les utiliser.

    Ce que beaucoup préconisent c’est surtout de ne pas utiliser les tableaux pour structurer les zones de contenu des sites web en colonnes, etc. parce qu’il existe d’autres balises et techniques pour celà.

    Par ailleurs, avec l’augmentation du nombre de périphérique comme les pda, iphone, eeepc, borne intéractive, téléphone portable, etc. les sites web réalisés en tableaux ont peu de chances d’être visibles sur tous les écrans, alors qu’en utilisant des balises plus adaptés, on peut désactiver les CSS et obtenir une page linéarisée parfaitement fonctionnelle tout en évitant de coder un site par utilisateur ;)