Tableaux vs CSS

Question

salut chers programmeurs du web;

il y a de ca quelques ann&#233;es, alors que j'&#233;tais jeune et sans exp&#233;rience, je me suis mis &#224; apprendre HTML.
un language simple et efficace. &#192; l'&#233;poque, on me conseillai d'utiliser des tableaux pour la pr&#233;sentation de la page et pour le positionnement des &#233;l&#233;ments.

Mainteannt, 5 ans plus tard, alors que je me d&#233;cide &#224; rafraichir mes connaissances, je me rends compte que les mentalit&#233;s ont un peu changer....au profit d'un certain CSS tr&#232;s populaire maintenant. La mode veut que les &#233;l&#233;ments soit positionn&#233;es avec une plus grande pr&#233;cision au pixel pr&#232;s.

Je suis tr&#232;s septique face &#224; cette nouvelle facon de faire, il me semble que ca peut causer des probl&#232;mes. Admettons avec diff&#233;rentes r&#233;solutions ou tout simplement lorsqu'on redimensionne les fenetres. C'est juste un avis, j'ai pas fait d'essai.

Alors, maintenant, vous connaisseurs, que me conseiller, utiliser des tableaux ou du css pour faire la structure de mes pages web?

l'id&#233;al selon moi est de faire un genre de mixte.
J'attend vos avis avec impatience

@++

jesusonline · Answer

Bonjour, 

Un tableau sert par d&#233;finition &#224; mettre des donn&#233;es tabulaire ! pourquoi y mettre autre chose que ca ? 

pour r&#233;pondre &#224; ta question : ni l'un ni l'autre ! bien sur il faut utiliser CSS car c'est lui qui fait la partie pr&#233;sentation, et utiliser HTML pour les donn&#233;es. Mais il ne faut pas utiliser CSS pour placer les trucs au px pr&#233;s ! surtout pas !!! 

lit cet article : 

http://blogs.developpeur.org/cyril/articles/9089.aspx 

dedans j'ai mis beaucoup de liens pour d&#233;buter :) 


<HR>
Cyril - MVS - MCP ASP

tikrimi · Answer

D'accord avec Miguel... les tableaux servent &#224; faire... des tableaux.
L'un n'est pas incompatible avec l'autre, et du CSS peut tout &#224; fait &#234;tre utilis&#233; (et m&#234;me conseill&#233;) pour designer les tableaux.
Pour compl&#233;ter ton article, moi y'a un site que j'aime bien (je ne sais pas si il est dans tes liens), c'est Little Boxes

TiK
http://www.objectif-services.com
http://gadgaill.blogspot.com

cs_OriOn · Answer

Bonjour,


je ne te conseillerai qu'un seul site dans un premier temps, Openweb.eu.org. Je te conseille d'ailleurs la lecture de cet article : http://openweb.eu.org/articles/html_au_xhtml/

tch@o..

orion
http://jimmy.perret.free.fr
http://blogs.developpeur.org/orion/

cs_badrbadr · Answer

tout d'abord, merci pour vos r&#233;ponses, 
c'est sympathique de votre part (surtout avec les liens, je me sens gat&#233; l&#224; )

cependant, j'ai quelques commentaires:
>> Un tableau sert par d&#233;finition &#224; mettre des donn&#233;es tabulaires ! pourquoi y mettre autre chose que ca ? 
oui, t as raison, on d&#233;tourne l'usage primaire des tableaux mais est-ce qu'on fait pas la meme chose en detournant l'usage des listes (ul et li...) pour faire des menus horizontals?
>> Mais il ne faut pas utiliser CSS pour placer les trucs au px pr&#233;s
tu veux dire quoi exactement par l&#224;, j'aimerais que tu m'expliques ce point parce qu'il m'interesse. Avec CSS, c est juste des left top width height margin padding... d&#233;fini au pixel (y a d autres unit&#233;s de mesures mais l'id&#233;e est la meme)
----------------------------------------------------
Sur les liens que vous m'avez passer et sur d'autres sites web, ils disent que le but primaire de l'usage des CSS est de rendre le code plus l&#233;ger, moins bourr&#233; de tableaux imbriqu&#233;s illisibles &#224; la longue. J'ai vu des codes sources, puis c'est totalement vrai.

