Sémantique d'un catalogue produit / Le mystère de la balise TR

Bonjour à tous,

Cela fait un moment que cette question m’obsède : Sur un site E-commerce quelle est la sémantique correcte pour un catalogue produit dans un document XHTML ?

Pour une mise en page et des données simples, les tableaux me semblent plus qu’appropriés puisque l’on a à faire à des données tabulaires.

Exemple :
_____________________________
| nom produit | image | prix | etc.|
|___________|______|____|____|
| nom produit | image | prix | etc.|
|___________|______|____|____|
| nom produit | image | prix | etc.|
|___________|______|____|____|
| nom produit | image | prix | etc.|
|___________|______|____|____|

Mais les designs des sites sont de plus en plus élaborés et l’aspect tableau du catalogue tend à disparaître. Donc j’utilise le plus souvent des DIV ou des LI pour pouvoir obtenir le résultat visuel que je veux. Le problème est que en mode texte le contenu ne m’a pas l’air très bien structuré.

exemple (affichez le avec puis sans les CSS pour voir où est mon problème)

Hier j’ai eu ce qui m’a semblé sur le coup être une idée de génie ! Utiliser les TR des tableaux comme on utilise les DIV avec les CSS (display:block ; float:left ; width:150px ; height:200px par exemple) pour obtenir le résultat suivant :
__________ _________ _________
|produit N1| |produit N2| |produit N3|
|...image...| |...image...| |...image...|
|...prix......| |...prix......| |...prix......|
|...etc......| |...etc......| |...etc......|
|________||________| |________|

/*EDIT : l'effet super stylé de mise en page ASCI ayant lamentablement échoué (loser!) voila une petite explication :
Le but c'est de faire avec un tableau la même chose que quand on fait un menu horizontale à partir d'une liste à puce avec un 'float: left' sur les LI. */

Ca marche parfaitement sous FireFox & Co : exemple

Seulement y’a un hic, IE refuse de dimensionner la balise TR. Au début j’ai cru à une mauvaise blague du gang à Bill mais après avoir relu les recommandations du w3c il semblerait que WIDTH ne soit pas applicable à la balise TR.

Alors mes questions sont les suivantes :
1/ y’a-t-il un hack pour passer ce problème ou est ce que je dois oublier cette idée d’utiliser les tableaux ?
2/ y’a-t-il une sorte de modèle de mise en page « standard » pour les catalogues produit qui respecte la sémantique « tableau » ?

merci d'avance de votre aide
Modifié par Mike [RKL] (17 Aug 2006 - 21:23)

Hello,

point de hack malheureux ! On ne t'a pas dit que ce mot était banni du forum ?

Plaisanterie mise à part, tu veux sans doute parler de la largeur des td (cellules) et non des tr représentant les lignes du tableau... Dans ce cas, tu peux définir la largeur de tes colonnes en définissant un colgroup et en affectant la largeur sur les balises col...

<table summary="description du tableau">
<colgroup>
<col id="col1" />
<col id="col2" />
<col />
</colgroup>
<tr><th>...</th><th>...</th><th>...</th></tr>
<tr><td>...</td><td>...</td><td>...</td></tr>
</table>

Modifié par koala64 (17 Aug 2006 - 21:00)

Salut koala64, merci de ton aide.

alors je test vite fait ton code pour voir le rendu mais je crois pas que l'on se soit compris. Je parle bien des TR.

Le but c'est de faire avec un tableau la même chose que quand on fait un menu horizontale à partir d'une liste à puce avec un 'float: left' sur les LI. En gros on pourrai faire la comparaison suivante :

Ul = TABLE = le conteneur qui définie la zone à exploiter.
LI = TR = les items de ce conteneur avec un float left pour l'alignement les un par rapport aux autres.

les TD ne sont plus là que pour séparer les données de chaque article de manière ordonné.
Modifié par Mike [RKL] (17 Aug 2006 - 21:46)

Dans ce cas, ce n'est pas un tableau qu'il te faut mais bien une liste sans quoi la mise en page de ton tableau n'aurait aucun sens (si tant est que çà serait faisable...)

a écrit :
Le problème est que en mode texte le contenu ne m’a pas l’air très bien structuré.

exemple (affichez le avec puis sans les CSS pour voir où est mon problème)

Ce n'est pas un défaut de structure dont tu parles mais de mise en page...
Modifié par koala64 (17 Aug 2006 - 21:32)

Pour la faisabilité je crois aussi que c’est mort (cf : le recommandation du w3c).

En faite ce que me gène dans les listes à puces c’est qu'en mode texte, si le contenu est un peu fourni, ça ressemble à rien.

Sur un autre site de e-commerce j’avais fait le catalogue avec deux listes à puces imbriquées. La première contenait l’ensemble du catalogue, la seconde le détail de chaque article.

En mode CSS j’arrivai à mes fins. Mais en mode texte je trouve que ça rend la chose un peu bordélique (genre longues listes qui n’en finisse plus avec des photos, liens, textes, prix, etc.)

D’où mes interrogations sur la sémantique correcte de ce genre de contenu.

koala64 a écrit :
Ce n'est pas un défaut de structure dont tu parles mais de mise en page...

tu veux dire au niveau du html ?

Personnellement, je n'aurais rien contre le tableau dans ce cas précis.
Une ligne par produit, et dans les colonnes : nom, image, prix, etc. le type de données présentées ne changent pas d'une ligne à l'autre c'est ce qui est important.
Donc, préférence personnelle au tableau plutôt qu'à la liste. ON a bien affaire à des données structurées

Rappelons au passage qu'il est plus facile dans un lecteur d'écran de parcourir un long tableau plutôt qu'une longue liste.
Pour vous en convaincre, démarrez jaws et utilisez les combinaisons Ctrl+Alt+Flèches. Avec ça, je peux parcourir le tableau de nom en nom ... avec une liste je dois me farcir les autres informations à chaque ligne.

Comme quoi, les tableaux, ça a du bon, quand on sait les utiliser correctement.

Je suis plutôt d'accord.

Maintenant, la liste ne me semble proscrite pour autant... Si çà ne tient qu'à moi, je garde le tableau mais si on souhaite obtenir le comportement d'une liste ben je ne vois pas d'autres moyen d'y arriver...

Ici, on a à faire à un catalogue avec un contenu qui est clairement tabulaire...

a écrit :
tu veux dire au niveau du html ?

On pourrait dire que c'est une liste d'article, ce pourquoi j'ai dit çà mais vu les autres informations, le tableau est préférable à moins de reporter ces infos supplémentaires ailleurs...
Modifié par koala64 (17 Aug 2006 - 22:19)