<div> plutot que <table>

L
leilani
Nouveau WRInaute
Je ne retrouve plus les raisons (malgré plusieurs recherches ici) pourquoi les <div> sont plus efficaces que les <table> ?? Mots clés + hauts dans la page ???

Ca m'ennuie car j'aime bien les <tab bien pratiques
.. y a-t-il une façon de mieux (re référencement) travailler avec les <tab ?

Merci
 
nickargall
nickargall
WRInaute accro
Simplement l'utilisation de <div> rend le code source plus léger qu'une structure en tableaux. Mais on trouve beaucoup de sites en tableaux très bien référencés.
Ceci dit, je suis passé d'un site en tableaux à un site entièrement en DIV, avec respect des normes w3c tant qu'àa faire, et crois moi le jeu en vaut la chandelle en terme de maintenance.
 
B
B-acK
WRInaute discret
un debut de réponse ici

Sinon pour resumer les tableaux ne sont cencés servir qu'a l'affichage de données tabulaires.

Maintenant la théorie et la pratique hein...
 
D
dorian53
WRInaute passionné
Tout à fait, en pratique j'utilise encore à de nombreuses reprises les "<table>" dès que je travaille avec une disposition de type colonne. C'est pour moi la solution la plus efficasse.

Le CSS a encore beaucoup de lacune à ce sujet (surtout les "float").
 
nickargall
nickargall
WRInaute accro
A mon sens, le css n'a pas de lacune, c'est la faiblesse des navigateurs IE dans l'application des instructions css qui a des lacunes :) Mon site est à base de colonnes et de CSS, et ça marche pas mal je trouve
 
L
leilani
Nouveau WRInaute
Merci bien pour toutes ces infos . C'est vrai que les pb rencontrés avec IE et surtout IE6 que beaucoup encore utilisent m'ont fait préférer les <table au <div et css
 
L
leilani
Nouveau WRInaute
oui ... et pas qu'en CSS ! :wink:

Par contre toutes les modifs nécessaires au css et petits 'hacks ?" pour que ça présente OK aussi sur IE6 alors que c'est bien joli sur Firefox, je trouve ça plutôt chxxxx !
 
D
dorian53
WRInaute passionné
e-kiwi a dit:
>> Le CSS a encore beaucoup de lacune à ce sujet

ou tu as des lacunes en css ? :) :)
Cliquez pour agrandir...

De mémoire, un <div> qui contient une image en "float" par exemple est dans l'incapacité de s'adapter à la hauteur de son contenu.

En mettant une bordure on verra le <div> faire 1px de hauteur et l'image sortir du cadre, j'ai des tas d'exemple que j'ai rencontré même avec des mises en formes peu complexes mais de tailles non fixes (pour un design redimensionnable).

La cellule d'un tableau n'a pas cette faille...
 
C
chtipepere
WRInaute occasionnel
De mémoire, un <div> qui contient une image en "float" par exemple est dans l'incapacité de s'adapter à la hauteur de son contenu.
Cliquez pour agrandir...
Il existe des solutions à ce genre de problème (ici par exemple).
Après il y a un point important : la sémantique.
Les "table" (tableaux) sont fait pour organiser des éléments, et pas pour faire de la mise en page.
Bien qu'il soit très simple de faire une mise en page grâce à des balises table, il ne faut pas oublier que le code source s'en retrouve allourdit, et que le poids des pages peut ralentir Googlebot (si on allège les pages, Googlebot verra plus de page lors de son passage).
Enfin, ce n'est que mon avis, j'ai peut-être pas tout bon non plus.
A bon entendeur.
 
nickargall
nickargall
WRInaute accro
Tout a fait. Et la sémantique, ben c'est important pour l'appréhension d'une page par une personne non voyante par exemple. Et comme l'adage le dit, "Google est le plus grand internaute non voyant du web" ...
 
E
e-kiwi
WRInaute accro
>> on verra le <div> faire 1px de hauteur et l'image sortir du cadre

un simple clear:left et fini le cadre qui ne s'adapte pas à l'element :) je n'ai jamais vu de problème sans solution (je ne dis pas que ca existe pas, mais je n'ai jamais vu :) )
 
D
dorian53
WRInaute passionné
Arggg, même avec les exemples j'arrive toujours pas.


