Bonnes techniques de programmation : tableau VS div

Bonnes techniques de programmation : tableau VS div - HTML/CSS - Programmation

Marsh Posté le 21-06-2007 à 10:33:04    

Bonjour, je voudrais votre avis sur la réalisation d'un site, notamment d'un formulaire.
    Normalement on doit privilégier l'utilisation des tableaux pour l'affichage de données, sinon préférer l'utilisation de blocks (<div>...</div> ) couplé avec du CSS pour le positionnement.
    Ma question n'est pas technique, mais plutôt d'ordre esthétique de codage. Mon formulaire se divise en plusieurs parties...donc j'ai plusieurs solutions :
 
    1 - Utiliser un tableau, contenant à son tour d'autres tableau pour chaque section du formulaire
 
    2 - Utiliser un tableau (encore), mais cette fois séparer les différents champs par des fieldset (c'est plus propre je trouve).
 
    3 - Utiliser des blocs (balises <div>...</div> ) et les positionner en utilisant un fichier *.css
 

Code :
  1. <body>
  2.  
  3.         <!–– L en–tête ––>
  4.         <div id="en_tete">
  5.         </div>
  6.         <!–– Le menu ––>
  7.         <?php include("menu.inc.php" ); ?>
  8.        
  9.         <!–– Le corps ––>
  10.         <div id="corps">
  11.             <h1>Mon titre</h1>
  12.                 <p>
  13.                     obligation de remplir les champs marqués d une étoile<br/>
  14.                 </p>         
  15.             <form name ="1 formulaire" method="post" action="traitement1">   
  16.                 <div class = "en_tete" >
  17.                         <!--   En-tête du fromulaire -->
  18.                 </div>
  19.                 <div>
  20.                         <!--  Cadre 1 -->
  21.                         <div>
  22.                             <!-- Sous-cadre 1 : en haut à gauche-->
  23.                         </div>
  24.                         <div>
  25.                             <!-- Sous-cadre 2 : en haut à droite -->
  26.                         </div>     
  27.                         <div>
  28.                             <!-- Sous-cadre 3 : en bas sur toute la largeur -->
  29.                         </div>                       
  30.                 </div>
  31.                 <div>
  32.                         <!--   cadre 2 -->
  33.                         <div class = "en_tete">
  34.                             <!-- en-tête -->
  35.                         </div>
  36.                         <div>
  37.                         </div>
  38.                 </div>                                     
  39.                 <div>
  40.                         <!--   Commentaires -->
  41.                 </div>                   
  42.             </form>
  43.            
  44.             <form name ="form 2" method="post" action="traitement2">   
  45.                 <!-- ... -->
  46.             </form>
  47.             <form name ="form 3" method="post" action="traitement 3">   
  48.                 <!-- ... -->               
  49.             </form>
  50.  
  51.         </div>
  52.         <!–– Le pied de page ––>
  53.         <div id="pied_de_page">
  54.             <p>Copyright "MaCorporationAMoi" 2007‚ tous droits réservés</p>
  55.         </div>
  56.     </body>


 
    Pour information seul un formulaire sur les différents présent sera affiché. Pour cela je pense utiliser un attribut hidden associé à une structure if/then/else en langage php.
    Merci de prendre le temps de me répondre.

Message cité 1 fois
Message édité par C4O2 le 21-06-2007 à 10:34:09
Reply

Marsh Posté le 21-06-2007 à 10:33:04   

Reply

Marsh Posté le 21-06-2007 à 10:37:26    

Très sincèrement, je suis en train de bosser sur un formulaire et j'ai vite abandonné l'idée d'utiliser des DIV car j'avais une incompatibilité sur cette saloperie de navigateur que l'on appelle IE. Et une incompatibilité avec un menu déroulant que j'avais mit en place.
 
Je me suis résigné à utiliser des tableaux.


---------------
"Nous avons tous nos machines du temps. Celles qui nous ramènent en arrière sont les souvenirs, celles qui nous projettent en avant sont les rêves."
Reply

Marsh Posté le 21-06-2007 à 10:43:58    

AlphaZone a écrit :

...j'ai vite abandonné l'idée d'utiliser des DIV car j'avais une incompatibilité sur cette saloperie de navigateur que l'on appelle IE....
Je me suis résigné à utiliser des tableaux.


 
    Merci pour ta rapidité.
    Oui au début je pensais également bien galérer à jongler entre les différents comportements des navigateurs firefox, IE (voire autre : Netscaope, Opéra) et les différents versions (IE 4, 6, 7, la v.7 se comporte bien mieux soit disant...).
    Mais mon application va être utilisé sur un intranet... Et les utilisateurs sont fortement conviés à utiliser firefox.
    Donc je peux me passer de la compatibilité (affichage correct) avec IE (Un rêve pour tout les concepteurs de site web je pense ^^).
    Mais effectivement ça me paraît plus simple d'utiliser des tableaux plutôt que des blocs. Cependant je suis censé mettre plusieurs en en-têtes. Donc utilisation de frameset avec les tableaux ou mise en forme avec css pour les cellules concernées...

Reply

Marsh Posté le 21-06-2007 à 10:50:57    

Oui enfin bon, le positionnement CSS peut certes s'avérer galère,... au début.  
 
Après le coup de main vient vite, donc l'utilisation de tableaux n'est à mon avis pas du tout justifiée. Bien sur,... tu peux toujours te dire que c'est un intranet, et que donc tu te fous de l'accessibilité, du respect des normes, etc. A toi de voir...


---------------
♈ ♋ ♌ ♍ ♎ ♏ - Agora Fidelio | Galerie d'art Toulousaine
Reply

Marsh Posté le 21-06-2007 à 11:04:16    

j_lecruel a écrit :

...l'utilisation de tableaux n'est à mon avis pas du tout justifiée. Bien sur,... tu peux toujours te dire que c'est un intranet, et que donc tu te fous de l'accessibilité, du respect des normes, etc. A toi de voir...

 

   Salut! Il s'agit de mon premier site web conçu de A à Z par ma personne. J'ai déjà participé à la réalisation de sites mais avec un partage des tâches.
    Je cherche donc à réaliser quelque chose de fonctionnel certes, mais surtout facile à maintenir (bon normalement ce n'est pas censé être modifié ou alors on refait le formulaire...) et de préférence respectant les normes.

 

   Un point cependant : le respect des normes oui, jusqu'à certain point... Celà m'a joué des tours notamment lors de la réalisation d'un site en JSP fondé pour le fun (chacun ses plaisirs) sur le framework (modèle de conception) STRUTS. Ayant le temps de le réaliser je me suis galérer à faire les chose très (trop) proprement, tout ça pour au final avoir passé énormément de temps et ne pas avoir réalisé le projet dans les délais (coup dur pour un projet "facilement" [tout est relatif] réalisable).

 

   Donc oui d'accord avec toi, les tableaux sont à éviter pour la présentation d'un site. Mais tout se joue sur le mot éviter.
    Bon d'accord ici l'utilisation combiné de blocs et de CSS est un peu plus prise de tête mais tout de même réalisable. Ce que je veux dire c'est que si je décidais d'utiliser un tableau, on pourrait critiquer sur le styler de codage, mais pas forcément sur le respect des normes.
    Dans mon cas la structure sous forme d'un tableau se justifierai. Mais effectivement si il avait s'agit d'un simple alignement ou du positionnement d'une image... l'utilisation d'un tableau n'aurait aucune justification (sinon la facilité).


Message édité par C4O2 le 21-06-2007 à 11:05:18
Reply

Marsh Posté le 21-06-2007 à 11:13:40    

j_lecruel a écrit :

Oui enfin bon, le positionnement CSS peut certes s'avérer galère,... au début.  
 
Après le coup de main vient vite, donc l'utilisation de tableaux n'est à mon avis pas du tout justifiée. Bien sur,... tu peux toujours te dire que c'est un intranet, et que donc tu te fous de l'accessibilité, du respect des normes, etc. A toi de voir...


J'ai un menu horizontal à plusieurs niveaux composé de listes trouvé sur un site. Dans le CSS qui le compose. Il y a des propriétés à float.
Dans mon cas, j'avais utilisé, pour mon formulaire, des div ayant pour class "colomn-left" et "colomn-right". J'avais réussi en vain à les positionner comme je le souhaitais à l'exception près que sous IE, mon formulaire perdait sa position lorsque je passais sur le menu. Ensuite j'ai utilisé la propriété float, toujours pour mon formulaire. Cependant, lorsque je passais sur le menu, mon formulaire venait par dessus.
Biensur, ces problèmes, je les ai rencontré sous IE. Sous firefox, j'avais réussi à ce que tout tienne parfaitement en place. Voila comment haïr un navigateur au point qu'on souhaite sa mort. Grrrrr IE !!!


---------------
"Nous avons tous nos machines du temps. Celles qui nous ramènent en arrière sont les souvenirs, celles qui nous projettent en avant sont les rêves."
Reply

Marsh Posté le 21-06-2007 à 11:22:04    

C4O2 a écrit :

Bonjour, je voudrais votre avis sur la réalisation d'un site, notamment d'un formulaire.
    Normalement on doit privilégier l'utilisation des tableaux pour l'affichage de données, sinon préférer l'utilisation de blocks (<div>...</div> ) couplé avec du CSS pour le positionnement.


C'est pas une question d'utiliser des tableaux versus utiliser des divs, c'est une question d'utiliser les éléments sémantiquement adaptés.
 
Chaque élément HTML, à part DIV et SPAN, a une signification (plus ou moins précise), et on tente d'utiliser le plus adapté: h1 à h6 pour les titres de diverses importances, p pour les paragraphes de texte, blockquote et cite pour des citations, etc... [:spamafote]  
 
Pour les formulaires, si tu veux faire des formulaires relativement simples c'est très faisable avec des combinaisons de labels, divs, paragraphes et fieldsets, si tu veux faire des layouts complexes c'est pas faisable en CSS (les formulaires sont un cas assez particulier et franchement merdique niveau CSS)


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 21-06-2007 à 13:44:23    

moi j'utilise le css pour mes formulaires. certes ils ne sont pas tres complets, mais je pense que pour plus de cases ça marcherait aussi bien. ske tu peux faire c'est une feuille css spécifique pour ton formulaire si le code css s'avère un peu lourd :o


---------------
Nikon D7000 + 18-105VR + 35mm 1.8
Reply

Marsh Posté le 22-06-2007 à 08:28:02    

   Et oui pas de chance AlphaZone, IE reste un cas à part. Il me semble cependant qu'ils ont fait certains efforts en sortant (enfin) IE7. Mais le mal est déjà fait IE6 étant déjà largement utilisé.
    1 point pour toi Masklinn il existe des balises ayant une sémantique adaptée : label, p, h1, ... avant d'utiliser des div et span à tort et à travers.  
    dartyduck +1 -1 = 0 Oui séparer le fond et la forme html & css permet d'avoir une haute satisfaction intérieure (et tout de même permettre aux personnes souffrant d'un handicap visuel et aux autres supports que les PC d'avoir un rendu compréhensible). Cependant pour les formulaires, je trouve css assez mal adapté, ou bien il faut avoir déjà travaillé avec css et connaître la plupart des balise et leur utilisation (et interaction :'( ) (je rejoins MAsklinn).
    Cependant je suis là pour apprendre... donc pourquoi faire simple quand on peut faire compliqué?
    Ajouter un css juste pour le formulaire. Oui pourquoi pas, mais le codeur risque d'oublier l'héritage. On peut faire des includes dans du css? (sans passer par de la génération php?).  
 
     

Reply

Marsh Posté le 22-06-2007 à 13:16:44    

pas d'include dans le css. mais rien ne t'empeche d'ajouter un lien stylesheet css dans ton header, header que perso je mets dans une page seule, intégré par un include, et donc pas d'oubli lors de la maintenance :o


---------------
Nikon D7000 + 18-105VR + 35mm 1.8
Reply

Marsh Posté le 22-06-2007 à 13:16:44   

Reply

Marsh Posté le 22-06-2007 à 15:03:50    

   Je n'ai pas compris. ^^ Mais ce n'est pas grave...
    header, tu parles des balises <head>. Donc à sa place. Au final tu n'as qu'un css dans ta page et non pas un pour la page et un pour le formulaire. C'est ce que tu voulais faire, ou alors je n'ai pas compris.
    Il me semble que tu ne peux avoir qu'une feuille de style qui s'applique sur ta feuille. Tu ne peux pas mélanger plusieurs feuilles.
    Je reviens avec un exemple où il me semble que tu ne puisses pas le faire avec CSS mais avec un tableau oui.

Reply

Marsh Posté le 22-06-2007 à 15:18:12    

Ce n'est qu'un example très facile à réaliser avec un tableau. Possible en CSS???
 
    J'aimerais que mes deux boîtes aient une taille identique. Sans pour autant en préciser la taille. Je voudrais que les deux boîtes prennent la hauteur de la boîte la plus longue. A priori il devrait être possible de les adapter au bloc père. Je rajoute donc un <div> (niveau sémantique rien ne convient ;) ), mais lorsque j'essaie d'afficher la bordure, on se rend compte que celui-ci n'encadre pas les blocs enfants? Pourquoi? Cela vient de l'utilisation de la propriété float je pense...?
 
    Le code html :

Code :
  1. <body>
  2.         <p class="bloc_a_gauche">
  3.             <label>CODE<br />
  4.                 <input type = "text" name = "code"/>
  5.             </label><br /><br />
  6.             SEXE<br />
  7.                 <label><input type="radio" name="login" checked = "checked" value="login" />H</label><br/>
  8.                 <label><input type="radio" name="login" value="unite" />F</label>
  9.         </p>
  10.         <p class = "separation_verticale">&nbsp;</p>
  11.         <p class = "bloc_a_droite">
  12.             blablabla<br />
  13.             <label>X :<br />
  14.                 <input type = "text" name = "nom_contact"/>
  15.             </label><br />
  16.             <label>Y :<br />
  17.                 <input type = "text" name = "prenom_contact"/>
  18.             </label><br />                   
  19.             </br>
  20.             <label>Z :<br />
  21.                 <input type = "text" name = "tel_contact"/>
  22.             </label><br />
  23.         </p>
  24.         <p class = "centre">
  25.             Je suis centré!!!
  26.         </p>
  27.     </body>


 
    Le code css :

Code :
  1. body{
  2.     width : 90%;
  3.     margin : auto;     /* Permet de centrer la page */
  4.     margin : auto;
  5.     margin-top : 20px;
  6.     margin-bottom : 20px;
  7.     background-color : pink; 
  8. }
  9. body div{
  10.     border : solid;
  11. }
  12. /* Le corps de la page */
  13. #corps{
  14.     margin : auto;
  15.     padding : 5px;
  16.     color : black;
  17. }
  18. .bloc_a_gauche{
  19.     float : left;
  20.     width : 48%;
  21.     text-align : center;
  22.     border : solid;
  23. }
  24. .separation_verticale{
  25.     float : left;
  26.     width : 1%;
  27.     height : 400%;
  28.     background : green;
  29.     border : solid red;
  30.    
  31. }
  32. .bloc_a_droite{
  33.     float : right;
  34.     width : 48%;
  35.     text-align : center;
  36.     border : solid;
  37. }
  38. .centre{
  39.     clear : both;
  40.     text-align : center;
  41.     width : 50%;
  42.     border : solid;
  43. }


 
 La somme des propriétés width n'est pas de 100%, car les bordures se rajoutent au calcul.


Message édité par C4O2 le 22-06-2007 à 15:24:48
Reply

Marsh Posté le 22-06-2007 à 15:23:15    

Déjà tu peux mettre un overflow:auto; au bloc conteneur pour que celui-ci s'étire avec le contenu.


---------------
♈ ♋ ♌ ♍ ♎ ♏ - Agora Fidelio | Galerie d'art Toulousaine
Reply

Marsh Posté le 22-06-2007 à 15:28:33    

j_lecruel a écrit :

Déjà tu peux mettre un overflow:auto; au bloc conteneur pour que celui-ci s'étire avec le contenu.


    Je confirme. Ca fonctionne maintenant la bordure du bloc parent entoure les enfants.  
    Reste à dire à ceux-ci de coller au moule du père...

Reply

Marsh Posté le 22-06-2007 à 16:19:35    

Putain je crois rêver en lissant ce sujet...
Pas pouvoir mettre 2 feuilles de Style dans la même page...ah lalalala.
 
Bon man : Comme à dis Masklinn -> Formulaire on utilise les outils sémantique donné pour cette effet.
 
Un formulaire, c'est pas faire pour avoir 3 champs à droite, 2 en diagonale, 5 tout en bas horizontal...etc
 
Un formulaire, c'est une plaie à remplir, et donc ça doit être simple à utiliser.
 
ici des exemples de formulaires stylé :
 
 
http://www.cssplay.co.uk/menu/form.html (En bas, clic pour changer le style)
http://www.picment.com/articles/css/funwithforms/
http://pixy.cz/blogg/clanky/css-fieldsetandlabels.html
http://www.fastclemmy.com/index.ph [...] ement-beau
 
 
ps: écoute pas dartyduck, ou posément, car ce mec raconte que de la merde.

Reply

Marsh Posté le 25-06-2007 à 00:42:50    

   Désolé de ne pas avoir répondu plus tôt mais je n'ai pas accès à Interet le week-end.

xtof_83 a écrit :

Putain je crois rêver en lissant ce sujet...
Pas pouvoir mettre 2 feuilles de Style dans la même page...ah lalalala.


    Ca c'est moi qui était surpris ^^. Je sais que l'on peut mettre différentes feuilles de style pour proposer des alternatives. Mais ce qui m'était proposé était d'ajouter une feuille de style spéciale pour le formulaire... Donc une feuille de style principale, et une autre qui s'ajoute par dessus??? Je ne dis pas que c'est impossible. Je dis que ça m'étonne, car je n'ai rien vu de tel jusqu'à maintenant.

xtof_83 a écrit :


Bon man : Comme à dis Masklinn -> Formulaire on utilise les outils sémantique donné pour cette effet.


    Tout à fait d'accord. Pas de <div>, <span> à tout bout de champ ^^. Maintenant mettre un <p> alors qu'il n'y a pas de texte :/ autant mettre un <div>.

xtof_83 a écrit :


Un formulaire, c'est pas faire pour avoir 3 champs à droite, 2 en diagonale, 5 tout en bas horizontal...etc
Un formulaire, c'est une plaie à remplir, et donc ça doit être simple à utiliser.


    Tu marques un point et tu me fais prendre conscience de ma demi-erreur. Oui c'est vrai que positionner des champs à tout bout de champs (pardon...c'était facile) ne facilite pas la compréhension du formulaire.
    Cependant j'étais parti sur cette idée, car après remplissage du formulaire, j'aimerais avoir une version imprimable du formulaire qui tienne sur un format A4. J'ai déjà un modèle avec justement des informations dispersées.
    Donc admettons que je me résigne à réaliser un formulaire simple (agrémenté d'un design simple) pour ne pas perturber l'utilisateur, je vais tout de même devoir positionner ces différents éléments par la suite dans une autre page (donc sans formulaire) pour pouvoir l'imprimer.  
 
    Je te remercie pour tes différents exemples de formulaires. Je pense partir sur une strucure simple avec des <filedset> (idée de départ SIC).
 
    P.S.: Ne jette pas la pierre sur dartyduck il a essayé de m'aider et ne m'a pas proposé d'erreurs ayant conduit à des heures de calvaires... Nous sommes sur un forum donc à la recherche d'idées pour avancer rarement d'une solution toute faite (quoique parfois ce soit agréable... mais alors ou serait le plaisir de programmer :D). Merci pour l'avertissement toutefois. ;)


Message édité par C4O2 le 25-06-2007 à 00:43:35
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed