Blog ENI : Toute la veille numérique !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. Dreamweaver CC pour PC/Mac (édition 2018)
  3. Insérer des tableaux
Extrait - Dreamweaver CC pour PC/Mac (édition 2018) Concevoir des sites interactifs et attractifs
Extraits du livre
Dreamweaver CC pour PC/Mac (édition 2018) Concevoir des sites interactifs et attractifs
1 avis
Revenir à la page d'achat du livre

Insérer des tableaux

La bonne utilisation des tableaux

Les tableaux sur le Web ont eu une vie « tourmentée » ! En effet pendant longtemps (et encore aujourd’hui), ils ont été utilisés pour réaliser des mises en page. Mais, les tableaux devraient être utilisés uniquement pour leur fonction première : présenter des données structurées en lignes et en colonnes. 

Insérer un tableau

 Dans votre page web, placez-vous là où doit être inséré le tableau. Dans le menu Insertion, choisissez Table (CtrlAlt T (PC) ou CmdOption T (Mac)), ou dans le panneau Insertion, dans la catégorie HTML, cliquez sur le bouton Table.

images/18C11-001.png

Dreamweaver ouvre une fenêtre de paramétrage du tableau :

images/18C11-002.png

1. La zone Taille du tableau

 Le champ Lignes permet d’indiquer combien de lignes doit contenir votre tableau.

 Le champ Colonnes permet d’indiquer combien de colonnes doit posséder votre tableau.

 Le champ Largeur du tableau permet d’indiquer la largeur du tableau. Choisissez ensuite l’unité : Pixels pour que le tableau ait une largeur fixe ou Pourcentage pour que la largeur du tableau soit proportionnelle à la largeur de son conteneur, de son élément parent, généralement la fenêtre du navigateur (le <body>). Si vous indiquez 75 %, le tableau aura une largeur des 3/4 de la largeur de la fenêtre du navigateur, quelle que soit la largeur de la fenêtre de celui-ci.

 Le champ Largeur de la bordure permet d’indiquer l’épaisseur de la bordure extérieure du tableau.

 Le champ Marge intérieure des cellules permet de spécifier l’espace entre les bords des cellules et le contenu de celles-ci.

 Le champ Espacement entre les cellules permet...

La structure du tableau

1. Ajouter des lignes et des colonnes

Une fois votre tableau inséré, vous pouvez à tout moment modifier sa structure : ajouter et supprimer des lignes et des colonnes.

 Pour ajouter une nouvelle ligne, cliquez dans la dernière cellule et appuyez sur la touche Tab.

 Pour ajouter une nouvelle ligne au sein du tableau, cliquez dans une cellule. Dans le menu Edition - Tableau, choisissez Insérer une ligne (Ctrl M (PC) ou Cmd M (Mac)).

 Pour ajouter une nouvelle colonne au sein du tableau, cliquez dans une cellule. Dans le menu Edition - Tableau, choisissez Insérer une colonne (CtrlShift A (PC) ou CmdShift A (Mac)).

 Pour insérer une ou plusieurs lignes ou colonnes, cliquez dans une cellule du tableau et allez dans le menu Edition - Tableau - Insérer des lignes ou des colonnes.

images/18C11-005.png

 Dans la fenêtre qui s’affiche, modifiez les options selon vos souhaits puis cliquez sur le bouton OK.

2. Ajouter une colonne

 Vous pouvez utiliser le menu local qui apparaît au niveau des dimensions du tableau. Ces indications apparaissent au-dessus ou en dessous du tableau (selon la position du tableau dans la page). En cliquant sur le petit triangle vert d’une colonne, dans son menu local, vous avez accès aux commandes : Insérer une colonne à gauche ou Insérer une colonne à droite.

images/18C11-006.png

3. Sélectionner des lignes et des colonnes...

Afficher un tableau en mode développé

Dreamweaver vous permet d’afficher votre tableau dans un mode qui « agrandit » les cellules pour avoir un meilleur confort visuel.

 Faites un clic droit pour afficher le menu contextuel dans votre tableau.

 Choisissez Tableau, puis Mode Tableaux développés.

images/18C11-013.png
images/09sf012.png

 Pour revenir au mode standard, faites un clic droit dans votre tableau.

 Dans le menu contextuel qui s’affiche, choisissez Tableau, puis à nouveau Mode Tableaux développés

Vous pouvez aussi cliquer sur l’option [quitter] dans la barre supérieure de la fenêtre du document. 

images/18C11-014.png

Trier un tableau

Dreamweaver vous permet de trier vos tableaux.

 Cliquez dans une cellule du tableau, puis dans le menu Commandes, choisissez Trier le tableau

images/18C11-015.png

 Choisissez les critères de tri avec les listes déroulantes Trier par : choix de la colonne, Ordre : Alphabétique ou Numérique, puis Croissant ou Décroissant, Pour une deuxième clé de tri, faites de même avec Puis par et Ordre. Utilisez les Options pour gérer les en-têtes du tableau. 

Dans cet exemple, le tri s’est fait sur la deuxième colonne, par ordre numérique croissant. 

images/09sf017.png