L'essentiel de Dreamweaver CC 2017

Créer des tableaux

Testez gratuitement nos 1270 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Aujourd'hui, les données tabulées sont incontournables dans les contenus web. La balise table et les outils de Dreamweaver vous aideront à les présenter correctement. Pour commencer, voyez comment tout mettre en place.
06:26

Transcription

Bien que parfois encore, leur utilisation soit controversée, les tableaux sont quelque part un incontournable aujourd'hui de la création et de la conception de site web surtout quand il s'agit de données tabulées. Alors ils sont controversés parce que pendant des années, on les a utilisé pour faire de la mise en page de contenu ce qui les rend inextricable aijourd'hui à l'heure du mash-up et des échanges de données, les données. Donc en fait, n'utilisez pas de tableau pour faire de la mise en page de contenu mais les utiliser pour faire de la mise en page de strucutration de contenu dans le cadre de données tabulées. Donc ici Dreamweaver va pouvoir nous aider mais va quand même être un peu limité va alloir un peu ouvrir le capot dans certains cas pour ajouter un certain nombre de balises. J'ai prévu une simple feuille de style qui va nous permettre ici de disntiguer rapidement qui est qui. La table est encadrée par une bordure de couleur verte foncée. Elle a un padding top de 20 pixels, une marge 0 auto pour le centrer et une largeur de 90. Surtout ce qui est important maintenant c'est des TR ont une bordure de 3 pixels de couleur orange on va dire. Les TH vont avoir les têtes header vont avoir une couleur olive, et les balises, les classiques balises cellules vont être gris clair. Donc ici on a pas réellement besoin du style, c'est pour nous aider à voir autre chose qu'un simple damier de bataille navale rectangulaire composé de colonnes et d'orange. Donc, ici on utilise la balise table depuis la balise d'insertion HTML classique ici et cette balise table me propose de finir le nombre de minges. On va utiliser 5 lignes. Colonnes, je vais prendre 3 colonnes. Largeur, je ne la défini pas puisqu'elle a été définie dans la feuille de syle CSS. LArgeur de bordure, je l'enlève aussi je n'en veux pas, je veux le gérer par des CSS. Marge intérieure, espacement entre les cellules c'est très clair, ici c'est le padding des cellules et l'espacement entre les cellules c'est tout simplement le marging de chaque rangée que l'on va pouvoir avoir. Mais ça je préfère vraiment qu'on les gère avec des CSS plutôt que de rentrer dans le structurel pour ce côté-là. Ensuite, est-ce que vous avez des en-têtes dans le tableau ? Non vous allez avoir un tableau basique, classique. Vous aurez des en-têtes sur la colonne de gauche par exemple le nom Bob, Rita, Ernest, Ursule. Ici vous pourrez avoir que des en-têtes de colonne donc janvier, février, mars ou les deux. bob en janvier, Bob en févirer eccetera. Donc on va choisir les deux ici. La légende du tableau ça va être tableau de données. Vous pourriez rentrer revenus du mois de janvier février eccetera et le résumé, description sommaire du contenu de ce tableau. Voilà très important de le faire. L'attribut se marie et la balise caption ici qui va être utilisée. Donc vous faites ok et le tableau se met en place directement dans les données. Alors, ce qui nous importe ici maintenant, c'est de voir que ce tableau ici possède bien dans la partie haute, un tableau de données avec un border ici qui a été placé à cet endroit-là. On a bien un border top, un pixel solide c'est ce vert-là et vous voyez bien que la balise caption ici qui apparaît dans la partie haute utilise comme titre de tableau mais à l'intérieur de la balise table bien que visuellement il soit présenté à l'exterieur. Donc évitez de mettre des h1,h2,h3 eccetera pour définir le titre de votre tableau, utilisez la balise caption au moins si elle fait partie du tableau et au niveau accessibilité et référencement c'est le top. Donc ce que l'on peut voir c'est que les TR ici les fameuses rangées n'ont pas du tout d'impact puisque j'avais mis un border de 3 pixels solide de cette couleur ici majestueusement orange, rien ne s'y passe. Par contre, si on va rajouter une class à cet élément-là, donc on va l'appeler par exemple rangée et que cette rangée, au lieu de l'utiliser sous forme de border, j'utilise.. donc je vais commenter cette partie-là et j'utilise simplement un background derrière et je vais utiliser cete couelur ici parce que elle me plaisait en plus. Voilà. On va placer maintenant en notre tableau ici dans une des rangées, ici une class qui va être cette rangée ici Ctrl S il ne se passera rien. Pourtant on a bien la rangée qui doit passer au niveau de la cellule et qui ne va pas donner cette couleur. Maintenant ce qui est important de comprendre au sein de la balise tableau et ce que Dreamweaver va pouvoir nous aider à faire c'est que vous voyez les TH. On a un TH et ici, on a également un TH. Oups, Ctrl Z. Ici j'ai un TH également qui va me permettre de voir que c'est une en-tête. Mais ce qui est important à côté du TH c'est dans quel sens ce TH va-t-il jouer. Ici si je regarde cette partie-là, le scope c'est la col. C'est-à-dire que ce scope, son action d'en-tête, ça va être une colonne. Alors que celui-ci, ce scope d'action va être une rangée. Donc on voit bien ici le head c'est celui de cette rangée alors que ce col, ce TH ici, son scope c'est la colonne. Donc c'est très important de pouvoir définir ce genre d'attribut. Et ça, Dreamweaver le fait pour nous. Là où Dreamweaver manque un petit peu de précision là-dessus c'est que le tbody, la balise qui contient le contenu des données se trouve être l'intégralité du tableau. Personnellement, je pense qu'il serait préférable de dire que les données du tableau commencent ici. Que ici Ctrl T pour pouvoir donner une balise, on va donner un t head. Ici en en-tête de tableau. Donc ici on a une en-tête de tableau ici un tl et bien entendu que la dernière ligne devrait pas être ici elle devrait se placer ici et ici, Ctrl T, on devrait avoir un tfoot chose que l'on a pas avec Dreamweaver. Alors, édition, code, apliquer le format source pour restructurer notre tableau. Vous voyez que ça n'a rien changé d'un point de vue visuel ou structurel à ce niveau-là mais enfin strucutrel à ce niveau-là si ça a changé parce qu'on a une véritable en-tête de tableau ici. qui pourrait être constitué de une voire plusieurs colonnes, d'accord ? Ici et chose que le tbody va faire c'est qu'il va pouvoir intégrer le contenu des données propres.

L'essentiel de Dreamweaver CC 2017

Prenez en main l’environnement de travail de Dreamweaver. Créez des documents, utilisez les CSS, gérez les liens hypertexte, les fichiers multimédia, les formulaires, etc.

7h28 (98 vidéos)
Aucun commentaire n´est disponible actuellement
 
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :30 janv. 2017

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 !