Bonjour,

Je me permets de solliciter votre avis sur la mise en forme de mes tableaux.

Voici le code disons "générique" s'y rapportant :

Html :
<table summary="Les tarifs de groupes">
<caption>Tarifs de groupes toutes saisons</caption>
<tfoot>
	<tr>
		<td colspan="2">*Inclus la visite guidée du musée de la chapellerie.</td>
	</tr>
</tfoot>
<tbody>
	<tr>
		<th class="type">Type</th>
    	<th>PRIX</th>
	</tr>
	<tr>
		<td>Visite libre du musée</td>
		<td class="prix">3,80 &euro; </td>
	</tr>
	<tr>
		<td>Visite guidée du musée</td>
		<td class="prix">4,80 &euro; </td>
	</tr>
	<tr>
		<td>Visite Musée et chantier de fouilles</td>
		<td class="prix">5,80 &euro; </td>
	</tr>
	<tr>
		<td>Club de 3ème Age*</td>
		<td class="prix">5,30 &euro; </td>
	</tr>
</tbody>
</table>


CSS :

table {
	width: 100%;
}
caption {
	margin:0; padding:0 0 10px 0;
}
caption.marge {
	margin:0; padding:20px 0 10px 0;
}
th, tfoot {
	background-color: #D0D5D1;
}
tfoot {
	text-align: right;
}
td.gauche {
	text-align: left;
}
th.type {
	width: 70%;
}
td.prix {
	text-align: right;
}


Vous pouvez trouver ces tableaux en ligne a ces adresses :
Premier et second tableaux
Troisième tableau
Quatrième et cinquième tableaux

En vous remerciant
Modifié par Mickael.D (21 Aug 2005 - 15:40)
Tu pourrais rajouter les headers, ça permet de faire le lien entre le th et les td. Ex :

<table summary="résumé du tableau" id="tablo">
  <caption>Caption du tableau</caption>
  <thead>
   <tr>
    <th id="legende_1">Légende 1</th>
    <th id="legende_2">Légende 2</th>
    <th id="legende_3">Légende 3</th>
   </tr>
  </thead>
  <tfoot>
   <tr>
    <th>Légende basse 1</th>
    <th>Légende basse 2</th>
    <th>Légende basse 3</th>
   </tr>
  </tfoot>
  <tbody>
   <tr>
    <td class="gauche" headers="legende_1">
     1-1
    </td>
    <td class="gauche" headers="legende_2">
     1-2
    </td>
    <td class="gauche" headers="legende_3">
     1-3
    </td>
   </tr>
   <tr>
    <td class="gauche" headers="legende_1">
     2-1
    </td>
    <td class="gauche" headers="legende_2">
     2-2
    </td>
    <td class="gauche" headers="legende_3">
     2-3
    </td>
   </tr>
  </tbody>
</table>

