CSS : Positionnement et mise en page

Comprendre la mise en page sous forme de tableau

Testez gratuitement nos 1255 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Lorsque l'on parle de mise en page, on fait souvent référence à la mise en page sous forme tableau qu'il faut absolument proscrire. Faites donc une comparaison avec cette ancienne méthode.
05:16

Transcription

Lorsqu’on regarde depuis l’extérieur en consultant sur un navigateur une mise en page ici, par exemple la mise en page très traditionnelle de cette page avec un header, des éléments de menu de navigation horizontaux ici, un side bar considéré avec une image et un texte, puis deux contenus à droite ici, qui seraient le contenu principal et un pied de page, avec cette autre mise en page là a quelques distinctions de précision c’est-à-dire quelques pixels ici, quelques titres d’articles, on se retrouve sensiblement dans la même configuration. Sauf que si l’on regarde le code source de la page, on se retrouve ici avec une mise en page pure et dure en tableau, en dur, dans le texte, alors qu’ici on va se retrouver avec un code source de la page, une mise en page beaucoup plus contemporaine avec des éléments de type html 5, ici comme un header, une navigation, un titre, une side, un main, des articles et un footer, qui seront complètement épurés de toute information visuelle, et toutes ces infos visuelles vont être reléguées à une feuille de style qui lui est accrochée, qui lui est propre et qui lui permet de disposer tous ces éléments de manière indépendante. Donc si je regarde ici mon rendu, en fait, tout le rendu, si je désactive la feuille de style CSS, on va se retrouver ici, si je désactive tous les contenus CSS, avec du contenu pur et dur html. Alors que si dans mon tableau je désactive les CSS, ici, on se retrouve avec la mise en page en tableau, parce que le tableau n’a pas été supprimé. Et puis si maintenant je dois venir, ici dans le code extraire tout ce contenu, voyez, ici c’est un enchevêtrement de balises td, table, width, border, cellpadding qui n’a strictement rien à voir avec le contenu. Ici on a des attributs de couleur dans la balise H2, on va se retrouver avec des balises font-color qui sont complètement obsolètes aujourd’hui, donc tous ces éléments-là vont être imbriqués les uns dans les autres, et vont rendre le contenu complètement inaccessible, d’un point de vue à la fois, accessibilité mais également d’un point de vue structurel, et encore plus sémantique. Alors faites attention à ces mises en page en tableau à presque les faire fuir comme la peste. Mais en fait ce n’est pas tout à fait vrai. Regardez, en allant sur un site de type generatedata.com on va pouvoir générer tout un certain nombre de données, on va pouvoir configurer, ajouter des lignes supplémentaires puis formater ces données comme si c’était un téléphone, un nom, un pays un géo, etc. et on va pouvoir l’exporter sous forme de html tableau. Et donc quand je vais basculer dans ce html ici, si je passe dans la partie code, on voit bien que je suis dans un tableau pur et dur. Ici, ce tableau ce sont des données tabulées, Et on est vraiment, ici, si je sélectionne cet élément on voit que je suis dans une cellule, si je sélectionne cet élément on voit que je suis dans une rangée en TR. Ici on a des colonnes donc on a accès à des données qui vont être tabulées, donc assez intéressantes à utiliser dans ce sens. Eh beh, il ne faut pas donc fuir les tableaux comme la peste dès qu’il s’agit de données tabulées. Encore une fois, il y a tout et son contraire, car regardez ici je suis bien dans un tableau ici, un rendu de tableau avec des colonnes, des lignes, et à y regarder de plus près je ne suis pas dans des colonnes ni des lignes, regardez, je suis dans des éléments de liste. Et si je regarde du côté du code, qu'est-ce qu'on a ? Beh, on a des éléments de type ul, ce sont des petites listes imbriquées les unes sous les autres. Et comment a-t-on obtenu cela, toujours pareil, en se rendant chez generatedata.com on peut extraire sous forme de ul, alors vous pouvez avoir des ul d’ul, etc, peu importe, l’essentiel ensuite c’est de donner tout cela à une feuille de style, et en disant tout simplement que ma feuille ul tu vas me la représenter comme une série de rangée, puisque ce sont des séries de ul imbriquées les unes après les autres. Tu vas les imbriquer sous forme de rangée, les li tu vas me les représenter sous forme de cell et puis, attention, la première ul first of type li, le premier li des premières ul en fait, tu me les représentes comme étant de tel élément, et je vais pouvoir comme ça styler mon en-tête de tableau. Puis après on peut dire que tous les éléments 2 sur 2 en partant du deuxième, on met une couleur d’arrière-plan. Qui fait que quand je passe en mode en direct ici, on a bien notre représentation de la première ligne qui fait l’entête, et puis chacune après qui fait 1 sur 2. Donc vous voyez on peut faire tout et son contraire. Donc ne pas confondre ce qu’on appelait de la mise ne page en tableau par le passé pour mettre le contenu de votre page ou le contenu assez évolué d’une des parties d’un composant par exemple, de faire attention de ne pas utiliser de la mise en page en tableau, mais par contre vous pouvez utiliser des mises en page en tableau pour donner des données tabulées. Et si maintenant ce qui vous intéresse c’est simplement l’aspect tabloïd de vos données, n’oubliez pas que vous pouvez présenter des listes sous forme de tableau. Donc voilà faites bien le tour de la différence qu’il peut y avoir entre la présentation tabloïd des données tabulées et une structure en tableau de votre page.

CSS : Positionnement et mise en page

Exploitez le positionnement en CSS et tirez parti des techniques pour mettre en forme votre site. Utilisez la flottaison des éléments, les propriétés de positionnement, etc.

5h01 (55 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :31 août 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !