28173 sujets

CSS et mise en forme, CSS3

Tableaux ou non?

Bonjour, Smiley biggrin

Après avoir parcouru les différents topics sur le sujet des CSS; j'aurai aimé dans la mesure du possible que vous puissiez m'éclairer sur certains sujets.

Voilà, j'ai lu et relu différentes explications notamment sur l'utilisation de la balise <div>. (voir liens ci-dessous)

Maintenant, deux questions me turlupinent Smiley confus :

1°/ Quand appliquer une balise <div> et quand utiliser un tableau ? et inversement: Quand ne pas appliquer une balise <div> et quand ne pas utiliser un tableau?

Il semblerait que les 2 soient complémentaires mais dans ce cas, je ne comprends pas pourquoi attribuer une balise <div> dans un tableau sachant que nous pouvons définir un #id par cellule.
(D'après ce que j'ai pu lire dans les liens ci-dessous, beaucoup de webmasters ont trop tendance à remplacer les tableaux par <div>)

De plus, j'ai lu dans un sujet récent une personne confrontée au même pble:
http://forum.alsacreations.com/topic-4-30061-1-Resolu-Votre-avis-tableaux-ou-liste-.html
On lui a conseillé de préférer <div> plutôt qu'un tableau pour la présentation de sa page.
Il me semble que la solution apportée (utiliser <div>) soit plus longue que s'il avait opté pour un tableau...

2°/ Et quelle différence entre la balise <span> et la balise <div>?

http://forum.alsacreations.com/topic-1-12366-1-Qui-peut-mexpliquer-les-div-id-et-div-class-.html
http://blog.alsacreations.com/2006/09/20/281-arretons-de-remplacer-systematiquement-les-tableaux-par-des-div
http://openweb.eu.org/articles/respecter_semantique/
http://blog.alsacreations.com/2005/07/28/175-semantique-semantique-est-ce-que-jai-une-tete-de-semantique

Merci d'éclaircir ce jeune novice que je suis Smiley cligne

Je vous remercie par avance pour les réponses qui vont me permettre d'avancer...
Bonjour,

Si l'on veut rester pragmatique, la réponse est simpliste: on utiliser l'élément table pour baliser des données tabulaires (statistiques,…).
Dans le même esprit, l'ajout de divisions div (et de span, son homologue de type inline pour rebondir sur ta deuxième question) ne devraient être fait que pour répondre à des besoins de mises en page, ces éléments étant totalement neutres sémantiquement.
Autrement dit, initialement, div et span doivent être théoriquement omis d'un document xhtml bien formé. On s'en servira à bon escient lorsque nos besoins de mises en pages ne peuvent être effectués sans ces aides précieuses.
Re,

Merci pour la réponse Benjamin D.C.

Désolé mais j'ai toujours du mal à comprendre... Smiley confused

Tu me dis qu'il faut utiliser les tableaux pour des données tabulaires et d'omettre les balises <div> et <span> d'un document XHTM bien formé.

Là, je ne suis plus ..............

Avant, en HTML, on utilisait les tableaux pour faire la mise en page(comme tu le sais). Par exemple, en mettant .width=100%, le tableau (contenant des éléments:texte, images....) se réajustait automatiquement au navigateur de l'utilisateur.

Et là tu me dis qu'il faut l'utiliser que pour des données tabulaires et <div> et <span> pour de la mise en page.

Pourtant, quand on lit le sujet sur les modèles de mise en page, on s'aperçoit que l'on utilise pas de tableaux mais bien des balses <div>
http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS


Mais alors comment faire? Je ne comprends plus rien Smiley decu


Pourrais -tu m'expliquer d'avantage (voire même avec des exemples)?

Merci d'avance Smiley biggrin
Modifié par bulldog7850 (22 Oct 2007 - 20:30)
bulldog7850 a écrit :

Avant, en HTML, on utilisait les tableaux pour faire la mise en page(comme tu le sais). Par exemple, en mettant .width=100%, le tableau (contenant des éléments:texte, images....) se réajustait automatiquement au navigateur de l'utilisateur.

Et là tu me dis qu'il faut l'utiliser que pour des données tabulaires et <div> et <span> pour de la mise en page.

Mais alors comment faire?
Merci d'avance Smiley biggrin


Et bien c'est l'évolution ...
Et avant, on utilisait des frames et on avait pas de tableau pour structurer sa page ...

Aujourd'hui, les tableaux sont utilisés à leurs juste valeur.
Par exemple, pour lister une série de produits comme on le ferait avec un tableur comme excel.

