Avantage du <div> sur le <table>

[junsphoenix]

Bonjour,
actuellement mon site (http://www.immobilier-tanger-maroc.com), contient beaucoup de table dans ses pages.
J'ai lu dans différents forums, qu'il est préférable d'utiliser des div pour notamment permettre une meilleure lecture aux robots.

Avez vous des retours concernant ces infos et l'avez vous expérimenter?

D'avance merci.

 

[e-kiwi]

<div> <- 5 lettres
<table><tr><td> <- 15 lettres

réduction de code : 66%

ca fait, pour du code source inutile pour l indexation dans google, 66% en moins, donc plus de code utile dans les robots dans ta page, c'est donc forcement pas un mal mais en tableau, tu sera référencé aussi, c est juste pour gagner du poids en page (google va preferer une page de 5ko à une page de 100ko pour le meme texte utile )

 

[bproductiv]

un peu de lecture de qualité :
http://css.alsacreations.com/Faire-une- ... -tableaux/

 

[Marie-Aude]

il est préférable d'utiliser des div pour notamment permettre une meilleure lecture aux robots.

Pas seulement aux robots : c'est beaucoup plus facile aussi pour les gens qui surfent avec un logiciel de lecture de page, et pour toi c'est aussi plus facile à maintenir.

 

[junsphoenix]

<div> <- 5 lettres
<table><tr><td> <- 15 lettres

réduction de code : 66%

ca fait, pour du code source inutile pour l indexation dans google, 66% en moins, donc plus de code utile dans les robots dans ta page, c'est donc forcement pas un mal mais en tableau, tu sera référencé aussi, c est juste pour gagner du poids en page (google va preferer une page de 5ko à une page de 100ko pour le meme texte utile )

J'aime bien l'idée de la page plus "légère" et donc mieux "avalée" par les moteurs. Je vais tester cela et vous tenir informés, ça servira peut être à d'autres...

 

[chava2b]

google va preferer une page de 5ko à une page de 100ko pour le meme texte utile

Tu es sur de ca ?

D'un autre coté, les moteurs peuvent supprimer les balises avec un strip_tags par ex, donc c'est pas forcé qu'ils preferent les <div> aux <table> ou les pages legeres aux lourdes

 

[paolo20110]

google va preferer une page de 5ko à une page de 100ko pour le meme texte utile

Tu es sur de ca ?

D'un autre coté, les moteurs peuvent supprimer les balises avec un strip_tags par ex, donc c'est pas forcé qu'ils preferent les <div> aux <table> ou les pages legeres aux lourdes

Et quid de la bande passante pour toi comme pour le robot.
66% de contenu en moins c'est 66% de bande passante consommée dans le 2 sens, 66% d'espace disque en moins pour le cache de ta page.
Je ne suis pas sur que google favorise les pages legeres dans les resultats, mais googlebot à moins de travail.

 

[YoyoS]

De toute manière le <div> offre beaucoup plus de possibilités que le <table> parce que le <div> est neutre alors que le <table> possède des propriétés par défaut qui peuvent te faire péter un cable quand tu veux monter un design.

Bref, j'ai réussi à monter certains designs seulement avec des <div>. Quand il y a trop de <table>, ils s'influencent et ça devient le bordel !

 

[e-kiwi]

>> Tu es sur de ca ?

oui, c'est une question de logique. si excactement meme texte pour l'internaute, et poids plus leger, comment veux tu que ce soit mal vu ?

 

[arnaudmn]

66% de contenu en moins c'est 66% de bande passante consommée dans le 2 sens, 66% d'espace disque en moins pour le cache de ta page.

Un site, c'est pas seulement <table><tr><td> répêté plusieurs centaines de fois. Au milieu de ça, il y a du texte. C'est pas parce qu'on va remplacer 10 tables par des divs (qui seront surement plus de 10) qu'on va réduire son code de 66% !!!

 

[e-kiwi]

66% de contenu en moins c'est 66% de bande passante consommée dans le 2 sens, 66% d'espace disque en moins pour le cache de ta page.

Un site, c'est pas seulement <table><tr><td> répêté plusieurs centaines de fois. Au milieu de ça, il y a du texte. C'est pas parce qu'on va remplacer 10 tables par des divs (qui seront surement plus de 10) qu'on va réduire son code de 66% !!!

j'ai pourtant pris cet exemple car apres refonte d'un de mes sites, je suis passé de 18ko à 6ko en supprimant tout tableau ou balise ou code non compatible xhtml 1.1. donc les 66% y sont bien

et non il n'y a pas plus de 10 divs pour 10 tableaux


>> Un site, c'est pas seulement <table><tr><td> répêté plusieurs centaines de fois

étudie le code sources de gros portails fait en tableaux, tu verra que c'est des centaines de tableaux

 

[paolo20110]

66% de contenu en moins c'est 66% de bande passante consommée dans le 2 sens, 66% d'espace disque en moins pour le cache de ta page.

Un site, c'est pas seulement <table><tr><td> répêté plusieurs centaines de fois. Au milieu de ça, il y a du texte. C'est pas parce qu'on va remplacer 10 tables par des divs (qui seront surement plus de 10) qu'on va réduire son code de 66% !!!

J'en convient mais il n'empeche, que quelque soit la proportion c'est toujours de la bande passante economisée, surtout que si on reflechit uniquement tableau, en imbriquant plusieurs, creant (à l'ancienne) une cellule pour un pixel ou presque le poid du code de la page peut vite augmenter, même rapport au contenu.

