Tableau ou CSS ?

Bonjour,

Pardon pour ce titre un peu provocateur. J'aimerais avoir votre avis, svp.

Je cherche à obtenir la mise en page suivante :
http://nsa30.casimages.com/img/2012/07/01/1207010731125669.png

Je peux obtenir le résultat en CSS grâce au code suivant :
http://nsa30.casimages.com/img/2012/07/01/120701073150886252.png

...ou en faisant un bon vieux tableau avec des <td> et des <tr>

Concrètement, ça ressemble à un tableau, donc je pourrais utiliser un tableau en HTML. Mon code utilise déjà pas mal de balises CSS pour sa mise en page. Je ne sais pas si je dois choisir le positionnement CSS ou un tableau pour mettre en forme mes données.


Merci !!!

bonjour,

effectivement, ce sont des données/infos que tu peut 'ranger' dans un tableau.

++

Mais que vaut-il mieux faire ?

Le poids du code est à peu près équivalent et au niveau du référencement, ça ne doit pas changer grand-chose...

Au niveau propreté du code, vaut-il mieux faire tout CSS ?



Merci

Salut,

Un tableau est aussi (voir plus) cohérent et propre que ton imbrication de div.

Il n'est pas interdit d'utiliser des tableaux, même pour la mise en page, la seul contre indication c'est imbriquer des tableaux dans des tableau dans des tableaux.

Dans ton exemple CSS, la solution sémantiquement correct serai:

<div class="container">
  <div class="gauche"></div>
  <ul class="droite">
    <li>Cuisine</li>
    <li>Salle de bain</li>
    <li>Salle a manger</li>
  </ul>
</div>

les élément UL, OL et DL sont fait pour représenter une liste.
Modifié par JJK801 (01 Jul 2012 - 20:50)

Salut,

JJK801 a écrit :
Dans ton exemple CSS, la solution sémantiquement correct

Désolé ; mais, imagine que la gauche et la droite changent de camp.
Modifié par Victor BRITO (01 Jul 2012 - 20:55)

@Victor BRITO: pas compris, tu parle de Eric Besson? ;P

Si tu parle du fait de nommer "gauche" et "droite" les classes, c'est vrai mais je voulais rester cohérent avec son exemple.

Bonsoir,
soit un tableau (sans oublier d'inclure le titre (utilisation) dans une cellule d'en-tête th (et non un td) et avec l'attribut scope (en HTML4).

Ou alors un titre Hn + UL (ou OL si c'est classé par ordre alphabétique)
Modifié par Hermann (01 Jul 2012 - 23:53)

J’aurais bien proposé dl dt dd moi.

Moi je suis d'accord avec JJK801, une div pour le contenu de gauche, et un UL (ou une autre div mais un UL est plus approprié, en + sa a des puces) pour le contenue de droite , la liste.

Hermann a écrit :
Bonsoir,
soit un tableau (sans oublier d'inclure le titre (utilisation) dans une cellule d'en-tête th (et non un td) et avec l'attribut scope (en HTML4).

Ou alors un titre Hn + UL (ou OL si c'est classé par ordre alphabétique)

Idem.

Vincent Valentin a écrit :
J’aurais bien proposé dl dt dd moi.

En HTML5 (dans sa nouvelle définition de cet élément) pourquoi pas effectivement, mais je suis pas sûr que ça soit encore bien exploité par un lecteur d'écran ou un robot d'indexation.
Pour une définition il y a Google define mais ça reste limité à la définition HTML4 de l'élément.

Vincent Valentin a écrit :
J’aurais bien proposé dl dt dd moi.

Quel est l'intérêt? J'utilise moi aussi ces balises trop souvent oubliées mais dans un contexte de terme <> définition, en dehors de ce contexte, je saisi mal l'intérêt.

Un autre usage intéressant aussi, c'est pour les CHAT, je met le pseudo en dt et le message en dd.

JJK801 a écrit :


Quel est l'intérêt? J'utilise moi aussi ces balises trop souvent oubliées mais dans un contexte de terme &lt;&gt; définition, en dehors de ce contexte, je saisi mal l'intérêt.

HTML5 redéfinit cet élément en élargissant à d'autres cas de figures, d'ailleurs n'est plus une liste de définitions mais une liste de descriptions.
Après évidemment comme je le disais dans mon message précédent, il vaut voir
quel est l’intérêt pratique actuel de son utilisation au regard du couple titre/liste ou tableau.
Modifié par Hermann (03 Jul 2012 - 11:11)

gc-nomade a écrit :
effectivement, ce sont des données/infos que tu peut 'ranger' dans un tableau

Bof, non. À partir du moment où tu peux pas mettre d'en-têtes de colonne pertinents et dépassant un truc ultra-générique comme «titre / valeur», c'est pas vraiment un tableau de données.

JJK801 a écrit :
Un tableau est aussi (voir plus) cohérent et propre que ton imbrication de div.

Toujours pas.

Vincent Valentin a écrit :
J’aurais bien proposé dl dt dd moi.

Non plus: sémantique à l'envers. (Avec DL ce sont les DD qui décrivent les DT; ici «salle de bain» n'est pas une description du terme «utilisation».)

Bon, tout ça n'est pas super important, mais la structure à peu près adaptée ici c'est titre HN + contenu. Quant à la mise en page, ça se gèrera effectivement avec CSS et pas avec un tableau (ce qui n'est pas une raison pour virer les tableaux quand le contenu demande un tableau, bien sûr). Si ça demande de rajouter des DIV (dans une mesure raisonnable) pour obtenir la mise en page souhaitée, ben on le fait, justement les DIV (et SPAN) sont faits pour ça.