2003-10-24 2003-10-24 Pascale Lambert pascale.lambert@openweb.eu.org Cet article est sous licence Creative Commons Attribution-ShareAlike. Faire des tableaux de données accessibles et respectant les standards avec les CSS debutant expert mise_en_page css

Avec le support du positionnement CSS dans l'immense majorité des navigateurs, les inconvénients liés à la mise en page par tableaux n'ont plus lieu d'être subis, à moins de devoir fournir une mise en page identique à l'antique Netscape 4. Aussi, le présent article se concentrera sur la mise en forme des tableaux de données, utilisés pour présenter des données tabulaires. Afin de compléter ce point de vue, lire l'article Les problèmes de la mise en page par tableaux.

table : crée un tableau caption : légende du tableau (optionnel) tr : ligne du tableau th : cellules d'en-tête du tableau td : cellules du tableau

thead : groupe de cellules d'en-tête tbody : groupe de cellules de corps de tableau tfoot : groupe de cellules de pied de tableau

Pour les navigateurs textuels, brailles ou vocaux pouvant être utilisés par les déficients visuels, il convient d'ajouter l'attribut summary pour expliquer le contenu du tableau. Cet attribut s'applique à l'élément table.

Le code (X)HTML d'un tableau de données simple présentées en colonnes, respectant standards et accessibilité, peut être de la forme suivante : <table summary="exemple de structure d'un tableau de données"> <caption>Tableau de données</caption> <tr> <th>Titre colonne 1</th> <th>Titre colonne 2</th> </tr> <tr> <td>cellule A1</td> <td>cellule B1</td> </tr> <tr> <td>cellule A2</td> <td>cellule B2</td> </tr> </table> Dans ce contexte, toute la mise en forme du tableau et de ses cellules est à déclarer par le biais des CSS. Remarque : on peut indiquer border="1" dans l'élément table afin les cellules du tableau soient tout de même bordées avec les navigateurs graphiques plus anciens acceptant pas ou mal les CSS. Choisissons les options d'un cadre de tableau en trait continu (solid), noir (#000000) et d'épaisseur moyenne (medium) ; et des bordures de cellules en traits continus (solid) fins (thin) et bleus ciel (#6495ed). Le code CSS, à indiquer dans une feuille de style externe ou dans l'en-tête de la page entre des balises <style type="text/css"></style>, sera celui-ci : table { border: medium solid #000000; width: 50%; } td, th { border: thin solid #6495ed; width: 50%; } L'aspect du tableau sera ainsi le suivant : exemple de tableau basique Remarque 1 : on préférera les tailles (width:) de tableaux et de cellules en pourcentages plutôt qu'en pixels afin que le tableau s'adapte automatiquement à la fenêtre d'affichage, quelle que soit la résolution de l'écran. Remarque 2 : l'épaisseur des traits peut aussi être exprimée en pixels (px), points (pt), pica (pc)…, de même que leur apparence peut être en tirets (dashed), en pointillés (dotted), en relief (outset ou inset) etc. Si on désire que les bordures de tour de tableau et de cellules soient confondues, on rajoutera border-collapse: collapse dans les styles de table. L'aspect du tableau pourra alors être le suivant : exemple de tableau avec bordures fusionnées Dans les navigateurs actuels, le texte présent dans les cellules définies par les balises th est en gras et centré par défaut. Rien n'empêche évidemment de modifier l'alignement du texte, la police de caractère ou la couleur de fond des différentes cellules.

