[Structures] tableau ou div ou les deux ?

WRInaute occasionnel
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:
<table><body><tr><td><div></div></td></tr></body></table>

Ou

-Div seules.
Code:
<div id=".."><div class="...><h2></h2><a href=".."></a><p></p></div></div>

Voici ma 1ere structure en tableau + div :

Code:
<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:
<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:
 
WRInaute impliqué
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.
 
WRInaute occasionnel
DadouDuck a dit:
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 :) )
 
WRInaute occasionnel
DadouDuck a dit:
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
 
WRInaute accro
abouvard a dit:
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.
 
WRInaute occasionnel
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
sanstitre2hk2.jpg


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
 
WRInaute accro
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.
 
WRInaute occasionnel
salut Marie-Aude.
J'attendais ton intervention avec impatience
(t'es trop calé :D )

voici ou j'en suis /

Code:
<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:
.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???
 
WRInaute accro
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 ;)
 
WRInaute occasionnel
Marie-Aude a dit:
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:
<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:
 
WRInaute impliqué
Relativement facile comme exemple :
Code:
<!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="https://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">&nbsp;</p>
	</div>
	<div class="article">
		<p class="legende"><img src="https://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">&nbsp;</p>
	</div>  
  </body>
</html>
 
WRInaute accro
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

;)
 
WRInaute accro
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
 
WRInaute impliqué
ça se défend, mais comme une liste d'articles pour moi n'est pas une liste de définition, j'aurais tendance à ne pas adhérer à cette solution
 
WRInaute occasionnel
merci DadouDuck pour ta participation
En effet, ton code est très simpliste, mais du coup, j'avoue que j'ai du mal à adapter quelques trucs...comme un séparateur par exemple.

voici le mien :


Code:
<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" />
<style>
   
.boite {
   width: 115px;
   float:left;
   display: inline;
   text-align: center;
}
.boite * {
   margin: 0;
   padding: 0;
}
.boite-style {
   border-right: 1px solid #ccc;
   margin: 0;
   width: 111px;
   text-align: center;
   line-height: 1.1;
   background: #fff;
}
.boite-image {
   padding: 1px;
   margin: 0;
   text-align: center;
   border-bottom: 1px solid #ccc;
}
.boite-image img {
   width: 110px;
   height: 100px;
   margin: 0 auto;
}
.boite-url a {
   border-bottom: 0 none;
   margin: 0;
   text-align:center;
   text-decoration:none;
   font-size:x-small;
   font-weight:bold;
   color: #000;
}
.encadrement {
   display:inline-block;
   border: 1px solid #ccc;
   width:388px;
   margin-left:20px;
   padding-bottom:0;
}
.legende p {
  font-size: 1em;
  color: #000;
  margin-left:110px;
  margin-right:1px;
}

</style>

<div class="encadrement">
<div class="boite">
<div class="boite-style">
<div class="boite-image"><a href="http://www.DOMAINE.com/"><img src="http://img357.imageshack.us/img357/2639/imgxf4.jpg" alt="image" /></a></div>
<p class="boite-url"><a href="http://www.DOMAIN.com/" title="Plus d'infos">Cliquez ici pour plus d'infos</a></p>
</div>
</div>
<div class="legende">
  <div style="text-align:center;font-weight:bold;">Titre de l'article</div>
  <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.</p>
</div>
</div>
  </body>
</html>

[Question bête n°1]
C'est vraiiiiiment très bad? :oops:
[/Question bête n°1]

[Question bête n°2]
est-ce que je risque une quelconque pénalité des bots ou moteurs face à ça? :oops:
[/Question bête n°2]
 
WRInaute passionné
s-o-m-e-y a dit:
PS- en quoi les tableau sont nuisibles??

le robots ne lis pas le contenu?

Les div (utilisés avec modération) permettent d'alléger le poids d'une page html.
Sur des sites à fortes visites quelques ms en moins peuvent te permettre de récupérer quelques VU en plus :)
 
Discussions similaires
Haut