[Structures] tableau ou div ou les deux ?

**le Sam Oct 04, 2008 13:15**

Bonjour,

J'aurais besoin de vos conseils avisés...
Étant qu'un petit débutant, je suis face au problème de ..
Les "tableaux html", c'est bien ou pas pour le REF?

Voici 2 sortent de structures que j'ai testé:

- Tableau + Div internes.

Code: Tout sélectionner: <table><body><tr><td><div></div></td></tr></body></table>

Ou

-Div seules.

Code: Tout sélectionner: <div id=".."><div class="...><h2></h2><a href=".."></a><p></p></div></div>

Voici ma 1ere structure en tableau + div :

Code: Tout sélectionner: <div style="margin-left:15px; margin-right:15px;border-left: 1px solid #d957af;border-right: 1px solid #d957af;border-bottom: 1px solid rgb(195, 196, 196);"> <table> <tbody><tr> <td><div class="Boite"> <div class="Boite-separation"> <div class="Boite-image"><a href="http://www.mondomaine.com/repertoire"><img src="http://www.mondomaine.com/images/monimage.jpg" alt="mon image" /></a> </div> <p class="Boite-text-url"><a href="http://www.mondomaine.com/repertoire" title="Voir le repertoire">Voir le repertoire</a></p> </div> </div> <div style="padding-left: 15px;padding-right: 15px; text-align:left;line-height:15px;"><div style="text-align: center; font-weight: bold;color: #4298e0;text-decoration:underline;"><h2>Le repertoire</h2> </div> <div style="padding-left: 110px;"> Description et blabla sur mon repertoire...etc..etc</div> </td> </tr> </tbody></table></div>

Et voici ma deuxième structure:

Code: Tout sélectionner: <div id="Boites"> <div class="Boites-Disposition"> <div class="Boite"> <div class="Boite-separation"> <div class="Boite-image"><a href="http://www.mondomaine.com/repertoire"><img src="http://www.mondomaine.com/images/monimage.jpg" alt="mon image" /></a> </div> </div> <p class="Boite-text-url"><a href="http://www.mondomaine.com/repertoire" title="Voir le repertoire">Voir le repertoire</a></p> </div> </div> <div class="Boite-description"><h2>Le repertoire</h2> <p>Description et blabla sur mon repertoire...etc..etc</p> </div> </div>