Code: 
<div style="border:1px solid red;">
	<img src="/....jpg" style="float:left;">
</div>

<div style="border:1px solid blue;">
Bloc dessous
</div>

Où faut-il placer le clear ?
 
nickargall
nickargall
WRInaute accro
Code: 
<div style="border:1px solid red;">
   <img src="/....jpg" style="float:left;">
<div style="clear:both;"></div>
</div>

<div style="border:1px solid blue;">
Bloc dessous
</div>
 
D
dorian53
WRInaute passionné
J'dis okay à la bidouille ça marche.

Après quand je code j'accepte pas ce truc pas propre qui ressemble à rien : un bloc vide.

De cette manière c'est sûr j'peux tout coder.
 
E
e-kiwi
WRInaute accro
cela peut tres bien etre un <hr style=clear:left> ou autre élément de préesentation, ce n est pas une obligation de mettre un bloc vide ! :)
 
D
dorian53
WRInaute passionné
Suite...

Pourquoi pas ça alors c'est plus moralement correct ?

Code: 
<table style="border:1px solid red;"><tr>
   <td><img src="/....jpg" style="float:left;"></td>
</tr></table>

<div style="border:1px solid blue;">
Bloc dessous
</div>
 
C
chtipepere
WRInaute occasionnel
Les tableaux ne doivent pas servir à faire de mise en page!
Par exemple on utilise un tableau pour présenter des quantités de production d'une société :
Code: 
<table summary="Quantités de production">
<caption>Production de la société X en tonnes</caption>
<thead>
<tr>
<th>Produits</th>
<th>Masse</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pommes de terre</td>
<td>12</td>
</tr>
<tr>
<td>Carottes</td>
<td>4</td>
</tr>
</tbody>
</table>
Un tableau comporte de nombreuses balises qui ne sont plus utilisées (ou alors que trop rarement), et pourtant elles ont un sens, et utiliser des balises différentes évite de rajouter des id à tout va pour styler lesdits éléments.

Quand à l'élément vide avec le clear, c'est vraiment un raccourci pas propre du tout!!!
Il faut se sevrir des pseudo class CSS et des hacks IE et MAC qui vont avec (cf. le lien que j'ai donné plus haut).
Ton code source restera propre, sans balise inutile.
 
Audiofeeline
Audiofeeline
WRInaute accro
L'avantage du CSS c'est qu'on peut mettre le contenu en début de code ce qui est assez positif pour le ref...
Mais sinon, ça n'est pas la fin du monde d'utiliser les tableaux.
De toute façon, au vu des spécifications de CSS 3 on aura tout à refaire (en mieux).
 
D
dorian53
WRInaute passionné
chtipepere a dit:
Les tableaux ne doivent pas servir à faire de mise en page!
Par exemple on utilise un tableau pour présenter des quantités de production d'une société :
Code: 
<table summary="Quantités de production">
<caption>Production de la société X en tonnes</caption>
<thead>
<tr>
<th>Produits</th>
<th>Masse</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pommes de terre</td>
<td>12</td>
</tr>
<tr>
<td>Carottes</td>
<td>4</td>
</tr>
</tbody>
</table>
Un tableau comporte de nombreuses balises qui ne sont plus utilisées (ou alors que trop rarement), et pourtant elles ont un sens, et utiliser des balises différentes évite de rajouter des id à tout va pour styler lesdits éléments.

Quand à l'élément vide avec le clear, c'est vraiment un raccourci pas propre du tout!!!
Il faut se sevrir des pseudo class CSS et des hacks IE et MAC qui vont avec (cf. le lien que j'ai donné plus haut).
Ton code source restera propre, sans balise inutile.
Cliquez pour agrandir...

Tu peux nous donner la solution au problème de la page 1 stp ?
 
C
chtipepere
WRInaute occasionnel
Code: 
<style type="text/css">
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
</style>


<div style="border:1px solid red;" class="clearfix">
   <img src="https://www.webrankinfo.com/images/wri/webrankinfo.png" style="float:left;" alt="WebRankInfo" />
</div>

<div style="border:1px solid blue;">
Bloc dessous
</div>
Ca va là?
 
Vous devez vous connecter ou vous inscrire pour répondre ici.
1.fr
Haut