Habillage de tableaux avec des CSS

En-tête, cellules et accessibilité

Avertissement préliminaire

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.

Différentes balises

Balises élémentaires

• <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

Balises complémentaires

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

Accessibilité

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.

Tableau simple

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.

Exemple

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.

Centrage d'un tableau dans une page

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.

Tableaux plus élaborés

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 :

Compléments

• 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.

Une question, une remarque ? Écrivez à l'auteur à pascale.lambert@openweb.eu.org.