Les balises 'div' sont considérés comme des blocs de contenu que l'on place comme bon nous semble pour structurer un document. L'avantage de cette technique par rapport au tableau est qu'on a plus vraiment a passer par des découpes d'images fastidieuses ainsi que des problèmes de décalages, etc.

De plus, le code en est que plus propre et plus lisible car la structure de ton document se construit dans une page html et la mise en forme de tes éléments sont gérés en principe dans une feuille css externe.

En xhtml, la sémantique est de rigueur et c'est pour cela que Benjamin dit qu'une balise 'div' ou 'span' ne devrait pas se trouver dans un document xhtml bien formé. En effet, ces balises sont neutre, càd qu'ont ne leur a attribuer aucun rôle par rapport aux balises 'h' (titres), 'p' (paragraphe), ul (liste) , etc.

Mais il est biensure impossible de se passer de 'div' ou de 'span' car elles permettent de créer le squelette d'une page xhtml.

La différence entre une balise 'div' et une balise 'span' se situe au niveau de leur alignement par rapport d'autres balises.

La balise 'div' est de type 'bloc' et la balise 'span' de type 'en ligne'.

==> http://css.alsacreations.com/Bases-et-indispensables/La-structure-des-balises-bloc-et-en-ligne

Je te conseille de faire un petit tour dans la FAQ :

http://forum.alsacreations.com/faq/

Celle-ci répondra beaucoup mieux que moi à tes questions ...



Smiley lol
a écrit :
En xhtml, la sémantique est de rigueur et c'est pour cela que Benjamin dit qu'une balise 'div' ou 'span' ne devrait pas se trouver dans un document xhtml bien formé.


Jvois pas en quoi elle serait plus de rigueur en XHTML qu'en HTML, gaffe aux amalgames (il y a un point de la faq ou un tuto qui en parle).

Ces balises ne sont pas uniquement utiles pour la mise en page, elles peuvent l'être dans d'autres cas de figure :

a écrit :
Thus, authors may use this element in conjunction with style sheets, the xml:lang attribute, etc., to tailor XHTML to their own needs and tastes.


De plus, on peut voir que la spécification (X)HTML n'interdit absolument pas ces balises (même si ils servent que pour la mise en page), un document non sémantique peut tout d'ailleurs être parfaitement conforme.
Modifié par JyuniX (22 Oct 2007 - 22:25)
Je suis tout à fait d'accord et j'ai d'ailleurs ajouté qu'il est impossible de se passer de 'div' ou de 'span' car elles permettent de créer le squelette d'une page (x)html (par exemple)... On pourrait d'ailleur créer un document rien qu'avec des balises div ou span si on veut ... Cela passerait au validateur.

Mais le but est tout de même d'avoir un document bien structuré et d'utiliser les balises adéquates. C'est une philosophie à adopter qui présente de nombreux avantages au niveau de l'accessibilité et du référencement par exemple.
bulldog7850 a écrit :
...

Avant, en HTML, on utilisait les tableaux pour faire la mise en page(comme tu le sais). Par exemple, en mettant .width=100%, le tableau (contenant des éléments:texte, images....) se réajustait automatiquement au navigateur de l'utilisateur.

Et là tu me dis qu'il faut l'utiliser que pour des données tabulaires et <div> et <span> pour de la mise en page.

Pourtant, quand on lit le sujet sur les modèles de mise en page, on s'aperçoit que l'on utilise pas de tableaux mais bien des balses <div>
http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS

Non, tu fais une confusion, on utilise un fichier CSS qui va définir l'apparence du fichier (x)html.

On rajoute des div ou des span quand les éléments (les balises sémantiques) présent ds le html ne suffisent pas à styler le document.
Modifié par Yorick (23 Oct 2007 - 03:46)
Bonjour à Tous, Smiley smile

Je tenais sincèrement à vous remercier pour vos différentes remarques et interventions.

Désormais, le sujet sur les balises div et leur utilisation me semble moins fastidieux.

Merci encore pour votre aide précieuse Smiley biggrin
a écrit :
Je suis tout à fait d'accord et j'ai d'ailleurs ajouté qu'il est impossible de se passer de 'div' ou de 'span' car elles permettent de créer le squelette d'une page (x)html (par exemple)...


Il n'est pas impossible de réaliser un site sans utilisation de div même si dans la pratique ces balises se révèlent souvent indispensables pour un site avec un minimum de contenu et de design.
Arrêtez de jouer sur les mots ... Smiley confus
On parle dans la plus part des cas ...
Modifié par sharky (23 Oct 2007 - 19:59)
Sujet clos
Aller à