Faire des tableaux de données accessibles et respectant les standards avec les 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 tableauPour 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 :
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 :
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;
}
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 :
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 :
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 :
height: sera indiqué pour l'élément tr.vertical-align: qui peut prendre les valeurs : baseline | top | middle | bottom. Cet attribut peut-être indiqué pour les éléments td ou th.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.