5568 sujets

Sémantique web et HTML

Imbrication de tableau

Bonjour,
Je viens vous voir car j'ai besoin de vos lumières.

voici mon problème : j'ai un tableau qui affiche une liste de voitures avec leurs prix, carrosserie, etc
Fiat Panda
------------
Toyota Aygo
------------
Etc
Etc

Et quand on clique sur une des voitures, on obtient toutes les finitions de la voiture donc un nouveau tableau et j'aimerais imbriquer ce tableau sous la ligne correspondante . Suis-je clair ?
------------
Fiat Panda
------------
Fiat Panda 1
-----------
Fiat Panda 2
-----------
Fiat Panda 3
------------
Toyota Aygo
------------
Etc
Etc

Et je bloque depuis ce matin, je sais pas comment faire ?

Merci. Smiley smile
Je crois que l'idéal est de construire ton tableau au complet et selon les normes d'accessibilités. Une fois fait, tu pourrais utilisé le javascript pour masquer certaines portions de ton tableau et les afficher selon certains événements.

Donc, les détails de la voiture seraient déjà en place ( déjà imbriqués ) seulement qu'ils seraient visibles ou non selon le cas.

Peux-tu nous donner le code HTML de ton tableau, il y a peut-être d'autres alternatives selon ce que tu veux exactement.
Il y a déjà dans mon tableau, une div (pour l'instant) en display : none qui affichera quand on clique, toutes les finitions du modèle. (ajax) Mais cette div je l'a mettais dans la 1ere cellule de la ligne. voici le rendu :
upload/21512-tableau-pr.png

Et moi j'aimerais bien que ce tableau s'affiche juste en dessous de la ligne!

Possible ou pas ? Smiley biggol
Je crois que non avec l'image que tu as mise, si on veut que ça reste pertinent évidemment.

Si ton exemple est réel, pourquoi ne ferais-tu pas un tableau simple ? Je t'ai fait deux petits exemples.

<table border="0" summary="Liste des voitures européennes">	<caption>Voitures</caption>
	<tr>
		<th id="tab0_C0L0">Voitures</th>
		<th id="tab0_C1L0">Prix</th>
		<th id="tab0_C2L0">Carrosserie</th>
		<th id="tab0_C3L0">Énergie</th>
		<th id="tab0_C4L0">Offre spéciale</th>
		<th id="tab0_C5L0">Cote</th>
	</tr>
	<tr>
		<th id="tab0_C0L1" headers="tab0_C0L0">Citroen - general</th>
		<td id="tab0_C1L1" headers="tab0_C1L0 tab0_C0L1">Environ 800$</td>
		<td id="tab0_C2L1" headers="tab0_C2L0 tab0_C0L1">4 portes</td>
		<td id="tab0_C3L1" headers="tab0_C3L0 tab0_C0L1">10 mille KM au galon</td>
		<td id="tab0_C4L1" headers="tab0_C4L0 tab0_C0L1"> </td>
		<td id="tab0_C5L1" headers="tab0_C5L0 tab0_C0L1"> </td>
	</tr>
	<tr>
		<th id="tab0_C0L2" headers="tab0_C0L0">Citroen - modele précis</th>
		<td id="tab0_C1L2" headers="tab0_C1L0 tab0_C0L2">22304$</td>
		<td id="tab0_C2L2" headers="tab0_C2L0 tab0_C0L2">4 portes</td>
		<td id="tab0_C3L2" headers="tab0_C3L0 tab0_C0L2">8 mille KM au galon</td>
		<td id="tab0_C4L2" headers="tab0_C4L0 tab0_C0L2">Rétroviseur gratuit</td>
		<td id="tab0_C5L2" headers="tab0_C5L0 tab0_C0L2">9/10</td>
	</tr>
	<tr>
		<th id="tab0_C0L3" headers="tab0_C0L0">Citroen - modele précis</th>
		<td id="tab0_C1L3" headers="tab0_C1L0 tab0_C0L3">65461$</td>
		<td id="tab0_C2L3" headers="tab0_C2L0 tab0_C0L3">2 portes</td>
		<td id="tab0_C3L3" headers="tab0_C3L0 tab0_C0L3">2 mille KM au galon</td>
		<td id="tab0_C4L3" headers="tab0_C4L0 tab0_C0L3">Essuie-glace 2012</td>
		<td id="tab0_C5L3" headers="tab0_C5L0 tab0_C0L3">15/10</td>
	</tr>
	<tr>
		<th id="tab0_C0L4" headers="tab0_C0L0">Mercedez - general</th>
		<td id="tab0_C1L4" headers="tab0_C1L0 tab0_C0L4">Environ 100800$</td>
		<td id="tab0_C2L4" headers="tab0_C2L0 tab0_C0L4">4 portes</td>
		<td id="tab0_C3L4" headers="tab0_C3L0 tab0_C0L4">20 mille KM au galon</td>
		<td id="tab0_C4L4" headers="tab0_C4L0 tab0_C0L4"> </td>
		<td id="tab0_C5L4" headers="tab0_C5L0 tab0_C0L4"> </td>
	</tr>
	<tr>
		<th id="tab0_C0L5" headers="tab0_C0L0">Mercedez - modele précis</th>
		<td id="tab0_C1L5" headers="tab0_C1L0 tab0_C0L5">12234556$</td>
		<td id="tab0_C2L5" headers="tab0_C2L0 tab0_C0L5">4 portes</td>
		<td id="tab0_C3L5" headers="tab0_C3L0 tab0_C0L5">40 mille KM au galon</td>
		<td id="tab0_C4L5" headers="tab0_C4L0 tab0_C0L5">Prestige en prime</td>
		<td id="tab0_C5L5" headers="tab0_C5L0 tab0_C0L5">8.5/10</td>
	</tr>
</table>



<table border="0" summary="Liste des voitures européennes">	<caption>toutes les voitures </caption>
	<tr>
		<th id="tab0_C0L0"> </th>
		<th id="tab0_C1L0">Prix</th>
		<th id="tab0_C2L0">Carrosserie</th>
		<th id="tab0_C3L0">Énergie</th>
		<th id="tab0_C4L0">Offre spéciale</th>
		<th id="tab0_C5L0">Cote</th>
	</tr>
	<tr>
		<th id="tab0_C0L1" colspan="5" headers="tab0_C0L0 tab0_C1L0 tab0_C2L0 tab0_C3L0 tab0_C4L0">Citroen - General</th>
	</tr>
	<tr>
		<td id="tab0_C0L2" headers="tab0_C0L0 tab0_C0L1"> </td>
		<td id="tab0_C1L2" headers="tab0_C1L0 tab0_C0L1">100$</td>
		<td id="tab0_C2L2" headers="tab0_C2L0 tab0_C0L1">4 portes</td>
		<td id="tab0_C3L2" headers="tab0_C3L0 tab0_C0L1">10 km au galon</td>
		<td id="tab0_C4L2" headers="tab0_C4L0 tab0_C0L1">miroir</td>
		<td id="tab0_C5L2" headers="tab0_C4L0 tab0_C0L1">9/10</td>
	</tr>
	<tr>
		<th id="tab0_C0L3" headers="tab0_C0L0 tab0_C0L1">Citroen précis</th>
		<td id="tab0_C1L3" headers="tab0_C1L0 tab0_C0L1 tab0_C0L3">5400$</td>
		<td id="tab0_C2L3" headers="tab0_C2L0 tab0_C0L1 tab0_C0L3">3 portes</td>
		<td id="tab0_C3L3" headers="tab0_C3L0 tab0_C0L1 tab0_C0L3">3 km au galon</td>
		<td id="tab0_C4L3" headers="tab0_C4L0 tab0_C0L1 tab0_C0L3">électrique</td>
		<td id="tab0_C5L3" headers="tab0_C5L0 tab0_C0L1 tab0_C0L3">5/10</td>
	</tr>
	<tr>
		<th id="tab0_C0L4" headers="tab0_C0L0 tab0_C0L1">Citroen précis 2</th>
		<td id="tab0_C1L4" headers="tab0_C1L0 tab0_C0L1 tab0_C0L4">2200$</td>
		<td id="tab0_C2L4" headers="tab0_C2L0 tab0_C0L1 tab0_C0L4">2 portes</td>
		<td id="tab0_C3L4" headers="tab0_C3L0 tab0_C0L1 tab0_C0L4">20 km au galon</td>
		<td id="tab0_C4L4" headers="tab0_C4L0 tab0_C0L1 tab0_C0L4">pneus</td>
		<td id="tab0_C5L4" headers="tab0_C5L0 tab0_C0L1 tab0_C0L4">3/10</td>
	</tr>
</table>


J'espère que ça suffira à t'aider sinon comme je disais, je crois pas possible de faire exactement comme tu veux.
Pas besoin de tableaux imbriqués. Tu peux essayer la structure suivante (tableau plus complexe que celui proposé par Sorano) :
<table summary="Tableau des modèles de voiture et deleurs finitions disponibles">
  <caption>Modèles de voiture</caption>
  <thead>
    <tr>
      <th id="voiture">Voiture</th>
      <th id="prix">Prix</th>
      <th id="carrosserie">Carrosserie</th>
      <th id="energie">Énergie</th>
      <th id="prix-kidioui">Prix Kidioui</th>
      <th id="fiche">Fiche</th>
      <th id="enchere">Lancer l'enchère</th>
      <th id="offre-speciale">Offre spéciale</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="citroen-c1" colspan="8">Citroën C1</th>
    </tr>
    <tr>
      <td headers="voiture citroen-c1">Citroën C1 1.0i</td>
      <td headers="prix citroen-c1">8 700 &#8364;</td>
      <td headers="carrosserie citroen-c1">3 portes</td>
      <td headers="energie citroen-c1">Essence</td>
      <td headers="prix-kidioui citroen-c1"><strong lang="en">Not yet</strong></td>
      <td headers="fiche citroen-c1"></td>
      <td headers="enchere citroen-c1"></td>
      <td headers="offre-speciale citroen-c1"></td>
    </tr>
    <tr>
      <td headers="voiture citroen-c1">Citroën C1 1.0i</td>
      <td headers="prix citroen-c1">9 000 &#8364;</td>
      <td headers="carrosserie citroen-c1">5 portes</td>
      <td headers="energie citroen-c1">Essence</td>
      <td headers="prix-kidioui citroen-c1"><strong lang="en">Not yet</strong></td>
      <td headers="fiche citroen-c1"></td>
      <td headers="enchere citroen-c1"></td>
      <td headers="offre-speciale citroen-c1"></td>
    </tr>
    <!-- Et ainsi de suite pour la Citroën C1 -->
  </tbody>
  <tbody>
    <tr>
      <th id="ford-ka" colspan="8">Ford Ka</th>
    </tr>
    <tr>
      <td headers="voiture ford-ka">Fork Ka</td>
      <td headers="prix ford-ka">8 700 &#8364;</td>
      <td headers="carrosserie ford-ka">3 portes</td>
      <td headers="energie ford-ka">Essence</td>
      <td headers="prix-kidioui ford-ka"><strong lang="en">Not yet</strong></td>
      <td headers="fiche ford-ka"></td>
      <td headers="enchere ford-ka"></td>
      <td headers="offre-speciale ford-ka"></td>
    </tr>
    <!-- Et ainsi de suite pour la Ford Ka -->
  </tbody>
  <!-- Et ainsi de suite -->
</table>

Si certains éléments et attributs employés dans mon exemple de code te sont inconnus, je te conseille vivement d'aller au tableau. Smiley cligne En résumé, les attributs id et headers permettent d'associer les cellules de données (td) aux cellules d'en-tête correspondants (th), ce qui permet d'améliorer l'accessibilité du tableau aux utilisateurs de lecteur d'écran. Quant aux éléments thead et tbody, ils permettent de structurer les en-têtes et les corps de tableau.

Après, pour afficher ou masquer les lignes correspondant aux finitions de chaque modèle de voiture, du JavaScript fera très bien l'affaire.
Modifié par Victor BRITO (28 Jan 2010 - 17:22)
Le truc, c'est que j'ai besoin de deux tableaux différents.
Le premier pour afficher tous les modèles (prix, offres, fiche, encheres) et le deuxième pour afficher toutes les finitions du modèle (carrosserie, prix, offres, fiche finition, encheres).

J'ai modifié un peu le code pour obtenir ce que je voulais mais est-ce correct ?

<table summary="Tableau des modèles de voiture et deleurs finitions disponibles"> 
  <caption>Modèles de voiture</caption> 
  <thead>
	<tr>
		<th id="voiture">Voiture</th>
		<th id="carrosserie">Carrosserie</th>
		<th id="energie">energie</th>
		<th id="prix">Prix</th>
		<th id="prix-kidioui">Prix Kidioui</th> 
		<th id="fiche">Fiche</th> 
		<th id="enchere">Lancer l'enchère</th> 
		<th id="offre-speciale">Offre spéciale</th> 
	</tr>
	
  </thead> 
  <tbody> 
    <tr> 
      <th id="citroen-c1">Citroën C1</th>
	  <th>5 portes</th>
	  <th>Essence</th>
	  <th>9000-10000 euros</th>
	  <th>8900 euros</th>
	  <th>Pas de fiche</th>
	  <th>Pas d'enchere</th>
	  <th>Pas d'offre</th>
    </tr> 
	</tbody>
	<thead>
	<tr> 
      <th id="voiture">Voiture</th> 
      <th id="prix">Prix</th> 
      <th id="prix-kidioui">Prix Kidioui</th> 
      <th id="fiche">Fiche</th> 
      <th id="enchere">Lancer l'enchère</th> 
      <th id="offre-speciale">Offre spéciale</th> 
    </tr> 
	</thead>
	<tbody>
    <tr> 
      <td headers="voiture citroen-c1">Citroën C1 1.0i</td> 
      <td headers="prix citroen-c1">8 700 &#8364;</td> 
      <td headers="prix-kidioui citroen-c1"><strong lang="en">Not yet</strong></td> 
      <td headers="fiche citroen-c1"></td> 
      <td headers="enchere citroen-c1"></td> 
      <td headers="offre-speciale citroen-c1"></td> 
    </tr> 
    <tr> 
      <td headers="voiture citroen-c1">Citroën C1 1.0i</td> 
      <td headers="prix citroen-c1">9 000 &#8364;</td> 
     <td headers="prix-kidioui citroen-c1"><strong lang="en">Not yet</strong></td> 
      <td headers="fiche citroen-c1"></td> 
      <td headers="enchere citroen-c1"></td> 
      <td headers="offre-speciale citroen-c1"></td> 
    </tr> 
    <!-- Et ainsi de suite pour la Citroën C1 --> 
  </tbody> 
  <tbody> 
    <tr> 
      <th id="ford-ka">Ford Ka</th>
	  <th>5 portes</th>
	  <th>Essence</th>
	  <th>9000-10000 euros</th>
	  <th>8900 euros</th>
	  <th>Pas de fiche</th>
	  <th>Pas d'enchere</th>
	  <th>Pas d'offre</th>
    </tr> 
    <tr> 
      <td headers="voiture ford-ka">Fork Ka</td> 
      <td headers="prix ford-ka">8 700 &#8364;</td> 
      <td headers="prix-kidioui ford-ka"><strong lang="en">Not yet</strong></td> 
      <td headers="fiche ford-ka"></td> 
      <td headers="enchere ford-ka"></td> 
      <td headers="offre-speciale ford-ka"></td> 
    </tr> 
    <!-- Et ainsi de suite pour la Ford Ka --> 
  </tbody> 
  <!-- Et ainsi de suite --> 
</table>

Modifié par YoOp (28 Jan 2010 - 18:00)
Bonne pratique Opquast V2.0 adoptée: ne jamais imbriquer de tableaux.

C'est imbittable (code).

C'est incompréhensible (utilisateurs).

C'est toujours remédiable par une conception plus claire et plus évidente des contenus.
Ta modification, YoOp, rend le code invalide : il ne peut y avoir qu'un seul élément thead par tableau, outre que la valeur de chaque attribut id doit être unique.
YoOp a écrit :
Le truc, c'est que j'ai besoin de deux tableaux différents.

Pourquoi deux tableaux différents ?
Sujet clos
Aller à