I. Introduction

Je suis souvent amené à valider le code source de mes équipes, notamment en ce qui concerne l'écriture de pages Web. Or je constate régulièrement que les développeurs ne savent pas, ou ne veulent pas, coder correctement les tableaux en HTML. Ils vont très souvent au plus simple et tombent dans des pièges non seulement en terme de qualité (sémantique) mais également en terme d'accessibilité.

Le terme « accessibilité » désigne un ensemble de règles à prendre en compte pour permettre aux personnes « handicapées » de pouvoir consulter les sites web. Par exemple un aveugle aura accès à du texte de substitution aux images. L'accessibilité devient notamment une norme dans le cadre des projets gouvernementaux.

Dans cet article, je ne parlerai pas (ou presque pas) des balises et attributs dédiés à la mise en forme (alignements, couleurs, encadrements, etc.) car on préférera employer des feuilles de style CSS pour cela. Les balises et attributs des tableaux « doivent » être réservées à la définition de la structure du document et de ses informations.

Pour bien faire, je vous propose un mini lexique des balises associées aux tableaux, ainsi que leurs attributs, en annexes.

I-A. Versions

25 octobre 2013 : création du document

II. Du code correct

II-A. Le cas trop souvent utilisé

La plupart des développeurs écrivent les tableaux ainsi :

Code usuel
Sélectionnez

<table id="tab1">
    <tr>
        <td>Nom</td>
        <td>Prénom</td>
        <td>Math</td>
        <td>Français</td>
        <td>Histoire</td>
        <td>Sport</td>
        <td>Appréciation</td>
    </tr>
    
    <tr>
        <td>Besson</td>
        <td>Luc</td>
        <td>13</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
        <td>Bien</td>
    </tr>

    ...

</table>

Ce qui donne un résultat (table 01) conforme aux attentes de bases :

Image non disponible
Table 01

J'ai ajouté les éléments de style CSS suivant pour que ce soit plus lisible :

Un peu de style
Sélectionnez

<style>
    #tab1 {
        border: #000 solid 1px;
    }
    
    #tab1 td {
        border: #ddd solid 1px;
    }
</style>

Le résultat (table 01-styled) laisse voir un peu mieux la structure :

Image non disponible
Table 01-styled

II-B. thead, tbody et tfoot

Plusieurs choses ne vont pas dans ce code. Pour commencer, le code du tableau n'est pas sémantiquement correcte. Il faut distinguer l'entête du tableau de son corps à l'aide des balises « thead » et « tbody » :

thead et tbody
Sélectionnez

<table id="tab2">
    <thead>
        <tr>
            <td>Nom</td>
            <td>Prénom</td>
            <td>Math</td>
            <td>Français</td>
            <td>Histoire</td>
            <td>Sport</td>
            <td>Appréciation</td>
        </tr>
    </thead>
    
    <tbody>
        <tr>
            <td>Besson</td>
            <td>Luc</td>
            <td>13</td>
            <td>14</td>
            <td>15</td>
            <td>16</td>
            <td>Bien</td>
        </tr>

        ...
    </tbody>
</table>

Le résultat (table 02) ne montre rien de spécial :

Image non disponible
Table 02

Rien n'empêche d'avoir plusieures balise « tbody » dans un tableau. En revanche, il ne peut y avoir qu'une seule balise « thead » ou « tfoot » (cf. ci-dessous).

Pour bien faire, on ajoutera aussi la balise « tfoot » dont le sens me parait évident :

et aussi tfoot
Sélectionnez

<table id="tab2">
    <thead>
        <tr>
            <td>Nom</td>
            <td>Prénom</td>
            <td>Math</td>
            <td>Français</td>
            <td>Histoire</td>
            <td>Sport</td>
            <td>Appréciation</td>
        </tr>
    </thead>
    
    <tfoot>
    	<tr>
    		<td colspan="7">Copyright</td>
    	</tr>
    </tfoot>
    
    <tbody>
        <tr>
            <td>Besson</td>
            <td>Luc</td>
            <td>13</td>
            <td>14</td>
            <td>15</td>
            <td>16</td>
            <td>Bien</td>
        </tr>

        ...
    </tbody>
</table>

La balise « thead », mais aussi la balise « tfoot », sont placées avant « tbody ».

L'attribut « colspan » permet de regrouper des cellules sur plusieurs colonnes. Dans l'exemple, il y a sept colonnes. Puisqu'on a indiqué une valeur de « 7 » pour l'attribut « colspan », cela veut dire que ça va occuper tout le tableau.

II-C. Des titres

Ensuite il faut bien penser que la balise pour une cellule de titre d'un tableau est « th » et non « td » :

Avec des th
Sélectionnez

<table id="tab2">
    <thead>
        <tr>
            <th>Nom</th>
            <th>Prénom</th>
            <th>Math</th>
            <th>Français</th>
            <th>Histoire</th>
            <th>Sport</th>
            <th>Appréciation</th>
        </tr>
    </thead>
	...

A ce stade on obtient, même si cela reste léger, un tableau sémantiquement correct. Visuellement, le résultat (table 02-th) est relativement similaire. On voit juste que les titres sont en gras et centrés :

Image non disponible
Table 02-th

III. Et l'accessibilité

III-A. summary et caption

Les règles d'accessibilités aident les personnes dont les capacités sont réduites à consulter le tableau. Mais pour cela, les logiciels d'aide ont besoin que le code HTML contienne un ensemble d'informations. Les plus évidentes sont la propriété « summary » et la balise « caption » :