Tu as ete plu rapide e-kiwi

 

[arnaudmn]

j'ai pourtant pris cet exemple car apres refonte d'un de mes sites, je suis passé de 18ko à 6ko en supprimant tout tableau ou balise ou code non compatible xhtml 1.1. donc les 66% y sont bien

Super. Si on trouve un exemple qui démontre ce qu'on veut, alors on peut généraliser

et non il n'y a pas plus de 10 divs pour 10 tableaux

Si tu as vraiment remplacé N tableau par N div, c'est en effet que tu devais pas utiliser les tableaux comme il faut.

étudie le code sources de gros portails fait en tableaux, tu verra que c'est des centaines de tableaux

Formidable.

 

[chava2b]

Que certains aiment plus la table que le div ou inversement, c'est pas trop là mon interrogation.

Avec des div la page est surement plus legere, bien que on parle de quelques ko, mais y a pas de petites economie pour ceux qui n'ont pas d'ADSL par ex.

Sinon, economiser le boulot du bot de GG je ne sais pas s'il t'en sera reconnaissant pareil pour la bande passante (tres souvent maintenant c'est illimité d'ailleurs);

Mais si je trouve 5mn j'essayerai de voir si le meme contenu dans une page lourde est mieux positionné que sur une page legere

 

[bproductiv]

tiré de l'article : http://css.alsacreations.com/Faire-une- ... -standards

I Du point de vue du Webmaster
1° Le poids de la page
2° Lisibilité du code
3° La facilité d’entretien du site
II Du point de vue du visiteur
1° Une dynamique sans JavaScript
2° Un plus grand public peut accéder aux pages web
Tout n'est malheureusement pas parfait avec la méthode moderne. Ainsi, vous devrez apprendre à coder de manière standard, et désapprendre à coder en tableaux. Et si l’apprentissage n’est déjà pas toujours facile, c’est d’abord se débarrasser des mauvaises habitudes, ce qui est très dur.
C'est aussi pour cela que les tableaux sont encore utilisés aujourd'hui !

etc... je vous laisse lire directement la conclusion..

 

[xTrade]

Avec des div la page est surement plus legere, bien que on parle de quelques ko, mais y a pas de petites economie pour ceux qui n'ont pas d'ADSL par ex.