table { border: medium solid #6495ed; border-collapse: collapse; width: 50%; } th { font-family: monospace; border: thin solid #6495ed; width: 50%; padding: 5px; background-color: #D0E3FA; background-image: url(sky.jpg); } td { font-family: sans-serif; border: thin solid #6495ed; width: 50%; padding: 5px; text-align: center; background-color: #ffffff; } caption { font-family: sans-serif; } exemple de tableau d'aspect un peu plus élaboré Voir les différents exemples décrits : document annexe 1.

Si la taille du tableau est inférieure à 100% de la fenêtre d'affichage, il est souvent souhaité qu'il soit centré dans la page. Avec MSIE 6, Netscape 6 et +, Mozilla, Firefox ou Opera 5 et +, l'attribut margin: auto, à inclure dans les styles CSS de table, centre automatiquement le bloc. Mais les versions antérieures à MSIE 6 ne le reconnaissent hélas pas. L'astuce est alors d'encadrer le tableau par des balises <div style="text-align:center"></div>, qui ne servent à rien pour les précédents navigateurs cités, mais qui permettra d'avoir une présentation homogène quel que soit le browser.

Pour des présentations plus complexes, d'autres ensembles d'éléments et d'attributs vont pouvoir être exploités. Étudions le cas de présentation suivant utilisant les balises thead, tfoot et tbody, citées en début d'article : <table summary="liste de quelques articles publiés sur OpenWeb regroupés par auteurs et niveaux"> <caption> Présentation de quelques articles publiés sur OpenWeb </caption> <thead> <tr> <th></th> <th>Débutants</th> <th>Experts</th> <th>Gourous</th> </tr> </thead> <tfoot> <tr> <th></th> <th>Débutants</th> <th>Experts</th> <th>Gourous</th> </tr> </tfoot> <tbody> <tr> <th>Tristan Nitot</th> <td>Introduction à l'accessibilité</td> <td>Introduction à l'accessibilité</td> <td></td> </tr> <tr> <th>Tristan Nitot</th> <td>Interview de Chantal Laplanche, Responsable Accessibilité Web au Ministère de la Culture</td> <td>Interview de Chantal Laplanche, Responsable Accessibilité Web au Ministère de la Culture</td> <td>Interview de Chantal Laplanche, Responsable Accessibilité Web au Ministère de la Culture</td> </tr> </tbody> <tbody> <tr> <th>Laurent Denis</th> <td>Un exemple de feuille de style d'impression</td> <td></td> <td></td> </tr> <tr> <th>Laurent Denis</th> <td></td> <td>Commenter le document de travail W3CXHTML 2</td> <td>Commenter le document de travail W3CXHTML 2</td> </tr> </tbody> </table> Ce qui donne ce résultat peu attrayant : tableau plus elaboré sans mise en forme La spec du W3C précise que les thead et tfoot doivent être déclarés avant le(s) tbody. Le navigateur interpretera de lui-même le bon emplacement des différents groupes de cellules. Dans un premier temps, fusionnons les cellules d'articles et d'auteurs identiques. Pour les cellules en lignes on ajoutera l'attribut colspan="n" ; pour celles en colonnes, c'est rowspan="n" qui sera utilisé, n étant de le nombre de cellules fusionnées. Le code (X)HTML devient : <table summary="liste de quelques articles publiés sur OpenWeb regroupés par auteurs et niveaux"> <caption> Présentation de quelques articles publiés sur OpenWeb </caption> <thead> <tr> <th></th> <th>Débutants</th> <th>Experts</th> <th>Gourous</th> </tr> </thead> <tfoot> <tr> <th></th> <th>Débutants</th> <th>Experts</th> <th>Gourous</th> </tr> </tfoot> <tbody> <tr> <th rowspan="2">Tristan Nitot</th> <td colspan="2">Introduction à l'accessibilité</td> <td></td> </tr> <tr> <td colspan="3">Interview de Chantal Laplanche, Responsable Accessibilité Web au Ministère de la Culture</td> </tr> </tbody> <tbody> <tr> <th rowspan="2">Laurent Denis</th> <td>Un exemple de feuille de style d'impression</td> <td></td> <td></td> </tr> <tr> <td></td> <td colspan="2">Commenter le document de travail W3CXHTML 2</td> </tr> </tbody> </table> Résultat : Tableau sans mise en forme avec cellules fusionnées Reste à améliorer la présentation visuelle pour rendre l'ensemble plus agréable à l'aide des CSS : table { border:3px solid #6495ed; border-collapse:collapse; width:90%; margin:auto; } thead, tfoot { background-color:#D0E3FA; background-image:url(sky.jpg); border:1px solid #6495ed; } tbody { background-color:#FFFFFF; border:1px solid #6495ed; } th { font-family:monospace; border:1px dotted #6495ed; padding:5px; background-color:#EFF6FF; width:25%; } td { font-family:sans-serif; font-size:80%; border:1px solid #6495ed; padding:5px; text-align:left; } caption { font-family:sans-serif; } Résultat : exemple de mise en forme visuelle de tableau

Comme la largeur de colonnes, la hauteur de chaque ligne peut aussi être définie. L'attribut height: sera indiqué pour l'élément tr. L'alignement vertical du texte présent dans chaque cellule peut-être modifié à l'aide de l'attribut vertical-align: qui peut prendre les valeurs : baseline | top | middle | bottom. Cet attribut peut-être indiqué pour les éléments td ou th. Pour positionner la légende du tableau l'attribut caption-side, à indiquer pour l'élément table peut prendre les valeurs top | bottom | left | right. (Ne fonctionne pas avec MSIE). Voir les différents exemples décrits : document annexe 2.