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 :
<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 :
J'ai ajouté les éléments de style CSS suivant pour que ce soit plus lisible :
<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 :
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 » :
<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 :
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 :
<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 » :
<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 :
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 » :
<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 » :
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.
<style>
#tab1 caption {
display: none;
}
</style>
Le résultat (table 03-nocaption) masque le texte :
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 » :
<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 :
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 :
<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.
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 
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