Summary et caption
Sélectionnez

<table id="tab2" summary="Notes de la classe. On constate que les notes sont relativement bonne dans l'ensemble. C'est une nouvelle qui nous fait plaisir.">
    <caption>Notes de la classe</caption>
    <thead>
    ...

Le résultat (table 03) ne laisse voir que la valeur de la balise « caption » :

Image non disponible
Table 03

La plupart des navigateurs n'affichent pas les informations fournies par l'attribut « summary ». Seuls les logiciels adaptés vont se servir de l'information, par exemple pour la lire à haute voix à l'aide d'un synthétiseur vocal. En revanche, le contenu de la balise « caption » est presque systèmatiquement affiché.

En général on complète donc ce code par un petit bout de style CSS afin de masque le contenu de la balise « caption » dans les navigateurs non spécialisés.

Sans caption
Sélectionnez

<style>
    #tab1 caption {
        display: none;
    }
</style>

Le résultat (table 03-nocaption) masque le texte :

Image non disponible
Table 03-nocaption

III-B. id

Reste qu'il est simple pour une personne en pleine forme de se repérer dans ce tableaux. Mais comment associer les cellules avec leurs titres de colonne ? Les standards du Web apporte une réponse simple à l'aide des attributs « id » et « header » :

Avec un id
Sélectionnez

<table ... >
    <caption>Notes de la classe</caption>
    <thead>
        <tr>
            <th id="nom">Nom</th>
            <th id="prenom">Prénom</th>
            <th id="math">Math</th>
            <th id="francais">Français</th>
            <th id="histoire"> Histoire</th>
            <th id="sport">Sport</th>
            <th id="appreciation">Appréciation</th>
        </tr>
    </thead>
    
    <tbody>
        <tr>
            <td headers="nom">Besson</td>
            <td headers="prenom">Luc</td>
            <td headers="math">13</td>
            <td headers="francais">14</td>
            <td headers="histoire">15</td>
            <td headers="sport">16</td>
            <td headers="appreciation">Bien</td>
        </tr>

 ...

Le résultat (table 04) ne laisse voir aucune différence à l'écran :

Image non disponible
Table 04

III-C. Span

Pour ma part, je dois dire que je suis un adepte de la balise « span » qui, lorsqu'elle encadre du texte, offre de nombreuses nouvelle possibilités en terme de style. Ce n'est pas une obligation de l'utiliser mais je constate que c'est souvent bien pratique d'y avoir pensé en amont :

Avec un span
Sélectionnez

<table ... >
    ...
    <thead>
        <tr>
            <th id="nom"><span>Nom</span></th>
            <th id="prenom"><span>Prénom</span></th>
            <th id="math"><span>Math</span></th>
            <th id="francais"><span>Français</span></th>
            <th id="histoire"><span>Histoire</span></th>
            <th id="sport"><span>Sport</span></th>
            <th id="appreciation"><span>Appréciation</span></th>
        </tr>
    </thead>
    
    <tbody>
        <tr>
            <td headers="nom"><span>Besson</span></td>
            <td headers="prenom"><span>Luc</span></td>
            <td headers="math"><span>13</span></td>
            <td headers="francais"><span>14</span></td>
            <td headers="histoire"><span>15</span></td>
            <td headers="sport"><span>16</span></td>
            <td headers="appreciation"><span>Bien</span></td>
        </tr>
    ...
</table>

Là encore, le résultat (table 05) ne montre rien de visible. Mais ça sera utile pour l'avenir.

Image non disponible
Table 05

L'interêt de la balise « span » est d'avoir un sous tag dans le « td ». Mais cela sera surtout pratique pour la mise en page.

IV. Conclusion

Pendant longtemps la seule vraie solution pour obtenir des présentations soignées était l'utilisation massive et systématique de tableaux pour établir un gabarit de page. On n'avait pas le choix et, faute de mieux, on devait s'en contenter. Or les nouvelles techniques liées au CSS ont permis de s'affranchir des tableaux de layout.

Le HTML (à l'inverse du XML) est un langage de balises dont l'orientation claire est d'être sémantique. Un tableau sert à afficher des données. Ca ne doit pas servir pour faire de la mise en forme de la page. Un lien est un lien, un titre est représenté par une balise de titre et, surtout, un tableau est un tableau. Un tableau sert à organiser des données sous forme tabulaire. Il ne doit pas servir à faire de la décoration.

Un arguments (trop rarement évoqué) à l'encontre de l'utilisation de tableaux pour la présentation est que le rendu par le navigateur demande de très nombreux calculs pour positionner tous les éléments.

Dans tous les cas, et à titre d'aide mémoire, voici une liste de points (disons une todo liste) à mettre en place dans vos tableaux :

  • LALA
  • TODO

Vos retours nous aident à améliorer nos publications. N'hésitez donc pas à commenter cet article sur le forum : 13 commentaires Donner une note à l'article (5)

V. Remerciements

Je tiens à remercier l'équipe de Developpez.com, qui m'a aidé à écrire cet article, et plus particulièrement Bernard Le Roux, TODO et TODO.

VI. Annexes

VI-A. Pour aller plus loin

TODO

VI-B. Liens personnels

Retrouvez ma page et mes autres articles sur Developpez.com :
http://thierry-leriche-dessirier.developpez.com/#page_articlesTutoriels

Suivez-moi sur Twitter : @thierryleriche@thierryleriche

VI-C. Lexique des balises et attributs des tableaux

TODO