Sur ce point, laisse moi rire!
Ce ne sont pas quelques table ou div en moins qui feront la différence, mais tous les graphiques de la page qui pénalisent.
(Je ne parle même pas de certaines régies pubs avec plein d'animations à la con)

 

[e-kiwi]

arnaudmn> tu veux faire le calcul avec le pavé "Classement de l'annuaire" de ton site ? allez on frolera le 66%. ca fait donc 2.

>> Si tu as vraiment remplacé N tableau par N div, c'est en
>>effet que tu devais pas utiliser les tableaux comme il faut.
un exemple ?

 

[arnaudmn]

arnaudmn> tu veux faire le calcul avec le pavé "Classement de l'annuaire" de ton site ? allez on frolera le 66%. ca fait donc 2.

(oublie mon mail, j'ai trouvé de quoi tu parles 8) )
C'est pas parce que je vais remplacer un tableau que ça va réduire la taille de ma page de 66%. C'est qu'une partie de la page, qui représente 10 ou 11% du poids total.

>> Si tu as vraiment remplacé N tableau par N div, c'est en
>>effet que tu devais pas utiliser les tableaux comme il faut.
un exemple ?

Prend donc ma page que tu cite, remplace juste les tableaux par autant de div (pas un de plus), et vient me dire si la page a réduit de 66%.
Je veux bien sur que le site ai la même tête qu'aujourd'hui Et que ça fonctionne aussi avec IE

Et si tu veux un exemple :

<table><tr><td width="50%">aaa</td><td width="50%">bbb</td></tr></table>

Si on le remplace par des div, ça va surement en faire 2. Le seul cas ou tu as autant de div que de table, c'est si tu faisais que des tableaux avec une seule cellule, et j'en vois pas l'intérêt.

 

[bproductiv]

Prend donc ma page que tu cite, remplace juste les tableaux par autant de div (pas un de plus), et vient me dire si la page a réduit de 66%.
Je veux bien sur que le site ai la même tête qu'aujourd'hui Et que ça fonctionne aussi avec IE

Et si tu veux un exemple :

<table><tr><td width="50%">aaa</td><td width="50%">bbb</td></tr></table>

Si on le remplace par des div, ça va surement en faire 2. Le seul cas ou tu as autant de div que de table, c'est si tu faisais que des tableaux avec une seule cellule, et j'en vois pas l'intérêt.

J'en déduit que tu n'as jamais appris a coder sémantiquement...
il n'y a pas que les div dans la vie..ya les listes, les span, etc..chaque éléments quand il est bien utilisé permet d'alléger le code et question rendu pour ie ou opera ou safari ou x navigateur..quand c'est développé en respectant les recommandations w3c que le site est valide et les css aussi, ben aucun soucis...

 

[arnaudmn]

J'en déduit que tu n'as jamais appris a coder sémantiquement...

Tu peux bien en déduire ce que tu veux
Ma réponse concerne le fait qu'on ne va pas remplacer 1 tableau par 1 div ; et qu'on ne gagnera pas 66% de taille juste parce qu'on a fait ça.

 

[YoyoS]

L'important c'est pas tellement la taille. C'est qu'une page avec des div est aussi plus rapide à charger du fait que ce sont des balises neutres, selon moi, moins de calculs du navigateur pour l'affichage.

Met 10millions de table dans un fichier et 10millions de divs dans un autre. Compare les temps, je parie sur les div

Les <table> c'est pour les listes, un point c'est tout. Les <div> pour le reste. Après vous faites ce que vous voulez hein ;-)

 

[DadouDuck]

Aïe, aïe aïe, on arrive dans les dérives de la divite aïgue => Il ne faut pas tomber dans l'excès : il ne faut pas toujours remplacer une cellule de tableau par un div, mais par ce qui est sémantiquement plus intéressant.

Exemple un site sur lequel je suis en train de travailler : http :// normotel-lamarine.normandie-planete.com/normotel.htm

La structure tableau pour l'entête serait :

<table width="960" cellspacing="0" cellpadding="0" border="0"> // Pour l'encadrement de la page
  <tr>
    <td colspan="2"><h1><img src="monimage" alt="Le texte de l'image" width="475" height="175" /></h1></td> //Pour mon image d'entête
  </tr>
  <tr>
    <td colspan="2">
      <table> // ah merde, je dois imbriquer un tableau pour le menu (fichues histoires de colspan)
        <tr>
          <td><a href="lien1.htm">Accueil</a></td> // Les différents éléments de mon menu
          <td><a href="lien2.htm">Menu 2</a></td>
          <td><a href="lien3.htm">Menu 3</a></td>
          <td><a href="lien4.htm">Menu 4</a></td>
          <td><a href="lien5.htm">Menu 5</a></td>
        </tr>
      </table>
    </td>
  </tr>
   <tr>  // La on attaque enfin le contenu
      <td>
          <h1>Accueil</h1>
          ....
          ....
      </td>
      <td>
        Contenu colonne droite
      </td>      
   </tr>
   <tr>
     <td colspan="2">
       Mon pied de page
    </td>
   </tr>
</table>

Bon maintenant passons à une présentation plus proche des standards :

<div id="page">  // Pour l'encadrement de la page (comme pour le tableau
	  <h1 id="header"><img src="monimage" alt="Le texte de l'image" width="475" height="175" /></h1> // Ah, tien, la je passe directement au h1 : pas de cellule et pas de div : c'est plus propre non?
	  <ul id="menu"> // Tien une liste à puce pour mon menu (pas d'histoire d'imbrications ou de colspan
	         <li><a href="lien1.htm">Accueil</a></li> // Les différents éléments de mon menu
          <li><a href="lien2.htm">Menu 2</a></li>
          <li><a href="lien3.htm">Menu 3</a></li>
          <li><a href="lien4.htm">Menu 4</a></li>
          <li><a href="lien5.htm">Menu 5</a></li>
	  </ul>

	  <div id="contenu"> // Bon la on utilise quand même un div, pas moyen de faire autrement
	           <h1>Accueil</h1>
          ....
          ....

      </div>
	  <div id="droite">
	       Contenu colonne droite
	  </div>
	  <p id="footer">     Mon pied de page></p> // Tiens pour le pied un bête paragraphe
	</div>

Voila une rapide comparaison, mais soyez honnête la deuxième méthode est quand même :

* Plus simple à lire et du coup à modifier.
* Bien mieux structurée.
* Plus légère au final.

Rapport au poids total de la page : c'est vrai que le gros du poids c'est les illustrations, les éléments multimédia qui font la plus grosse partie, mais, les bots des moteur qui parcourent vos pages ne vont pas (en général lire les images et les éléments multimédia) hors, ils génèrent aussi du trafic sur votre site : Alléger le code de votre page vous permettra quoiqu'il arrive d'économiser de la bande passante.

Un exemple tout bête quand Yahoo à décider de basculer sur ce type de mise en page l'économie de bande passante était de 5Go / jour.

 

[paolo20110]

exemple tiré du code source d'arnaudmn:

<table cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td><p><img src="/images/blanc1.gif" width="946" height="10" border="0" alt=""></p></td>

Ce genre de ligne n'a plus de raison d'être non plus avec le css.

 

[arnaudmn]

exemple tiré du code source d'arnaudmn:

<table cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td><p><img src="/images/blanc1.gif" width="946" height="10" border="0" alt=""></p></td>

Ce genre de ligne n'a plus de raison d'être non plus avec le css.

Je crois que c'est la seule ligne qui sert réellement J'ai déja réussi a enlever tous les tableaux servant a la mise en page, sauf un. Sinon j'arrive pas a avoir des colonnes qui s'étende jusqu'en bas.

 

[paolo20110]

la ligne en question doit pouvoir être remplacée par un border-top:1px solid white, si le fond n'est pas blanc, sinon un margin-top:1px suffit dans ton fichier css.
Et je parle beaucoup mais j'ai gardé le même tableau sur certain de mes sites :wink: pour la même raison.

 

[fra_arf]

Personnelement les tables, ça me donne mal à la tête.
Pfiou le cerveau, y en trop partout alors que les div, c'est si beau
Vive le css et surtout tu arrives tjrs à avoir un rendu identique, ou du moins sans problème majeur avec ie et moz.

 

[david96]

L'important c'est pas tellement la taille.

Certes !

Mon site de prédilection a été fait tout en <table>, mais je dois avouer que le <div> c'est carrément mieux niveau ergonomie.
De plus, le couple Div + CSS, c'est carrément jouissif niveau design et dynamisme !

Bref à tous ceux qui commencent un nouveau site, je leur recommande chaudement de programmer en <div> sans pour autant négliger les <table> qui peuvent encore grandement servir sur beaucoup de points.

Voilà ! C'est comme pour le son, allier le numérique et l'analogique, c'est le top !

 

[Marie-Aude]

Prend donc ma page que tu cite, remplace juste les tableaux par autant de div (pas un de plus), et vient me dire si la page a réduit de 66%.

D'expérience, passer des tableaux aux css permet de réduire le nombre de conteneurs par rapport à une mise en page en tableaux.
Coder proprement, "sémantiquement", avec des classes, permet de se débarrasser de 99% des conteneurs de "mise en page" , genre les spacers, la table dans la table dans la cellule, etc...

Et qu'est ce que c'est plus simple à relire... quand je revois le code de mon premier site, tout en tableaux, j'ai même pas envie de le convertir !

De plus un des TRES gros avantages de la mise en page en css c'est de pouvoir gérer plusieurs présentations différentes. j'ai des sites où je fais disparaitre des zones entières pour la version imprimable de la page (et réciproquement j'en fais apparaitre d'autre). Si je suis en tableaux, je me retrouve avec des trous, il n'est pas possible je pense de déplacer juste une cellule d'une table à gauche ou à droite. En css c'est parfaitement faisable.

Donc oui, si le nombre de div est équivalent au nombre de tableaux, c'est qu'on a loupé une marche dans la conception.

 

[e-kiwi]

comme dit plus haut, meme si dans l'ancien temps, toute la mise en page etait faite en tableau, aujourd'hui tous les elements ne sont pas définis par des divs ... il y a une ribanbelle de balises pour définir des elements d'une page.
des listes bien cssisées font aussi l'équivalent d un tableau, donc ca enleve une occurence de div par rapport a un tableau, c'est l'element lui meme qui par sa feuille de style s'affiche différemment.

 

[DadouDuck]

L'ère des mises en page avec tableaux imbriqués est révolue, ce n'est pas un secret ni un scoop.

L'utilisation des "calques" <div> associés aux styles CSS devient le nouveau courant d'intégration et de mise en forme des documents.

Cette nouvelle "mode" apporte son lot de fanatismes et surtout d'incompréhensions et de mauvaises utilisations. Pour résumer, les gens se disent : "chouette, je vire les tableaux et je remplace par des divs". Ensuite ils se retrouvent avec autant de divs qu'ils avaient de cellules de tableaux et se disent : les "calques" / CSS c'est nul, ça sert à rien !

Source

Dommage la partie importante de l'article à été retiré pour n'être que dans le livre (que je conseille au passage) mais la citation restante résume bien la problématique.

L'exemple que j'ai donné plus haut permet (j'espère ) de bien comprendre la structure.

Un menu par exemple c'est une énumération de lien, d'où l'usage d'une liste à puce.

Avec les CSS on peut affecter

 

[polweb]

Le seul avantage des tableaux c'est pour celui qui pour raison x ne veut pas passer au css.

Le css au début c'est un peu dur et puis il faut refaire tout son site.

Mais une fois que c'est fait quel pied !

Pour ceux qui veule tenter l'aventure le site du zero + alsacreation .

 

[kpitain]

Le seul avantage des tableaux c'est pour celui qui pour raison x ne veut pas passer au css.
Le css au début c'est un peu dur et puis il faut refaire tout son site.
Mais une fois que c'est fait quel pied !

tout à fait d'accord: même si parfois on se prend un peu la tête avec les alignements centrés

 

[DadouDuck]

Et une fois que l'on maitrise on a du mal à faire un simple tableau en html (j'ai sué pour écrire mon exemple de présentation tableau)