La quelle des deux est mauvaise?
La version tableau html + est vraiment bad?
(j'ai déjà commencer un bout de travail via la première version et ça me chagrine un peu de tout refaire lol,)

Merci de vos réponses :wink:

**le Sam Oct 04, 2008 13:35**

Les deux codes sont mauvais :

- Les tableaux + div : tu compliques la structure pour rien, tu ne bénéficies pas des vrai possibilités de mise en forme des CSS
- Les div seuls : c'est mieux, mais dans ton exemple tu es pris de divite aigue, il faut alléger tout cela, sans quoi pourquoi passer aux div, autant rester aux tableaux.

**le Sam Oct 04, 2008 13:37**

DadouDuck a écrit:Les deux codes sont mauvais :

- Les tableaux + div : tu compliques la structure pour rien, tu ne bénéficies pas des vrai possibilités de mise en forme des CSS
- Les div seuls : c'est mieux, mais dans ton exemple tu es pris de divite aigue, il faut alléger tout cela, sans quoi pourquoi passer aux div, autant rester aux tableaux.

Je te remercie de ta suggestion,
Mais aurait-tu une exemple concret a me proposer stp
(sans quoi, si j'avais pu "alléger" moi-même je l'aurais fais

)

**le Sam Oct 04, 2008 14:19**

PS- en quoi les tableau sont nuisibles??

le robots ne lis pas le contenu?

**le Sam Oct 04, 2008 14:59**

DadouDuck a écrit:Les deux codes sont mauvais :.

Un site en table n'est pas plus mauvais, en matière de référencement, tant que tu "contrôles" la densité (voulue, ou souhaitable selon les avis en la matière) du code par rapport au contenu texte..

Sinon, les tables sont adaptées à des données tabulaires dans un site en div.

il y aura toujours des afficionados du fullcss pour te dire qu'il n'y a rien de mieux que le 100% div

**le Sam Oct 04, 2008 15:26**

abouvard a écrit:il y aura toujours des afficionados du fullcss pour te dire qu'il n'y a rien de mieux que le 100% div

Oui, mais tu peux être full css et mettre des tables.

Bah oui, un tableau c'est un tableau. Si tu doit mettre une feuille de compte, tu le fais avec des table, pas des div.

**le Sam Oct 04, 2008 18:08**

enfaite pour les coups mes <table> servent plus a mettre une image et une description a cette image
voici un exemple concret de ce que je souhaite faire

ce genre de fenêtre sera suivant les pages du site soit dans le contenu principale soit sur le coté en barre de navigation façon blog

d'après vous alors??

table ou full div?
(et ma facon full div on me dit quelle n'est pas bonne :oops:

du coup le choix est leger pour moi....
soit table (niveau ref ca a pas l'air top)
soit full div (mais on me dit que mon full div est pourrit :oops:

du coup j'hésite et j attend vos propos pour essayer de trancher

**le Sam Oct 04, 2008 19:10**

Met les en div si tu n'en à pas 50 à afficher à chaque fois.

Et jete un oeil ici : http://web.archive.org/web/200504110953 ... ue-les-div

**le Sam Oct 04, 2008 20:08**

Full div

<div class="leblock">
<p>le texte en float right>
<img src machin>
<p class="legende">La légende</p>
</div>

En mettant un clearfloat dans le css "le block"

Léger et robuste.

**le Sam Oct 04, 2008 20:35**

salut Marie-Aude.
J'attendais ton intervention avec impatience
(t'es trop calé

)

voici ou j'en suis /

Code: Tout sélectionner: <div class="menusid-tab"> <div class="theme-box4"> <div class="theme-box-inner4"> <div class="theme-thumbnail4"><a href="http://www.mondomaine.com/"><img src="http://www.mondomaine.com/images/monimage.jpg" alt="mon image" /></a> </div> <p class="theme-name4"><a href="http://www.mondomaine.com/repertoire" title="repertoire">Voir le repertoire</a></p> </div> </div> <div class="menusid-text"><h2>Titre de la legende h2</h2> <p>blablas de legende.</p> </div> </div> <div class="menusid-tab"> <div class="theme-box4"> <div class="theme-box-inner4"> <div class="theme-thumbnail4"><a href="http://www.mondomaine.com/"><img src="http://www.mondomaine.com/images/monimage.jpg" alt="mon image" /></a> </div> <p class="theme-name4"><a href="http://www.mondomaine.com/repertoire" title="repertoire">Voir le repertoire</a></p> </div> </div> <div class="menusid-text"><h2>Titre de la legende h2</h2> <p>blablas de la légende.</p> </div> </div> <div class="menusid-tab-last"> <div class="theme-box4"> <div class="theme-box-inner4"> <div class="theme-thumbnail4"><a href="http://www.mondomaine.com/repertoire"><img src="http://www.mondomaine.com/images/monimage.jpg" alt="mon image" /></a> </div> <p class="theme-name4"><a href="http://www.mondomaine.com/repertoire" title="repertoire">Voir le repertoire</a></p> </div> </div> <div class="menusid-text"><h2>titre legende h2</h2> <p>blablas legende</p> </div> </div> </div>

et voici le css qui va avec

Code: Tout sélectionner: .theme-box4 { /*width: 200px;*/ /*width: 117px;*/ float:left; display: inline; text-align: center; } .theme-box4 * { margin: 0; padding: 0; } .theme-box-inner4 { border: 1px solid #bbbbbb; margin: 0; width: 107px; text-align: center; line-height: 1.1; background: #fafafa; } .theme-thumbnail4 { padding: 1px; margin: 0; text-align: center; border-bottom: 1px solid #bbbbbb; } .theme-thumbnail4 img { display: block; width: 106px; height: 93px; margin: 0 auto; } .theme-box4 { /*width: 200px;*/ /*width: 117px;*/ width: 115px; text-align: center; } .theme-name4 a { border-bottom: 0 none; margin: 0; text-align:justify; font-size:x-small; font-weight:bold; } .theme-name4 a { color: #4298e0; } .menusid-tab { border-left: 1px solid #d957af; border-right: 1px solid #d957af; border-bottom: 1px solid #bbbbbb; width:388px; border-bottom: 1px solid #bbbbbb; margin-left:20px; padding-top:5px; } .menusid-tab-last { border-left: 1px solid #d957af; border-right: 1px solid #d957af; border-bottom: 1px solid #d957af; width:388px; margin-left:20px; padding-top:5px; } .menusid-text p { font-size: 1em; color: #666666; padding-bottom:20px; margin-left:110px; margin-right:1px; } .menusid-tab h2 { text-decoration:underline; } .menusid-tab-last h2 { text-decoration:underline; }

si je laisse ça plus ou moins en état j'ai bon???

**le Sam Oct 04, 2008 21:23**

Tu n'as pas bon

tu peux supprimer quasiment tous les div et n'en garder que deux : celui qui contient l'image et le texte à gauche et celui qui contient "le tout" (image + titre et légende + titre et texte à droite)

Mais tu es en progrès

**le Sam Oct 04, 2008 22:27**

Marie-Aude a écrit:Tu n'as pas bon tu peux supprimer quasiment tous les div et n'en garder que deux : celui qui contient l'image et le texte à gauche et celui qui contient "le tout" (image + titre et légende + titre et texte à droite)

Mais tu es en progrès

Si concrètement tu pouvait me filer un exemple stp
(un truc qui puisse clairement me servir de base car la je vois pas du tout)

C'est difficile par écrit à décrire mais...
enfaite il y a plein de div déjà a cause de mon carrer (box, boite)

je fais un carré avec 4 bords de couleur
une couleur interne un trait séparateur vers le milieu
une image en haut
un anchor url en bas

Donc déjà pour se carrer 4 a 5 div, après pour les encadrer toutes j'ajoute une div "menusid-tab"

Mais sincèrement,
(j'ai un très faible niveau en tout lol)
et je viens de passer 3 jours la dessus
(j'ai commencé par les tableaux)
Donc si tu daigne vouloir me filer un "Format Type", j'en serais plus que ...réjouis!
Par ce que ca :

Code: Tout sélectionner: <div class="leblock"> <p>le texte en float right> <img src machin> <p class="legende">La légende</p> </div>

Sans le css, je vois pas comment le mettre en pratique
Je viens de l'essayer vite fait...
J'ai bien reussi a obtenir un carré avec une image à l'intereur
Mais, pas de séparateur, pas de texte url.... ect
Donc je vais devoir ajouter des div non?
Du coup, au final je risque de me retrouver avec 1 à 2 div de moins que le miens????

RAhhhh!! j'me fais lèche botte hein...
mais si concrètement tu peu me filer un exemple que je copie-colle dans mon dreamweaver...
je comprendrais mieux :oops:

merki tout de même :wink:

**le Lun Oct 06, 2008 13:07**

Relativement facile comme exemple :

Code: Tout sélectionner: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Exemple</title> <style> * { margin : 0px; padding : 0px; } .article { border-style : solid; border-color : #CCC; border-width : 1px 2px 1px 2px; margin-left : 50px; margin-right : 50px; } .article h1 { text-align : center; } .article h1, .article p { margin-left : 150px; border-left : 2px solid #CCC; padding : 2px 10px 0px 10px; } .article p.legende { clear : right; float : left; width : 150px; margin : 0px; padding : 0px; border : none; text-align : center; font-size : 0.8em; } .article p.legende img { border-bottom : 2px solid #CCC; } .clear { clear : both; } </style> </head> <body> <div class="article"> <p class="legende"><img src="http://www.google.fr/intl/fr_fr/images/logo.gif" width="150" height="50" alt="" />Tout voir sur l'article</p> <h1>Le titre de l'article</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam fermentum dui a neque. Mauris ligula purus, venenatis a, venenatis in, mollis id, magna. Etiam aliquet. Duis et mauris. Mauris aliquam ornare leo. Phasellus vehicula, orci vitae euismod eleifend, elit ante malesuada mauris, eget dapibus justo lorem vel est. Cras quis dui et sapien aliquet posuere. Duis quam libero, tempor sit amet, tincidunt eget, lacinia ut, nulla.</p> <p class="clear"> </p> </div> <div class="article"> <p class="legende"><img src="http://www.google.fr/intl/fr_fr/images/logo.gif" width="150" height="50" alt="" />Tout voir sur l'article</p> <h1>Le titre de l'article</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam fermentum dui a neque. Mauris ligula purus, venenatis a, venenatis in, mollis id, magna. Etiam aliquet. Duis et mauris. Mauris aliquam ornare leo. Phasellus vehicula, orci vitae euismod eleifend, elit ante malesuada mauris, eget dapibus justo lorem vel est. Cras quis dui et sapien aliquet posuere. Duis quam libero, tempor sit amet, tincidunt eget, lacinia ut, nulla.</p> <p class="clear"> </p> </div> </body> </html>

**le Lun Oct 06, 2008 14:22**

la peinture en div c'est bien difficile
mais c'est bien plus beau que la peinture en tableau

Plus sérieusement
il y a des sites exprès pour la construction :
Alsacréations, aide aux webmasters pour créer des sites web grâce aux CSS et XHTML.
css.alsacreations.com/

ou bien une autre référence
www.siteduzero.com

**le Lun Oct 06, 2008 17:06**

perso, j'utiliserais plutôt une structure en dl, dt, dd, c'est ce qui me semble le plus adapté, sémantiquement parlant, à cette situation

[Structures] tableau ou div ou les deux ?

[Structures] tableau ou div ou les deux ?

Lectures recommandées sur ce thème :

Qui est en ligne