Discussion :

[aityahia]

je suis tous nouveau dans le développement web alors je me pose des questions, même si après avoir lus plusieurs tuto, j'ai vus que la tendance est plutot DIV mais en consultant le code de plusieurs sites profésionnel je vois que les TABLE sont toujours utilisées pour les mises en page alors je demande votre avis la dessus.

@+

[beeboo]

Salut,

L'utilisation des tables pour la mise en page date de l'époque où c'était la seule solution technique possible (je parle des années avant 2000). Depuis l'apparition de CSS, l'utilisation des tables n'est plus nécessaire et même déconseillée car cela rend les site plus difficilement accessibles. On préfère, dès lors réserver leur usage pour ce à quoi elles servent : l'affichage de données tabulaires.
Pour la mise en page on peut utiliser les éléments sémantiques de html associés à une mise en forme CSS.
Par exemple un menu avec des liens sous la forme d'une liste non ordonnée d'ancres :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<ul id="menu">
  <li><a href="url1" title="titre1>item1</a></li>
  <li><a href="url2" title="titre2>item2</a></li>
  <li><a href="url3" title="titre3>item3</a></li>
  <li><a href="url4" title="titre4>item4</a></li>
<ul>

pour une page avec différents élémets

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="en-tete">
   <h1>gros titre</h1>
   <ul id="menu">
     voir ci-dessus
   </ul>
</div>
<div id="contenu">
  <div id="colonne_gauche">
    code de la colonne de gauche
  </div>
  <div id="colonne_droite">
    code de la colonne de droite
  </div>
</div>
<div id="pied_page">
  code pied de page
</div>

L'avantage de cette façon de coder est évident : on se concentre sur le fond de ce que l'on veut afficher indépendament de la forme et on laisse la forme au code css. On utilise la sémantique du HTML pour définir et nommer les zones afficher. Cela permet de plus de changer de thème sans changer (ou du moins très peu) le code HTML.

Ainsi si dand les exemples ci dessus on veut un menu sous forme d'onglets ou de liste déroulante, cela se fera uniquement sur le CSS et éventuellement un peu de js mais rien au niveau html.

Maintenant il est vrai que beaucoup de concepteurs on gardé leurs habitudes avec les tableaux et que la plupart des éditeurs wysiwyg utilisent les tableaux, ce qui n'est pas fait pour aider les débutants à programmer proprement.

Il est aussi vrai que passer par le CSS demande plus de travail au départ mais sur le long terme, c'est un investissement payant à coup sûr.

[Borus]

Tout à fait d'accord avec Beeboo. L'utilisation des tableaux pour autre chose que pour présenter justement des tableaux encore de nos jours est due au refus ou à la non évolution de certains intégrateurs.
Je vais juste nuancer un rien mon propos, pour les newsletters, je préfère encore utiliser les tableaux, pas par choix, mais parce que la compréhension de plusieurs webmail des codes xHTML et CSS est encore plus archaïque qu'IE6.

[12monkeys]

Bonsoir

Un exemple tout à fait impressionnant de ce qu'on peut faire en css (et qu'on ne peut pas faire avec les tableaux) se trouve ici : http://www.csszengarden.com/

Tu peut choisir sur le menu de droite quel style tu veux afficher.

[aityahia]

je vous remercie tous pour vos réponse qui confirme que la tendance est belle est bien le CSS, mais comment vous la mise en page des formulaire pour l'instant je trouve que le plus simple c'est de placer des table dans des bloc DIV,peut on mettre en page un formulaire avec rien que du CSS (repositionner les champs avec le libellé. )

a+.

[beeboo]

Il ne faut pas non plus se lancer dans une démarche extrémiste.
Ce qu'il faut simplement garder en tête, c'est l'accessibilité du site.
Mettre un formulaire sous forme de tableau n'est pas dramatique, après tout, c'est, la plupart du temps une représentation tabulaire : une colonne pour les labels et une pour les réponses, donc ça se justifie et la lecture par un navigateur non graphique n'en est pas affectée.

Il faut donc simplement prendre du recul par rapport à ce que l'on veut montrer et utiliser la méthode la plus conforme aux standards por être assuré d'une plus grande accessibilité au site.

Il n'est donc pas question de mode ou de tendance, ici, mais du fait que de plus en plus de développeurs intègrent les notions de ce que doit être le web : accessible (à tous les navigateurs et tous les internautes), ouvert : pas de codage propriétaire genre site optimisé pour IE (comme on voyait il y a 10 ans).

[aityahia]

j'ai trouvé sur ce lien un tuto super sympa sur la mise en forme d'un formulaire sans les TABLE j'espère que sa aidera les autres.

a+.