28172 sujets

CSS et mise en forme, CSS3

Bonjour !

Je lis un peu partout qu'il est sacrilège d'utiliser des tableaux pour faire des mises en page complexes, et qu'il vaut mieux utiliser d'autres propriétés comme float, width, absolute, relative et consorts.

Toujours en phase d'apprentissage, et plein d'enthousiasme, je m'essaie a la création d'une page d'accueil avec des colonnes à gauche, à droite, des liens en haut, en bas, des pubs, etc.

Et puis, naturellement, au fur et à mesure que je m'arrache un peu les cheveux, l'envie grandissante de créer un tableau s'empare de moi, comme le mal s'empare du monde Smiley lol

Je me dis que si je fais un beau tableau avec des cellules dans tous les sens, le tout en positions fixes (Style pas dépasser les 700 pixels de large), je transforme ma punition en récompense, et modifier ma mise en page devient un vrai dessert...

Quels sont les arguments les plus convaincants pour abandonner l'idée du tableau ?
Heyoan a écrit :
Salut,
ça pourrait être une bonne idée de commencer par lire les articles d'Alsa qui en parlent. Smiley murf


Heu... oui... so sorry ! Suis débutant maladroit qui n'a pas cherché correctement !!!!

Excellents ces liens ! Et merci de ne pas m'avoir enflammé pour mes erreurs de jeunesse Smiley smile
Quelques nuances en vrac:

- Oui, les tableaux de mise en page sont un moyen relativement efficace de créer des mises en page, notamment pour gérer des colonnes et des alignements verticaux.

- C'est bien entendu une méthode qui a ses défauts propres. Comme par exemple le fait que, en table-layout: auto (valeur par défaut), un contenu trop large va forcer la cellule à s'élargir, ce qui n'est pas toujours souhaitable. Ou encore, utiliser une cellule de tableau comme référent pour le positionnement absolu n'est pas évident (ou impossible?).

- On peut reproduire le comportement des tableaux de mise en page en CSS avec display:table et display: table-cell. C'est une fonctionnalité prévue depuis bientôt 11 ans, mais implémentée très tardivement par Internet Explorer (uniquement dans la version 8 sortie au printemps).

- Les tableaux de mise en page se stylent très bien en CSS.

- Les deux points précédents montrent qu'opposer «tableaux de mise en page» et «CSS» est une erreur de jugement.

- La mise en page avec les tableaux ou leur équivalent CSS c'est intéressant, mais il y a d'autres modes de positionnement en CSS et il serait dommage de passer à côté d'une partie des outils disponibles. Les personnes qui ont recours systématiquement aux tableaux de mise en page le font la plupart du temps par ignorance des autres possibilités.

- Une séparation absolue entre le contenu (HTML) et la mise en forme (CSS) est illusoire. Le plus souvent, quand on utilise un élément DIV dans une page HTML, c'est pour pouvoir lui attribuer des styles CSS. Parfois (mais heureusement pas toujours), un changement même léger de mise en page demande à revoir une partie du code HTML. Néanmoins, pour plus de souplesse, il reste préférable de limiter autant que possible la dépendance entre balisage HTML et mise en forme. Les tableaux de mise en page sont moins polyvalents pour la mise en page que des éléments tels que DIV, SPAN, P ou LI, et utiliser massivement des tableaux de mise en page rend à mon avis la modification des styles plus difficile. Il me semble préférable de réserver l'usage des tableaux de mise en page aux cas précis où d'autre types de positionnement sont impossibles ou moins efficaces, et où on voudra une compatibilité IE 6-7.
Florent V. a écrit :
[...]Les personnes qui ont recours systématiquement aux tableaux de mise en page le font la plupart du temps par ignorance des autres possibilités.


Tout d'abord, merci Florent d'avoir résumé ainsi les différences-ressemblances, que j'ai lu vraiment attentivement ! On peut évidemment se poser la question : float ou tableau...

Dans mon cas, comme tu le dis très justement, j'ignore les autres possibilités, ou plus nuancé : je connais les autres possibilités, mais il faut avouer qu'un tableau créé avec par exemple DreamWeaver, c'est simple, intuitif, rapide... Tandis qu'un positionnement correct du texte avec des balises float et consorts, ce n'est quand même pas une sinécure !