5568 sujets

Sémantique web et HTML

[Résolu]Tableaux "complexes" sémantiquement correct

Bonjour,

Je m'intéresse depuis quelques temps à essayer de donner plus de sens à mon code.
J'ai aujourd'hui besoin de faire d'une part un tableau à double entrée :

http://graphsite.free.fr/tableau1.png

J'avoue ne pas trop savoir m'y prendre...
Je voudrais déjà savoir si ceci était correct d'un point de vue sémantique:

<table>
   <tr>
       <th>MODALITES</th>
       <th>Critere 1.1</th>
       <th>Critere 1.2</th>
   </tr>

   <tr>
       <th>Critere 2.1</th>
       <td> test </td>
       <td> test </td>
   </tr>
   <tr>
       <th>Critere 2.2</th>
       <td> test </td>
       <td> test </td>
   </tr>
</table>


Ensuite si certains pouvaient m'aider à évoluer vers le tableau présent sur la capture ou m'indiquer des ressources en ligne pour apprendre à faire des tableaux complexes.... ce serait avec grand plaisir !


Merci d'avance Smiley cligne
Modifié par Graph-Site (18 Jul 2008 - 16:52)
Hello,

Le tableau (image) que tu présentes mélange structure et présentation. Par exemple, certaines informations sont affichées dans deux ou trois cellules, alors qu'elles devraient être groupées dans une même cellule ou un même en-tête. De plus, «Modalités» n'est pas un en-tête de ligne ou de colonne, mais plutôt le titre du tableau qui aurait été placé à cet endroit pour combler le vide.

Si l'objectif est de rendre ce tableau accessible, je suggère de le séparer en deux tableaux, un pour la franchise de base et un pour la franchise optionnelle. Il faut éviter d'avoir deux en-têtes horizontaux ou deux en-tête verticaux qui se cumulent (ex: «Franchise de base» et «Maladie»), ou un en-tête explosé sur plusieurs lignes (ex: «montant des indemnités journalières»).

Pour les trois lignes des indemnités journalières, par exemple, tu as deux options:
1. un en-tête «Montant des indemnités journalières», et dans chaque cellule tu précises «X EUR jusqu'au 28e jour, Y EUR à partir du 29e jour»;
2. un en-tête «Indemnités journalières jusqu'au 28e jour» et un en-tête «Indemnités journalières à partir du 29e jour».

En l'état, le problème n'est pas tellement le code HTML à utiliser; c'est plutôt un problème rédactionnel: ce tableau est imbuvable, qu'il soit créé dans Word ou Excel, exporté en PDF, affiché comme image, ou transcrit en HTML. Il est difficilement lisible, et le lecteur devra passer du temps à le décortiquer pour comprendre les informations.
Bonjour,

Merci beaucoup pour ta réponse détaillée.
Je pense que t'es remarques sont très sages, je vais essayer de refaire tout ça, en espérant que ça ne me pose pas de problème de place... et qu'en plus ça ne leur posera pas de problèmes...

merci encore !
Bonsoir,

Je suis assez d'accord avec ce que dit Florent.

Je travaille dans le milieu des assurances. Je manipule des tableaux de garanties quasi quotidiennement et je suis bien incapable de comprendre quoi que ce soit dans ce tableau de synthèse. Smiley eek

Est-ce ton client qui a défini cette présentation ?
A quoi correspond les périodes d'attente ?

Les informations concernant l'indemnisation (le centre du tableau) sont mélangées avec les données définissant les montants de cotisation (le bas du tableau).

Tu devrais, comme l'a suggérer Florent, séparer les franchises en deux blocs de garanties distincts et sortir également les données définissant les cotisations pour en faire encore deux tableaux qui marcheraient de pair avec les deux tableaux de franchises.

Bon courage
Salut, et merci pour ton message.

Oui le client m'a envoyé ce tableau ainsi, mais bon après je pense qu'il ne sera pas réticent à ce que j'en améliore la lecture... ce n'est de toute façon pas mon contact dans l'organisation qui va valider le contenu... mais ses supérieurs qui ne vont voir le projet qu'une fois achevé... (mercredi :s)

Donc le problème pour moi va êre surtout le timing (enfin ça devrait quand même aller, c'est le seul tableau vraiment complexe) et le fait que j'aimerai limiter le contenu afin d'éviter un scroll qui n'apparaitrait au final que sur cette page (le contenu est dans un div avec un attribut overflow: auto;)

Pour l'instant j'ai fait ça :
http://graphsite.free.fr/tableau2.png
Est-ce vraiment plus lisible ?

Merci beaucoup pour votre aide en tout cas, c'est bien sympa !
Je trouve que les délimitations de tes zones ne sont pas assez marquée, on se perd car on arrive pas tout de suite à comprendre que c'est deux tableaux.

Je te conseillerai de foncer tes lignes
En passant:

table {empty-cells: hide;}

Ne fonctionne pas avec tous les navigateurs, mais ça peut être pas mal. Smiley smile
Sujet clos
Aller à