Habillage de tableaux avec des CSS

Openweb.eu.org > Articles  > Habillage de tableaux avec des CSS

Abstract

Faire des tableaux de données accessibles et respectant les standards avec les CSS

Article

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.

Afin de compléter ce point de vue, lire l'article Les problèmes de la mise en page par tableaux.

Cela dit, cet article est loin de décrire toutes les recommandations pour rendre un tableau de données parfaitement accessible. Cela fera l'objet d'un autre article à venir...

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 un minimum d'accessibilité, peut être de la forme suivante :

<table summary="exemple de structure d'un tableau de données 2 lignes, 2 colonnes">
  <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 en cas de désactivation des feuilles de style.

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'en-tête 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;
}

exemple de tableau d'aspect un peu plus élaboré

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

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 (en ligne) et niveaux (en colonne)">
<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 (en ligne) et niveaux (en colonne)">

<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

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.

Voir les différents exemples décrits : document annexe 2.

À propos de cet article

  • Openweb.eu.org
  • Profil : Débutant, Expert
  • Technologie : CSS
  • Thème : Mise en page
  • Auteur :
  • Publié le :
  • Mise à jour : 18 octobre 2008
  • 9 commentaires

Vos commentaires

  • Rodan Bury Le 14 août 2010 à 10:48

    Bonjour. J’ai trouvé des tutoriels qui divergent au sujet de l’accessibilité des attributs rowspan/colspan, notamment dans les lecteurs d’écrans d’il y a quelques années. Il semble que les versions récentes de JWAS (à partir de JAWS 6 sorti en mars 2005) supportent cet attribut.

    Voir notamment http://webaim.org/techniques/tables/data#spanned

    J’aimerais avoir des détails à ce sujet, et savoir quelle politique d’accessibilité il convient d’adopter. Faut-il encourager l’usage des attributs rowspan/colspan, ou au contraire en éviter l’usage lorsque c’est possible ?

    Merci d’avance pour votre réponse.

  • rassat Le 23 juin 2011 à 11:35

    Merci pour ces explications claires et le rendu agréable.

    Pouvez-vous donner la manière de faire quand on veut 2 tableaux dans la même page mais habillés différemment ?

    Est-ce que l’attribut class suffit pour identifier chaque tableau ?

    Merci.

  • Pascale Lambert Charreteur Le 24 juin 2011 à 09:00 En réponse à : rassat

    Oui, tout à fait : class ou id, c’est selon.

  • yvan Le 9 novembre 2011 à 02:37

    bonjour je voudrai habiller simplement le milieu de mon tableau c’est a dire une case specifique .
    EN sachant que le tableau est deja determiner c’est a dire qu on sait a lavance le nombre de case a mettre.
    deplus je nai pas le droit de toucher au code html c’esta dire que je nai aps le droit de mettre par exemple dans mon td l’attribut class. bien sur dans mon tableau je l’ai defini avec un id
    quelquun peut m’aider ?

  • karl Le 9 novembre 2011 à 17:29

  • scotch Le 11 mai 2013 à 10:43

    Merci, c’est tout à fait le tuto que je recherchais sourire

  • hervé Le 8 juin 2013 à 19:47

    J’ai trouvé ceci qui est pas mal quand on veut appliquer un style à une td en particulier :

    http://rainbow.arch.scriptmania.com/css/css_classes.html

    Merci pour votre aide.

    Hervé

  • leila Le 29 novembre à 00:52

    je veux bien savoir comment réaliser un menu dans un tableau sans bordure /sachant que ce dernier à la proprièté suivante:la courbure des bordures est 10px

    svp je veux la réponse le plus proche possible

  • Pascale Lambert Charreteur Le 30 novembre à 14:31

    Bonjour,
    J’avoue avoir un peu de mal à comprendre ce que vous désirez...
    Pourquoi attribuer une courbure aux bordures s’il n’y en a pas (de bordure) ?
    D’autre part, un tableau n’est pas fait pour faire un menu, mais pour faire... un tableau clin d'œil

    Pour réaliser un menu, tournez-vous plutôt vers ce tutoriel ou celui-ci (plus récent et très bien étayé).

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Suivre les commentaires : RSS 2.0 | Atom