Conception avec des tableaux

Question

J'ai conçu des sites web sans tableaux depuis un moment maintenant. Le problème est que cela peut prendre beaucoup de temps pour terminer le site. Les personnes qui conçoivent en utilisant des tableaux peuvent terminer beaucoup plus rapidement. Quel est un bon tutoriel ou un lien pour faire ce genre de chose ?

Je sais que c'est faux, mais j'ai remarqué que beaucoup de clients s'en moquent vraiment et ils veulent leur site le plus rapidement possible. Faire de la manière des div, selon le site, peut prendre une éternité.

PS: J'ai essayé de concevoir le site dans Photoshop ou Illustrator puis exporté le design en tant que page web, mais quand il s'agit de modifier le design, je n'arrive pas à comprendre comment obtenir le site pour s'afficher correctement.. et généralement je me mets en colère et commence à coder à la main. Je trouve que coder à la main est beaucoup plus facile que tout le reste. Je pense que c'est une mauvaise habitude ou cela peut l'être. Je mets plus de temps à le faire à la main cependant.

Answer 1

Il y a plein de tutoriels disponibles sur le web, mais je vais aborder les choses différemment dans ma réponse.

Créez-vous ces pages pour faire les choses correctement ou les créez-vous dans un but commercial ?

Si c'est pour la première raison, apprenez autant que possible sur les solutions de type CSS. Vous devriez le faire de toute façon, mais ne laissez pas cela entraver la livraison.

Si c'est pour la deuxième raison, je doute que le client se soucie de la 'pureté' du code derrière, du moment que cela a l'air correct. Leur principale préoccupation sera la rapidité de livraison et le bon rendu sur tous les principaux navigateurs.

C'est pour cela que j'utilise encore des tableaux pour la mise en page des éléments que je livre à mes clients. Je ne les teste que sur trois navigateurs (je ne dirai pas lesquels) car c'est tout ce que mes clients veulent. Ils se soucient vraiment peu de savoir si Opera sur l'iPhone (par exemple) rend correctement puisque ce n'est pas leur marché cible.

Answer 2

Peut-être que je suis un Luddite, mais je ne vois rien de mal à utiliser un tableau pour la mise en page de la page. Cela fonctionne partout et comme vous l'avez dit, les utilisateurs n'y attachent pas beaucoup d'importance. Notez que j'ai dit un tableau ; les sites avec plusieurs tableaux imbriqués sont un cauchemar à entretenir. Et simplement parce que vous utilisez un tableau pour le schéma de base ne veut pas dire que vous ne devriez pas utiliser le CSS de manière intensive pour le styliser et le reste de votre site.

Answer 3

Vous pouvez obtenir le meilleur des deux mondes en utilisant un balisage HTML correct, puis, en CSS, en utilisant les différentes valeurs relatives aux tables de la propriété display.

En ce qui concerne l'utilisation des tableaux en HTML, voici ce que dit le W3C (voir Tables in HTML documents):

Les tableaux ne doivent pas être utilisés uniquement comme moyen de mise en page du contenu du document car cela peut poser des problèmes lors de rendu sur un support non visuel. De plus, lorsqu'ils sont utilisés avec des graphiques, ces tableaux peuvent obliger les utilisateurs à faire défiler horizontalement pour voir un tableau conçu sur un système avec un plus grand écran. Pour minimiser ces problèmes, les auteurs devraient utiliser des feuilles de style pour contrôler la mise en page plutôt que les tableaux.

Steve

Answer 4

Si vous aimez les tables, que vous connaissez les tables et qu'elles ne vous posent aucun problème, alors restez avec elles, mais passer aux div peut être assez libérateur. Cependant, vous devez comprendre le positionnement et je n'ai pas trouvé de meilleur tutoriel que le suivant pour vous apprendre comment positionner des divs

http://www.barelyfitz.com/screencast/html-training/css/positioning

Answer 5

Le meilleur site de tutoriels que je connaisse est htmldog qui, malgré le nom, traite principalement de css.

Aussi, deux sites inestimables pour reproduire des conceptions de tableau avec des divs sont :

1. Faux columns (pour rendre les divs de hauteur égale)
2. Ce site, qui va générer le html et le css de mise en page de page de base compatible avec tous les navigateurs pour vous : http://fu2k.org/alex/css/onetruelayout/example/interactive

Restez avec les divs - une fois habitué, cela deviendra naturel, peut-être même plus rapidement qu'avec les tables