Cependant, j'ai penser &#224; un truc. Il y a des situations o&#249; on doit vraiment mettre des div dans d'autres div.
Prenons par exemple la situation d'un menu horizontal principal qui ressemble &#224; ca:
http://www3.sympatico.ca/red.zrari/menu.jpg

si mon r&#233;sonement est bon, il faut une dizaine de div pour positionner ces &#233;l&#233;ments avec les bons mesures en pixels pour faire ce menu. Je ne sais pas si c'est la meilleure facon de faire.
vous en pensez quoi de ce schema la?

Toujours avec ce menu, il me semble que ca sera plus juste d'utiliser le div principal pour positionner le menu dans la page et de faire ce qui est &#224; l'interieur du div avec des tableaux. C'est ce qui me parait le mieux.
Je suis sur que vous avez d'autres techniques 

@++

jesusonline · Answer

pour ton exemple, une simple liste me suffit amplement :)

1

... CSS est bien plus riche que left, top etc... mais la n'est pas le problème pourquoi vouloir à tout prix etre au px pret ? c'est pas si grave si tu as des différences de 1 ou 2 px ... regarde aussi le forum de http://css.alsacreations.com Pour ce qui est des liste pour les menu, si tu regarde un menu correctement, c'est bien une liste de lien ? il n'y pas que div, li en html il y a plein de choses ! :) Sinon, si t'as des questions tu peux regarde www.csszengarden.com tu y verras plein d'exemple d'utilisation de CSS

Cyril - MVS - MCP ASP

dircom13 · Answer

Mon grain de sel de vieux c&#133; mais totalement d&#233;butant&#133; y a pas d'&#226;ge m&#234;me &#224; 55 ans



Apr&#232;s 5 nuits blanches j'ai fini mes 2 premi&#232;res pages (en local) rien
qu'avec des CSS et j'ai utilis&#233; Web Developper (gratuit) pour voir ce
qu'en pensait le W3C. A la 3&#232;me reprise j'ai eu droit &#224; des
congratulations m'indiquant que je pouvais mettre le logo XHTML 1.1 sur
mes pages !



Comme un gosse j'ai voulu montrer mon devoir. La personne avait IE5 et
l&#224; bonjours le r&#233;sultat ! J'avais pourtant cru comprendre ce qu'il
fallait faire pour contourner la difficult&#233;.

Alors vu que les TPE et PME qui me font vivre sont accord en France majoritairement sous WIN 98 et IE5, 

Vu aussi qu'avant que ces Messieurs se mettent d'accord je serais cliniquement mort, 



Si vous n'avez pas de solution &#224; me proposer je vais m'en aller
apprendre la pr&#233;sentation en tableaux. Avec au moins &#231;a ne part &#224;
"chaille" comme disait ma grand-m&#232;re.



Cordialement

Dircom13



PS1 : Si vous n'avez pas de solution j'y mettrais quand m&#234;me le maximum
en CSS juste parce que cela est assur&#233;ment plus pratique.



PS2 : Pourriez vous me dire pourquoi lorsque il visite des sites et pas
des moindres qui jurent que par les CSS mon copain Web Developper
(toujours gratuit) s'obstinent a y trouver des pr&#233;sentations en
tableaux ? Faites le test.

dircom13 · Answer

PS &#224; mon post pr&#233;c&#233;dent 



Vient de trouver un site remarquable :
http://css.tests.free.fr/index.php : tous les exemples qui me montrent
que de toute &#233;vidence je n'avais pas tout compris ! 

Promis, sans rire, j'y reviendrais quand je serais en retraite, reste plus que 10 ans &#224; attendre. D'ici l&#224; ces Messieurs de :