(exemple généré à la va-vite avec ça : http://dominique.hoffmann.free.fr/GT/ )

Si je ne me trompe pas, c'est un petit peu mieux de rajouter les headers... mais c'est déjà très bien ainsi !
Eventuellement, tu pourrais mettre ta ligne th dans un thead (entête de tableau)

a+
Merci pour ta réponse

Pour les thead, je pensé les avoirs mis Smiley fou . C'est en voyant ta réponse que ca as fait tilt. Je vais corriger ca.

(Par contre, je ne saisie pas l'utilité et la subtilité des "headers". Enfin j'ai bien une idée, spécifier a quel titre de colonne corespond la cellule (?), mais dans quel circonstance. Il me semble l'avoir lu quelque part.)

Trouvé : référentiel ADAE

Que signifie :"vision linaire de ce tableau" ?
Un tableau en ligne ?! Dans quel circonstance ?
Bonjour Mickael.D,

Dans différents cas, le navigateur utilisé ne pourra pas rendre le tableau... disons sous forme de tableau, avec la disposition prévue en lignes et en colonnes qui permet de comprendre comment l'information est organisée.

Le tableau est alors "linéarisé", c'est à dire que son contenu sera présenté dans l'ordre linéaire du code HTML, exactement comme si chaque balise <tr> et <td> avait été remplacée par une balise <div>.

Pour en avoir un aperçu rapide, on peut utiliser par exemple, l'extension Fang dans Firefox, ou le style "désactiver les tableaux" dans Opera, ou appliquer à n'importe quel tableau la CSS suivante :

table, caption, tr, thead, tfoot, tbody, th, td {
	display: block !important;
	float: none !important;
	max-width: none !important;
	min-width: 0px !important;
	width: auto !important;
	max-height: none !important;
	min-height: 0px !important;
	height: auto !important;
}


Cette linéarisation se produit en particulier :
- quand on "écoute" un tableau lu par un navigateur vocal ou un lecteur d'écran
- quand on "lit" un tableau sur une tablette braille
- quand on affiche un (large) tableau sur l'écran réduit d'un mobile

Dans ce cas, l'information donnée par la position d'une cellule dans une ligne et une colonne est donc perdue. Les headers permettent, dans une certaine mesure et dans certaines applications, de retrouver cette information.
Bonjour laurent merci pour ces précisions.

Je vais tester la CSS que tu proposes pour me rendre compte de cette linéarisation.

a écrit :

... . Les headers permettent, dans une certaine mesure et dans certaines applications, de retrouver cette information.


C'est a dire ? Faut il et peut on, faire quelquechose, dans le cas ou les headers ne le permettent pas ?
Merci Laurent pour cette précision, je ne l'aurais pas mieux dit !

En fait, on va dire que les headers sont un petit plus dans ce cas de linéarisation, mais ce n'est pas une solution miracle. Quant à trouver une autre solution, je ne sais pas...
En cherchant en peu plus sur les "headers" il apparait que ceux ci sont utilisés dans des tableaux plus complexe et que pour des tableaux simple, l'attribut "scope" est plus adéquat.
source de cette information

Ce qui donnerai après correction.
 
<table summary="Les tarifs de groupes">
<caption>Tarifs de groupes toutes saisons</caption>
<thead>
<tr>
<th class="type" scope="col">Type</th>
<th scope="col">PRIX</th> (ou <th colspan="2" scope="colgroup">Prix</th> pour mes autres tableaux)
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">*Inclus la visite guidée du musée de la chapellerie.</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Visite libre du musée</td>
<td class="prix">3,80 &euro; </td>
</tr>
<tr>
<td>Visite guidée du musée</td>
<td class="prix">4,80 &euro; </td>
</tr>
<tr>
<td>Visite Musée et chantier de fouilles</td>
<td class="prix">5,80 &euro; </td>
</tr>
<tr>
<td>Club de 3ème Age*</td>
<td class="prix">5,30 &euro; </td>
</tr>
</tbody>
</table>


A votre avis ?
Je m'auto réponds Smiley smile

Bien que l'attribut "scope" est, d'une certaine manière, la même fonctionne que l'attribut "headers", celui-ci (scope) est moins précis.
Il est donc préférable d'utiliser l'attribut "headers".

Déduction faites suite a la lecture de ce sujet

Dans mon cas, sur 2 de mes 3 pages utilisant des tableaux, je me retrouve devant le soucis de l' "id" unique. En effet, sur ces 2 pages j'utilise 2 tableaux ayant chacun les même titres mais pas le même contenu.
Je vais donc repenser mes tableaux.

Merci pour vos réponses.

Un petit [Résolu] ?! Oui M'sieur ! Smiley smile
Merci pour la confirmation Laurent.

Pour le lien, je pense comprendre les grandes lignes, mais je ne suis pas très doué en anglais malheureusement Smiley confused . Je vais sortir le dico Smiley smile .

je vais essayer de faire au mieux, là ils sont sur papier plus qu'a retranscrire.