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

La mise en page basée sur les tableaux est extrêmement simple, du moins conceptuellement. Un tableau commence par``

et se termine par . À l'intérieur, vous avez zéro ou plusieurs lignes (...), à l'intérieur desquelles vous avez zéro ou plusieurs colonnes (...). Il y a quelques autres balises (thead/tbody/tfoot, th pour les cellules d'en-tête), mais c'est vraiment tout ce que vous avez besoin de savoir sur les tableaux - pas besoin de tutoriel.``

``

Les principaux avantages d'un tableau sont :

1. La taille d'un tableau s'ajuste en fonction de la taille du contenu
2. Les colonnes s'alignent toujours, facilitant l'alignement vertical du contenu
3. Simple à coder - quelques lignes de HTML suffisent pour la structure de base
4. Pris en charge universellement - le tableau aura l'air et se comportera correctement dans les anciens/navigateurs étranges (je te regarde, IE!)

Les inconvénients des tableaux incluent une relation "c'est compliqué" avec div et CSS, sans oublier le mépris de vos pairs. Les tableaux ne sont pas un remplacement complet pour div et CSS, mais ne laissez personne vous dire que div et CSS sont des remplacements complets pour les tableaux non plus.

Lorsque vous essayez de styliser un tableau, il y a quelques éléments avec lesquels vous pouvez jouer pour le faire ressembler à ce que vous voulez :

1. border - cela définit une bordure autour et entre les cellules du tableau
2. padding - c'est la quantité d'espacement entre le contenu et les bords de la cellule
3. text-align - alignement horizontal du contenu dans la cellule
4. vertical-align - alignement vertical du contenu dans la cellule (utile pour le centrage vertical!)
5. border-collapse - vous pouvez collapse la bordure pour supprimer tout espacement entre les cellules

``

Answer 2

W3Schools a un assez bon tutoriel ici:

http://www.w3schools.com/html/html_tables.asp

Vous voudrez peut-être prendre le temps d'étudier l'utilisation des DIV, CSS, etc., car l'exportation d'un site web depuis Photoshop et Illustrator ne vous apportera que des maux de tête lorsque vous devrez apporter de petites modifications. (Ainsi que de nombreux autres scénarios.)

Answer 3

Si vous utilisez des tables, vous aurez beaucoup plus de problèmes si vous essayez de faire du DHTML sophistiqué. Les éléments de table ne sont pas des éléments de bloc, ce ne sont pas non plus des éléments de boîte, ce sont des tables.

Si vous avez simplement un site HTML statique sans javascript, alors vos problèmes ne sont pas aussi graves, cependant un point du design sans table est de séparer la conception et la structure. Ce qui vaut la peine d'apprendre le css.

Par exemple, oubliez juste les avantages et l'absence de maux de tête à devoir traquer la conception de la mise en page de la table lorsque vous souhaitez apporter des ajustements plus tard, mettre toutes les règles de conception dans un fichier css réduit les téléchargements ultérieurs pour les clients, car votre css sera mis en cache même si vos pages de balisage sont générées de manière dynamique via PHP. Cela rend votre site plus rapide.

Et de toute façon, de nombreux développeurs peuvent créer des mises en page sans table en css aussi rapidement que d'autres personnes créent des sites moches utilisant des tables et des spacer.gif.

Answer 4

N'est-ce pas la question où se trouve un tutoriel pour la mise en page div? Je viens de lire un livre sur l'accessibilité du web qui indique clairement la préférence pour la mise en page div.

Answer 5

Votre argument est valable, coder un site avec des tableaux est beaucoup plus rapide au départ. Le problème avec les tableaux est qu'ils sont beaucoup plus difficiles à maintenir à long terme. En utilisant des divs, vous aurez un temps beaucoup plus simple lors de l'ajustement des changements de style ou de mise en page à l'avenir.

Si le site que vous créez ne nécessitera que très peu ou pas du tout de futurs entretiens, les tableaux seraient probablement meilleurs / plus rapides. Cependant, si vous envisagez de faire des modifications à la conception / mise en page du site à l'avenir (même juste une quantité moyenne de changements / correctifs), une conception centrée sur les divs sera beaucoup plus satisfaisante.