- MSIE 5, 5.5 et 6, 

- Mozilla, 

- Firefox, 

- Galeon, 

- Epiphany, 

- K-meleon, 

- Netscape 6 et 7, 7.2 et 8, 

- Opera 6, 7, 8 et 9 , 

- Konqueror 3.2, 

- et Safari 1.2.

se seront peut &#234;tre mis d'accord



Bien cordialement &#224; tous

Dircom13

jesusonline · Answer

Je vois que certaines personnes (ceux qui ont fait la page) n'ont pas tout compris aux CSS :/ 

ils ne faut pas utiliser les hacks (ou alors que tr&#233;s rarement) comme je le dis souvent pour ne pas avoir de probl&#232;me de compatibilit&#233; il ne faut utiliser que ce qui est compatible avec tout le monde ! C'est &#224; dire une solution qui fonctionnne sauf pour un navigateur est une solution qui ne fonctionne pas du tout !

pour les vieux navigateurs c'est clair que c'est un peu plus compliqu&#233; mais rien d'impossible ... il suffit de ne pas utilis&#233; des r&#232;gles compliqu&#233;s .. des margins plutot que padding etc... regarde ici : http://www.openweb.eu.org/articles/dimensions_boites_css/ et d'autres articles du sites aussi ... 


<HR>
Cyril - MVS - MCP ASP

cs_badrbadr · Answer

Bref, quand on n'y pense, le HTML a beaucoup souffert de la guerre de 100 ans entre Microsoft et Netscape. La blessure tend &#224; se cicatris&#233; mais elle est toujours l&#224;.
le duo firefox-IE est beaucoup plus compatible que jadis Netscape-IE. ce qui est rassurant

Je pense que ce probl&#232;me va toujours exist&#233; par ce que le HTML &#233;volue. Il serait judicieux que dans nos pages HTML, on ajoute la version HTML qu'on a utilis&#233; pour que les nouveaux explorateurs la prennent en consid&#233;rantion (ouais ouais, ca existe pas encore mais bon) et assure ainsi une compabilit&#233; avec les anciennes versions.

Etk

@++

jesusonline · Answer

"on ajoute la version HTML qu'on a utilis&#233; pour que les nouveaux explorateurs la prennent en consid&#233;rantion (ouais ouais, ca existe pas encore mais bon) "

Ca existe et ceci depuis plusieurs ann&#233;es d&#233;j&#224;, et ceci est d&#233;j&#224; utilis&#233; ... si tu ecris une page en html4.01 et tu changes en XHTML1.0 tu n'auras pas le meme rendu ... ce ph&#233;nom&#232;ne s'appelle le Doctype Switching ... liens sur l'article du dessus et aussi ici pour les diff&#233;rentes versions du navigateur : http://pompage.net/pompe/doctype/ 

Pour r&#233;sum&#233;, il y a une guerre entre Firefox et IE seulement pour ceux qui voient une guerre et des probl&#232;mes de compatibilit&#233; (ce qui semble &#234;tre ton cas :)) moi je n'ai aucun probl&#232;me de compatibilit&#233; ... 

Ce qu'il me fait par contre plus peur c'est la "guerre" IE6 / IE7 je pense que niveau compatibilit&#233; ce sera beaucoup pire au moins pendant le temps de transition ... et j'espere que microsoft forcera la mis &#224; jour vers IE7 ... 


<HR>
Cyril - MVS - MCP ASP

cs_badrbadr · Answer

"Ca existe et ceci depuis plusieurs ann&#233;es d&#233;j&#224;, et ceci est d&#233;j&#224; utilis&#233;"
Oh mon dieu! il m'a cass&#233;...Oh la honte...(lol)
"il y a une guerre entre Firefox et IE seulement pour ceux qui voient une guerre"
j'ai dit qu'il y a un duo, pas une geurre. Un duo dans le sens que chacun des deux veut prendre de la place, ce qui est vrai
"des probl&#232;mes de compatibilit&#233; (ce qui semble &#234;tre ton cas :))"
il me semble avoir dit qu'ils &#233;taient compatibles
"moi je n'ai aucun probl&#232;me de compatibilit&#233; "
ca d&#233;pend de ton niveau et de ton experience. toi tu es un genre de sp&#233;cialiste la-dans, tu connais les trucs du m&#233;tier, mais pour d'autres, moins experiment&#233;s, ils risquent d'avoir de petits probl&#232;mes. mais comme tu disais, la compabilit&#233;, ca veut pas dire exactement le meme affichage au pixel pr&#232;s.
"la guerre" IE6 / IE7 "
ca se peut tr&#232;s bien, mais IE7 avec le Doctype Switching n'assure t-il pas une compabilit&#233; arri&#232;re avec son frere numero 6?

en tout cas, merci jesusonline (ca te va bien l'attribut online, on fait quasimen du chat l&#224;, c'est quelle heure en france, t'as mang&#233; quoi comme diner, lol, scuse moi)

+

dircom13 · Answer

En premier lieu f&#233;licitation et bravo pour la rapidit&#233; de vos r&#233;actions. Un vrai bain de jouvence le Net. 

On y trouve des passionn&#233;s ce qui change de la morosit&#233; ambiante (en
France tout du moins), des qui d&#233;fendent leur conviction cela change du
politiquement correcte (on voit ou cela m&#232;ne)&#133; enfin bref un vrai
bouillon de culture avec un grand C. A ne pas confondre avec celui des
labos.



Or donc Messieurs voil&#224; ma question. Sachant :

- que je n'ai pu m'offrir que WebExpert (dont je ne suis pas au bout
des fonctionnalit&#233;s) - que WebExpert doit &#234;tre cal&#233; (&#224; mon avis) sur
IE6 ou autre vu que le r&#233;sultat n'est pas le m&#234;me qu'avec IE5

- que j'ai recharg&#233; IE5 en parall&#232;le de Firefox, 

- on fait comment juste pour afficher une auteur de 10 petits pixel de fa&#231;on identique ? 

Vous voyez le truc du genre tout c&#133; (qui peut vouloir dire aussi
cornichon) un truc du genre margin-top  = 10 px; pour que le d&#233;but
de la page (juste le d&#233;but) ne soit pas coll&#233; au navigateur.



J'&#233;tais pourtant sur d'en &#234;tre au moins &#224; ce niveau, et bien Messieurs
je suis d&#233;sol&#233; de vous le dire mais j'y arrive pas. Un coup long un
coup court ! Alors moi qui en avais raz le bol de voir des colonnes
toujours des colonnes et encore des colonnes, et qui voulait une
pr&#233;sentation en bandes horizontales, dans un format tout b&#234;te de 800 x
600 pour ne plus avoir &#224; scroller (l'arthrose Messieurs, ah l'arthrose)
je ne vous dis pas.



Mais bon comme aurait dit ma grand m&#232;re en France avec le Minitel on avait pas tous ces probl&#232;mes.



Cordialement &#224; tous

Dircom13



PS 1 : &#224; l'attention particuli&#232;re de jesusonline. Et en plus tu ou vous
en rajoutez. Quand je pense que j'ai pass&#233; 2 nuits &#224; comprendre (je
croyais) les hacks !!!!!!!!!!! Maintenant j'apprend qu'il ne faut pas
les utiliser ? SVP &#224; votre bon c&#156;ur juste pour ne pas me laisser idiot.

PS 2 : Vous &#234;tes sur que ce n'est pas une vraie guerre, du genre qui fleur bon
les gros sous. Faudrait &#234;tre na&#239;f pour croire le contraire. Mais bon comme aurait dit ma grand m&#232;re...

dircom13 · Answer

PS à  tikrimi :
J'avais dans mes favoris Little Boxes. Je viens de vérifier il utilise bien des Hacks. Jesusonline va être faché (sourire)

Tableaux vs CSS

13 réponses

Votre réponse

Discussions similaires