Guide d'utilisation Annuler

Présentation de contenus dans des tableaux

Rechercher

Dernière mise à jour le 2 mai 2021

Découvrez comment utiliser des tableaux pour présenter du contenu sur votre site web. Vous apprendrez également à fractionner et fusionner des cellules, ainsi qu’à importer et exporter des données tabulaires.

Les tableaux sont très utiles pour présenter des données tabulaires et mettre en forme du texte et des images dans une page HTML. Un tableau comprend au moins une ligne ; chaque ligne comporte au moins une cellule. Bien que les colonnes ne soient généralement pas spécifiées explicitement en code HTML, Dreamweaver vous permet de manipuler les colonnes, les lignes et les cellules.

Dreamweaver affiche la largeur du tableau et de chacune de ses colonnes lorsque le tableau est sélectionné ou que le point d’insertion se trouve dans celui-ci. En regard des largeurs se trouvent les flèches du menu des en-têtes de tableau et des menus des en-têtes de colonne. Utilisez les menus pour accéder rapidement à des commandes standard relatives aux tableaux. Vous pouvez activer et désactiver les largeurs et les menus.

Si vous ne voyez pas la largeur d’un tableau ou d’une colonne, cela signifie qu’elle n’est pas spécifiée dans le code HTML. Si deux nombres s’affichent, cela signifie que la largeur visuelle qui apparaît en mode Création est différente de la largeur spécifiée dans le code HTML. Cela peut se produire lorsque vous redimensionnez un tableau en faisant glisser son coin inférieur droit ou lorsque vous ajoutez du contenu à une cellule plus grande que sa valeur définie.

Par exemple, si vous définissez une largeur de colonne de 200 pixels, puis que vous ajoutez du contenu qui étend la largeur à 250 pixels, deux nombres s’affichent pour cette colonne : 200 (la largeur spécifiée dans le code) et (250) entre parenthèses (la largeur visuelle de la colonne telle qu’elle apparaît à l’écran).

Remarque :

vous avez aussi la possibilité de mettre en forme vos pages en définissant le positionnement dans le code CSS.

Priorité de formatage des tableaux dans le code HTML

Lorsque vous formatez des tableaux en mode Création, vous pouvez définir des propriétés s’appliquant au tableau tout entier ou à une série de lignes, de colonnes ou de cellules sélectionnées dans le tableau. Lorsqu’une propriété (une couleur d’arrière-plan ou un alignement, par exemple) est définie par une valeur pour tout le tableau et par une autre valeur pour chaque cellule, les propriétés de formatage des cellules prévalent sur les propriétés de formatage de lignes, qui à leur tour prévalent sur celles du tableau.

L’ordre de priorité pour la mise en forme des tableaux est le suivant :

Cellules
Lignes
Tableau

Par exemple, si vous définissez un arrière-plan de couleur bleue pour une cellule et un arrière-plan jaune pour l’ensemble du tableau, la cellule restera bleue, puisque les propriétés de mise en forme des cellules sont prioritaires sur celles du tableau.

Remarque :

lorsque vous définissez les propriétés d’une colonne, Dreamweaver modifie les attributs de la balise td correspondant à chaque cellule de la colonne.

Fractionnement et fusion des cellules d’un tableau

Vous pouvez fusionner n’importe quel nombre de cellules adjacentes (tant que la sélection correspond à une ligne ou à un rectangle de cellules) pour produire une cellule unique s’étendant sur plusieurs colonnes ou lignes. Vous pouvez fractionner une cellule en un nombre quelconque de lignes et de colonnes, qu’elle ait été précédemment fusionnée ou non. Dreamweaver modifie automatiquement la structure du tableau (en ajoutant les éventuels attributs colspan ou rowspan requis) afin de parvenir à la disposition spécifiée.

Dans l’exemple ci-dessous, les cellules se trouvant au milieu des deux premières lignes ont été fusionnées en une seule cellule qui s’étend sur deux lignes.

Insertion d’un tableau et ajout de contenu

Utilisez le panneau ou le menu Insertion pour créer un nouveau tableau. Ajoutez ensuite du texte et des images aux cellules du tableau de la même façon que vous le faites en dehors d’un tableau.

Placez le point d’insertion où vous voulez placer le tableau.

Remarque :

si votre document est vide, le point d’insertion peut uniquement être placé au début du document.
- Cliquez sur Insertion > Tableau.
- Dans la catégorie HTML du panneau Insertion, cliquez sur Tableau.
Définissez les attributs dans la boîte de dialogue Tableau, puis cliquez sur OK pour créer le tableau.

Création d’un tableau

Lignes

Détermine le nombre de lignes du tableau.

Colonnes

Détermine le nombre de colonnes du tableau.

Largeur du tableau

Indique la largeur du tableau en pixels ou en pourcentage de la largeur de la fenêtre du navigateur.

Largeur de la bordure

Indique la largeur, en pixels, des bordures du tableau.

Espacement des cellules

Détermine le nombre de pixels séparant les cellules contiguës du tableau.

Remarque :

Lorsque vous n’affectez pas explicitement de valeur pour la largeur de la bordure, l’espacement entre les cellules et la marge intérieure des cellules, la plupart des navigateurs affichent une largeur de bordure et une marge intérieure des cellules définies sur 1, ainsi qu’un espacement entre les cellules défini sur 2. Pour être sûr que les navigateurs afficheront le tableau sans bordure, marge intérieure ni espacement, définissez Marge intérieure des cellules et Espacement entre les cellules sur 0.

Marge intérieure des cellules

Indique le nombre de pixels séparant la bordure d’une cellule de son contenu.

Aucun

Empêche la création d’en-têtes de colonne et de ligne dans le tableau.

Gauche

Transforme la première colonne du tableau en colonne d’en-têtes, pour vous permettre d’entrer un en-tête pour chaque ligne du tableau.

Haut

Transforme la première ligne du tableau en ligne d’en-têtes, pour vous permettre d’entrer un en-tête pour chaque colonne du tableau.

Les deux

Permet d’entrer des en-têtes de colonne et de ligne dans le tableau.

Remarque :

Il est judicieux d’employer des en-têtes au cas où l’un des visiteurs de votre site web utiliserait un lecteur d’écran. Les lecteurs d’écran lisent les en-têtes de tableau et aident les utilisateurs à garder une trace des informations de tableau.

Légende

Crée un titre de tableau qui s’affiche en dehors du tableau.

Récapitulatif

Fournit une description du tableau. Les lecteurs d’écran lisent le texte de résumé mais le texte n’apparaît pas dans le navigateur de l’utilisateur.

Importation et exportation de tableaux

Vous pouvez importer des données tabulaires créées dans une autre application (par exemple, Microsoft Excel) et enregistrées au format texte délimité (éléments séparés par des tabulations, virgules, deux-points, points-virgules ou autres délimiteurs) sous Dreamweaver, afin de les mettre en forme dans un tableau.

Vous pouvez également exporter les données d’un tableau depuis Dreamweaver vers un fichier texte, dans lequel le contenu des cellules contiguës est séparé par un délimiteur. Les caractères que vous pouvez utiliser comme délimiteurs sont la virgule, les deux-points, le point-virgule ou l’espace. Lorsque vous exportez un tableau, tout le tableau est exporté ; vous ne pouvez pas exporter certaines parties du tableau seulement.

Remarque :

Si vous souhaitez ne récupérer qu’une partie des données d’un tableau, par exemple les six premières lignes ou les six premières colonnes, copiez les cellules contenant ces données et collez-les hors du tableau (pour créer un nouveau tableau), puis exportez ce nouveau tableau.

Importation de données tabulaires

Cliquez sur Fichier > Importer > Importer les données tabulaires.
Définissez les options relatives aux données tabulaires, puis cliquez sur OK.

Fichier de données

Correspond au nom du fichier à importer. Cliquez sur le bouton Parcourir pour choisir le fichier.

Délimiteur

Correspond au délimiteur utilisé dans le fichier que vous importez.

Si vous choisissez Autre, une zone de texte apparaît à droite du menu contextuel. Entrez le délimiteur utilisé dans votre fichier.

Remarque :

spécifiez le délimiteur utilisé lors de l’enregistrement du fichier de données. Dans le cas contraire, le fichier ne pourra pas être importé correctement et vos données ne seront pas formatées convenablement dans un tableau.
Largeur du tableau
Correspond à la largeur du tableau.
- Sélectionnez Adapter au contenu pour adapter la largeur de chaque colonne à la plus longue chaîne de texte qu’elle contient.
- Sélectionnez Fixe pour spécifier une largeur de tableau fixe, en pixels ou en pourcentage de la largeur de la fenêtre du navigateur.
Bordure

Indique la largeur, en pixels, des bordures du tableau.

Marge intérieure des cellules

Détermine l’espace (en pixels) entre le contenu d’une cellule et son contour.

Espacement des cellules

Détermine le nombre de pixels séparant les cellules contiguës d’un tableau.

Remarque :

Lorsque vous n’affectez pas explicitement de valeur pour les bordures, l’espacement entre les cellules et la marge intérieure des cellules, la plupart des navigateurs affichent des bordures et une marge intérieure des cellules définies sur 1, ainsi qu’un espacement entre les cellules défini sur 2. Pour être sûr que les navigateurs afficheront le tableau sans marge intérieure ni espacement, définissez Marge intérieure des cellules et Espacement entre les cellules sur 0. Pour visualiser les limites des cellules et du tableau lorsque la bordure est définie sur 0, cliquez sur Affichage > Assistances visuelles > Bordures du tableau.

Formatage ligne supérieure

Détermine le formatage appliqué, le cas échéant, à la ligne supérieure du tableau. Choisissez parmi quatre options de formatage : pas de formatage, gras, italique ou gras italique.

Exportation d’un tableau

Placez le point d’insertion dans l’une des cellules du tableau.
Choisissez Fichier > Exporter > Tableau.
Définissez les options suivantes :

Délimiteur

Indique le caractère à utiliser pour séparer les éléments dans le fichier exporté.

Sauts de ligne

Indique sous quel système d’exploitation vous allez ouvrir le fichier exporté : Windows, Macintosh ou UNIX. Les différents systèmes d’exploitation utilisent des méthodes différentes pour indiquer la fin d’une ligne de texte.
Cliquez sur Exporter.
Saisissez un nom pour le fichier, puis cliquez sur Enregistrer.

Sélection d’éléments de tableau

Vous pouvez sélectionner un tableau entier ou encore l’ensemble d’une ligne ou d’une colonne. Vous pouvez également sélectionner une ou plusieurs cellules individuelles.

Lorsque vous placez le pointeur sur un tableau, une ligne, une colonne ou une cellule, Dreamweaver met toutes les cellules concernées en surbrillance afin que vous sachiez quelles cellules seront sélectionnées. Ceci est utile pour les tableaux sans bordures, les cellules comprenant plusieurs colonnes ou lignes ou dans le cas de tableaux imbriqués. Vous pouvez modifier la couleur de la mise en surbrillance dans les préférences.

Remarque :

Si vous placez le pointeur sur une bordure du tableau, puis que vous maintenez la touche Ctrl (Windows) ou Commande (Macintosh) enfoncée, la totalité de la structure du tableau (c’est-à-dire toutes les cellules) est mise en surbrillance. Ceci peut être utile lorsque vous disposez de tableaux imbriqués et que vous souhaitez afficher la structure de l’un d’eux.

Sélection d’un tableau entier

Procédez de l’une des manières suivantes pour sélectionner un tableau :

Cliquez dans le coin supérieur gauche du tableau pour le sélectionner.
Cliquez dans une cellule du tableau, puis sélectionnez la balise dans le sélecteur de balises dans le coin inférieur gauche de la fenêtre de document.
Cliquez dans une cellule du tableau, puis sur le menu d’en-tête du tableau et choisissez Sélectionner le tableau. Des poignées de sélection apparaissent sur les bords inférieurs et droits du tableau sélectionné.
Cliquez dans une cellule du tableau, puis choisissez Modifier > Tableau > Sélectionner le tableau.

Sélection d’une ou plusieurs lignes ou colonnes

Positionnez le pointeur sur le bord gauche d’une ligne ou le bord supérieur d’une colonne.
Lorsque le pointeur se transforme en flèche de sélection, cliquez pour sélectionner une ligne ou une colonne ou faites-le glisser pour sélectionner plusieurs lignes ou colonnes.

Sélectionnez une ligne

Sélection d’une seule colonne

Cliquez dans la colonne.
Cliquez sur le menu des en-têtes de colonne, puis choisissez Sélectionner la colonne.

Sélection d’une seule cellule

Effectuez l’une des opérations suivantes :
- Cliquez dans la cellule, puis sélectionnez la balise <td> dans le sélecteur de balises dans le coin inférieur gauche de la fenêtre de document.
- Cliquez dans la cellule en maintenant la touche Ctrl (Windows) ou Commande (Mac) enfoncée.

Sélection d’une ligne ou d’un bloc rectangulaire de cellules

Effectuez l’une des opérations suivantes :

Faites glisser la souris d’une cellule vers une autre.
Cliquez sur une cellule. Maintenez la touche Ctrl (Windows) ou Commande (Mac) enfoncée et cliquez sur cette même cellule pour la sélectionner, puis cliquez sur une autre en maintenant la touche Maj enfoncée.

Sélection de cellules non adjacentes

Appuyez sur Ctrl (Windows) ou Commande (Macintosh), puis cliquez sur les cellules, les lignes ou les colonnes que vous voulez sélectionner.

Si chaque cellule, ligne ou colonne sur laquelle vous cliquez après avoir appuyé sur Ctrl ou sur Commande n’est pas déjà sélectionnée, elle est ajoutée à la sélection. Si elle est déjà sélectionnée, elle est retirée de la sélection.

Modification de la couleur de surbrillance pour les éléments d’un tableau

Cliquez sur Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
Sélectionnez la catégorie Surbrillance dans la liste à gauche, effectuez l’une des modifications suivantes, puis cliquez sur OK.
- Pour modifier la couleur de surbrillance des éléments du tableau, cliquez dans la case de couleur Survol et sélectionnez une couleur de surbrillance à l’aide du sélecteur de couleur (ou tapez la valeur hexadécimale correspondant à la couleur de surbrillance dans la zone de texte).
- Pour activer ou désactiver la mise en surbrillance des éléments du tableau, activez ou désactivez la case Afficher pour l’option Survol.
Remarque :

Ces options ont un impact sur tous les objets que Dreamweaver met en surbrillance lorsque vous passez le pointeur dessus.

Définition des propriétés d’un tableau

Vous pouvez utiliser l’inspecteur Propriétés pour modifier les tableaux.

Sélectionnez un tableau.
Dans l’inspecteur Propriétés (Fenêtre > Propriétés), apportez les modifications requises aux propriétés.

Propriétés des tableaux

ID de tableau

Identificateur du tableau.

Lignes et colonnes

Nombre de lignes et de colonnes du tableau.

L

Largeur du tableau, en pixels ou en pourcentage de la largeur de la fenêtre du navigateur.

Remarque :

il est rarement utile de définir la hauteur d’un tableau.

Remplissage

Espace (en pixels) entre le contenu d’une cellule et son contour.

Espacement cellules

Détermine le nombre de pixels séparant les cellules contiguës d’un tableau.

Alignement

Détermine la position du tableau par rapport aux autres éléments du même paragraphe (texte ou images).

Gauche aligne le tableau sur la gauche des autres éléments (pour que le texte situé dans le même paragraphe apparaisse à droite du tableau) ; Droite aligne le tableau sur la droite des autres éléments (le texte apparaissant à gauche du tableau) ; et Centrer centre le tableau (le texte apparaissant au-dessus et/ou en dessous du tableau). Par défaut indique que le navigateur doit utiliser son alignement par défaut.

Remarque :

Lorsque l’alignement est défini sur Par défaut, le reste du contenu n’est pas affiché à côté du tableau. Pour afficher un tableau à côté du contenu, utilisez l’alignement à droite ou à gauche.

Bordure

Indique la largeur, en pixels, des bordures du tableau.

Remarque :

Lorsque vous n’affectez pas explicitement de valeur pour la bordure, l’espacement entre les cellules et la marge intérieure des cellules, la plupart des navigateurs affichent la bordure et une marge intérieure des cellules définies sur 1, ainsi qu’un espacement entre les cellules défini sur 2. Pour être sûr que les navigateurs afficheront le tableau sans marge intérieure ni espacement, définissez Bordure sur 0, Marge intérieure des cellules et Espacement entre les cellules sur 0. Pour visualiser les limites des cellules et du tableau lorsque la bordure est définie sur 0, cliquez sur Affichage > Assistances visuelles > Bordures du tableau.

Classe

Applique une classe CSS au tableau.

Remarque :

il peut être nécessaire de développer l’inspecteur Propriétés du tableau pour afficher les options suivantes. Pour cela, cliquez sur la flèche de développement dans le coin inférieur droit de l’inspecteur.

Effacer largeurs de colonne/Effacer hauteurs de ligne et Effacer les hauteurs de ligne

Suppriment toutes les valeurs explicitement spécifiées de hauteur de ligne ou de largeur de colonne du tableau.

Convertir les largeurs de tableau en pixels/Convertir les hauteurs de tableau en pixels

Définissent la largeur ou la hauteur de chaque colonne du tableau en pixels, en fonction de la largeur actuelle (permettent également de définir la largeur du tableau complet en pixels, en fonction de la largeur actuelle).

Convertir les largeurs de tableau en pourcentage/Convertir les hauteurs de tableau en pourcentages

Définissent la largeur ou la hauteur de chaque colonne du tableau en pourcentage de la largeur de la fenêtre de document, en fonction de la largeur actuelle (permettent également de définir la largeur du tableau complet en pourcentage de la largeur de la fenêtre de document, en fonction de la largeur actuelle).

Si vous avez saisi une valeur dans une zone de texte, appuyez sur Tabulation ou Entrée (Windows), ou sur Retour (Mac), pour l’appliquer.

Définition des propriétés de cellule, de ligne ou de colonne

Vous pouvez utiliser l’inspecteur Propriétés pour modifier des cellules et des lignes dans un tableau.

Sélectionnez une ligne ou une colonne.
Dans l’inspecteur Propriétés (Fenêtre > Propriétés), définissez les options suivantes :

Horiz

Indique l’alignement horizontal du contenu d’une cellule, d’une ligne ou d’une colonne. Vous pouvez aligner le contenu de la cellule sur la gauche, la droite ou le centre des cellules ou vous pouvez indiquer au navigateur d’utiliser l’alignement par défaut (en général à gauche pour les cellules normales et au centre pour les cellules d’en-tête).

Vertic

Indique l’alignement vertical du contenu d’une cellule, d’une ligne ou d’une colonne. Vous pouvez aligner le contenu de la cellule sur le haut, le centre ou le bas des cellules, sur la ligne de base ou encore indiquer au navigateur d’utiliser l’alignement par défaut (en général le centre).

L et H

La largeur et la hauteur des cellules sélectionnées en pixels ou en pourcentage de la largeur ou de la hauteur de tout le tableau. Pour spécifier un pourcentage, faites suivre la valeur du signe de pourcentage (%). Pour laisser au navigateur le soin de déterminer la largeur et la hauteur appropriées, en fonction du contenu de la cellule et des largeurs et hauteurs des autres colonnes et lignes, laissez le champ vide (paramétrage par défaut).

Par défaut, un navigateur choisit une hauteur de ligne et une largeur de colonne correspondant à l’image la plus large ou à la ligne la plus longue dans une colonne. C’est pourquoi il arrive qu’une colonne de tableau devienne beaucoup plus large que les autres lorsque vous y ajoutez du contenu.

Remarque :

vous pouvez spécifier une hauteur en pourcentage de la hauteur totale du tableau, mais il se peut que la ligne ne s’affiche pas au pourcentage de hauteur spécifié dans les navigateurs.

Ar-pl

Couleur d’arrière-plan d’une cellule, d’une colonne ou d’une ligne, choisie à l’aide du sélecteur de couleurs.

Fusionner les cellules

Combine les cellules, lignes ou colonnes sélectionnées en une seule cellule. Vous pouvez fusionner des cellules uniquement si elles forment un bloc rectangulaire ou linéaire.

Fractionner la cellule

Divise une cellule en deux ou plusieurs cellules. Vous ne pouvez fractionner qu’une cellule à la fois : ce bouton est désactivé si plusieurs cellules sont sélectionnées.

Pas de retour à la ligne auto

Evite tout renvoi automatique à la ligne, en conservant tout le texte d’une cellule donnée sur une seule ligne. Si Pas de retour à la ligne auto est activé, les cellules s’élargissent en fonction de la taille des données que vous tapez ou collez. (Normalement, les cellules s’élargissent horizontalement pour accueillir le mot le plus long ou l’image la plus large, puis s’étirent verticalement autant que nécessaire pour intégrer tout autre contenu).

En-tête

Met en forme les cellules sélectionnées comme des cellules d’en-tête de tableau. Par défaut, le contenu des cellules de titre de tableau est en caractères gras et centré.

Remarque :

Vous pouvez spécifier la largeur et la hauteur en pixels ou en pourcentage. Il est ensuite possible de convertir les pixels en pourcentages, et inversement.

Remarque :

lorsque vous définissez les propriétés d’une colonne, Dreamweaver modifie les attributs de la balise td correspondant à chaque cellule de la colonne. En revanche, lorsque vous définissez certaines propriétés d’une ligne, Dreamweaver modifie les attributs de la balise tr, et non les attributs de chaque balise td de la ligne. Lorsque vous appliquez la même mise en forme à toutes les cellules d’une ligne, il est préférable d’appliquer cette mise en forme à la balise tr afin de conserver un code HTML net et concis.
Appuyez sur Tab ou Entrée (Windows) ou Retour (Macintosh) pour appliquer la valeur.

Mise en forme de tableaux et de cellules

Vous pouvez modifier l’aspect des tableaux en définissant des propriétés pour l’ensemble ou une partie de leurs cellules, ou en leur appliquant une mise en forme prédéfinie. Avant de définir les propriétés d’un tableau ou de cellules, vous devez savoir que l’ordre de priorité pour le formatage est le suivant : cellules, lignes et tableaux.

Remarque :

Pour mettre en forme le texte d’une cellule de tableau, suivez la même procédure que pour tout texte se trouvant en dehors d’un tableau.

Modification du format d’un tableau, d’une cellule, d’une ligne ou d’une colonne.

Sélectionnez un tableau, une cellule, une ligne ou une colonne.
Dans l’inspecteur Propriétés (Fenêtre > Propriétés), cliquez sur la flèche d’agrandissement située dans le coin inférieur droit et modifiez les propriétés en fonction de vos besoins.
Modifiez les propriétés de votre choix.

Pour plus d’informations sur les options, cliquez sur l’icône Aide de l’inspecteur Propriétés.

Remarque :

lorsque vous définissez les propriétés d’une colonne, Dreamweaver modifie les attributs de la balise td correspondant à chaque cellule de la colonne. En revanche, lorsque vous définissez certaines propriétés d’une ligne, Dreamweaver modifie les attributs de la balise tr, et non les attributs de chaque balise td de la ligne. Lorsque vous appliquez la même mise en forme à toutes les cellules d’une ligne, il est préférable d’appliquer cette mise en forme à la balise tr afin de conserver un code HTML net et concis.

Ajout ou modification des valeurs d’accessibilité d’un tableau en mode Code

Modifiez les attributs dans le code.

Remarque :

Pour repérer rapidement les balises dans le code, cliquez dans le tableau, puis sélectionnez la balise <table> dans le sélecteur de balises situé au bas de la fenêtre de document.

Ajout ou modification des valeurs d’accessibilité d’un tableau en mode Création

Pour modifier la légende du tableau, mettez-la en surbrillance, puis tapez une nouvelle légende.
- Pour modifier l’alignement de la légende du tableau, placez le point d’insertion dans la légende, cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis choisissez Modifier le code de la balise.
- Pour modifier le récapitulatif du tableau, sélectionnez ce dernier, cliquez dessus avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis choisissez Modifier le code de la balise.

Redimensionnement de tableaux, de colonnes et de lignes

Redimensionnement de tableaux

Vous pouvez redimensionner tout un tableau ou seulement certaines cellules ou certaines colonnes individuelles. Lorsque vous redimensionnez tout un tableau, toutes ses cellules changent de taille en proportion. Si les cellules d’un tableau ont une largeur ou une hauteur spécifiées explicitement, le redimensionnement du tableau modifie la taille visuelle des cellules dans la fenêtre de document mais ne modifie pas la largeur et la hauteur spécifiées des cellules.

Vous pouvez redimensionner un tableau en faisant glisser l’une de ses poignées de sélection. Lorsqu’un tableau est sélectionné (ou lorsque le point d’insertion se trouve dans celui-ci), Dreamweaver affiche la largeur du tableau, ainsi que le menu des en-têtes, en haut ou en bas de celui-ci.

Les largeurs de colonne définies dans le code HTML ne correspondent pas nécessairement aux largeurs apparentes à l’écran. Dans ce cas, vous pouvez uniformiser les largeurs. Afin de faciliter la mise en forme des tableaux, Dreamweaver affiche leur largeur et celles de leurs colonnes, ainsi que les menus d’en-têtes. Vous pouvez activer ou désactiver l’affichage de ces informations à votre convenance.

Redimensionnement de colonnes et de lignes

Vous pouvez modifier la largeur d’une colonne ou la hauteur d’une ligne dans l’inspecteur Propriétés ou en faisant glisser les bordures de la colonne ou de la ligne. Si vous avez des problèmes pour le redimensionnement, vous pouvez effacer la largeur des colonnes ou la hauteur des lignes et recommencer.

Remarque :

vous pouvez aussi modifier la largeur et la hauteur des cellules directement dans le code HTML, en mode Code.

Lorsqu’un tableau est sélectionné (ou lorsque le point d’insertion se trouve dans celui-ci), Dreamweaver affiche les largeurs des colonnes, ainsi que le menu de leurs en-têtes, en haut ou en bas de ces colonnes. Vous pouvez activer ou désactiver les menus d’en-têtes de colonne à votre convenance.

Redimensionnement d’un tableau

Sélectionnez le tableau. Si vous êtes en mode En direct, la vue Affichage d’élément apparaît dès que vous sélectionnez le tableau. Cliquez sur l’icône en forme de sandwich pour accéder au mode de mise en forme du tableau.

Pour redimensionner le tableau horizontalement, faites glisser la poignée de sélection se trouvant à droite.
Pour redimensionner le tableau verticalement, faites glisser la poignée de sélection se trouvant en bas.
Pour redimensionner le tableau verticalement et horizontalement, faites glisser la poignée de sélection se trouvant dans le coin inférieur droit.

Pour quitter le mode de mise en forme du tableau en mode En direct, appuyez sur la touche Echap ou cliquez en dehors du tableau. Vous pouvez utiliser les options du menu Modifier > Tableau pour apporter d’autres modifications au tableau.

Remarque : les options figurant sous le menu Modifier > Tableau sont différentes selon que vous avez sélectionné tout le tableau ou une seule cellule. En mode En direct, la vue Affichage d’élément indique « table » lorsque tout le tableau est sélectionné et « td » lorsqu’une seule cellule est sélectionnée. Pour passer du mode de mise en forme des cellules au mode de mise en forme du tableau, cliquez sur la bordure du tableau.

Modification de la largeur d’une colonne tout en conservant la même largeur de tableau

En mode Création, faites glisser la bordure droite de la colonne à modifier.

La largeur de la colonne contiguë est également modifiée, si bien que vous redimensionnez deux colonnes. L’affichage visuel vous montre la manière dont les colonnes seront ajustées, la largeur totale du tableau ne variant pas.

Modifiez la largeur de colonne tout en conservant celle du tableau

Remarque :

dans les tableaux comportant des largeurs en pourcentage (et non en pixels), si vous faites glisser la bordure extérieure se trouvant à droite du tableau, la largeur globale du tableau est modifiée, et toutes les colonnes s’adaptent proportionnellement.

Modification de la largeur d’une colonne en conservant les dimensions des autres colonnes

En mode Création, maintenez la touche Maj enfoncée, puis faites glisser la bordure de la colonne.

Seule la largeur de cette colonne change. L’affichage visuel vous montre la manière dont les colonnes seront ajustées, la largeur totale du tableau variant en fonction de la colonne redimensionnée.

Modifiez la largeur d’une colonne en conservant celle des autres colonnes

Modification de la hauteur d’une ligne visuellement

Faites glisser la bordure inférieure de la ligne.

Uniformisation des largeurs de colonne en mode Code avec les largeurs visuelles

Cliquez dans une cellule.
Cliquez sur le menu des en-têtes du tableau, puis choisissez Uniformiser toutes les largeurs.

Dreamweaver redéfinit la largeur spécifiée dans le code afin de l’adapter à la largeur visible.

Effacement de toutes les largeurs et hauteurs définies dans un tableau

Sélectionnez le tableau.
Effectuez l’une des opérations suivantes :
- Choisissez Modifier > Tableau > Effacer les largeurs de colonnes ou Modifier > Tableau > Effacer les hauteurs de cellules.
- Dans l’inspecteur Propriétés (Fenêtre > Propriétés), cliquez sur le bouton Effacer les hauteurs de ligne ou Effacer les largeurs de colonne .
- Cliquez sur le menu des en-têtes de colonne, puis sélectionnez Effacer toutes les hauteurs ou Effacer toutes les largeurs.

Effacement d’une largeur de colonne définie

Cliquez sur le menu des en-têtes de colonne, puis choisissez Effacer les largeurs de colonne.

Activation ou désactivation des menus et de la largeur d’un tableau et des colonnes en mode Création

Sélectionnez Affichage > Options du mode Création > Assistances visuelles > Largeurs de tableau.

Ajout et suppression de lignes et de colonnes

Pour ajouter ou supprimer des lignes et des colonnes, utilisez le menu Modifier > Tableau ou le menu des en-têtes de colonne.

Remarque :

Le fait d’appuyer sur la touche de tabulation lorsque le curseur se trouve dans la dernière cellule d’un tableau ajoute automatiquement une ligne.

Ajout d’une ligne ou d’une colonne individuelle

Cliquez dans une cellule, puis procédez de l’une des manières suivantes :

Choisissez Modifier > Tableau > Insérer une ligne ou Modifier > Tableau > Insérer une colonne.

Une ligne apparaît au-dessus du point d’insertion, ou une colonne apparaît à gauche du point d’insertion.
Cliquez sur le menu des en-têtes de colonne, puis choisissez Insérer une colonne à gauche ou Insérer une colonne à droite.

Ajout de plusieurs lignes ou colonnes

Cliquez dans une cellule.
Choisissez Modifier > Tableau > Insérer des lignes ou des colonnes et cliquez sur OK.

Insérer

Permet d’indiquer si des lignes ou des colonnes doivent être insérées.

Nombre de lignes ou Nombre de colonnes

Nombre de lignes ou de colonnes à insérer.

Où

Indique si les nouvelles lignes ou colonnes doivent apparaître avant ou après la ligne ou la colonne de la cellule sélectionnée.

Suppression d’une ligne ou d’une colonne

Effectuez l’une des opérations suivantes :

Cliquez sur une cellule de la ligne ou de la colonne que vous voulez supprimer, puis choisissez Modifier > Tableau > Supprimer la ligne ou Modifier > Tableau > Supprimer la colonne.
Sélectionnez une ligne ou une colonne entière, puis appuyez sur la touche Suppr.

Dans l’inspecteur Propriétés (Fenêtre > Propriétés), procédez de l’une des manières suivantes :
- Pour ajouter ou supprimer des lignes, augmentez ou réduisez la valeur indiquant le nombre de lignes.
- Pour ajouter ou supprimer des colonnes, augmentez ou réduisez la valeur correspondant au nombre de colonnes.

Remarque :

Dreamweaver n’affiche pas d’avertissement si vous vous apprêtez à supprimer des lignes et des colonnes contenant des données.

Fractionnement et fusion de cellules

Utilisez l’inspecteur Propriétés ou les options du sous-menu Modifier > Tableau pour fractionner ou fusionner des cellules.

Fusion de plusieurs cellules d’un tableau

Sélectionnez les cellules dans une ligne contiguë et sous forme rectangulaire.

Dans l’illustration ci-dessous, la sélection est un rectangle de cellules ; les cellules peuvent donc être fusionnées.

Les cellules peuvent être fusionnées dans un rectangle de cellules

Dans l’illustration ci-dessous, la sélection n’est pas un rectangle ; les cellules ne peuvent donc pas être fusionnées.

Impossible de fusionner les cellules si la sélection n’est pas un rectangle
Effectuez l’une des opérations suivantes :
- Choisissez Modifier > Tableau > Fusionner les cellules.
- Dans l’inspecteur Propriétés HTML (Fenêtre > Propriétés) en mode développé, cliquez sur le bouton Fusionner les cellules.
Remarque :

si ce bouton n’est pas visible, cliquez sur la flèche de développement dans le coin inférieur droit de l’inspecteur Propriétés pour afficher toutes les options.

Le contenu des cellules individuelles est placé dans la cellule produite par la fusion. Les propriétés de la première cellule sélectionnée sont appliquées à la cellule fusionnée.

Fractionnement d’une cellule

Cliquez dans une cellule, puis procédez de l’une des manières suivantes :
- Choisissez Modifier > Tableau > Fractionner la cellule.
- Dans l’inspecteur Propriétés HTML (Fenêtre > Propriétés) en mode développé, cliquez sur le bouton Fractionner la cellule.
Remarque :

si ce bouton n’est pas visible, cliquez sur la flèche de développement dans le coin inférieur droit de l’inspecteur Propriétés pour afficher toutes les options.
Dans la boîte de dialogue Fractionner la cellule, indiquez de quelle manière vous souhaiter scinder la cellule :

Fractionner la cellule

Indique si la cellule doit être fractionnée en plusieurs lignes ou en plusieurs colonnes.

Nombre de lignes/Nombre de colonnes

Indique en combien de colonnes ou de lignes la cellule doit être fractionnée.

Augmentation ou réduction du nombre de lignes ou de colonnes occupées par une cellule

Effectuez l’une des opérations suivantes :

Sélectionnez Modifier > Tableau > Augmenter l’étendue de ligne ou Modifier > Tableau > Augmenter l’étendue de colonne.
Sélectionnez Modifier > Tableau > Réduire l’étendue de ligne ou Modifier > Tableau > Réduire l’étendue de colonne.

Copie, collage et suppression de cellules

Vous pouvez copier, coller ou supprimer une ou plusieurs cellules tout en préservant leur mise en forme.

Vous pouvez coller les cellules au niveau d’un point d’insertion ou à la place d’une sélection dans un tableau existant. Pour coller plusieurs cellules de tableau, il faut que le contenu du Presse-papiers soit compatible avec la structure du tableau ou de la sélection du tableau dans laquelle les cellules seront collées.

Découpage ou copie des cellules d’un tableau

Sélectionnez une ou plusieurs cellules dans une ligne contiguë et sous forme rectangulaire.

Dans l’illustration ci-dessous, la sélection est un rectangle de cellules ; les cellules peuvent donc être coupées ou copiées.

Les cellules peuvent être coupées ou copiées dans un rectangle de cellules

Dans l’illustration ci-dessous, la sélection n’est pas un rectangle ; les cellules ne peuvent donc pas être coupées ou copiées.

Impossible couper et copier des cellules si la sélection n’est pas un rectangle
Choisissez Edition > Couper ou Edition > Copier.

Remarque :

si vous avez sélectionné une ligne ou une colonne entière et que vous choisissez Edition > Couper, la ligne ou la colonne entière est supprimée du tableau (et pas seulement le contenu des cellules).

Collage de cellules d’un tableau

Choisissez l’emplacement où coller les cellules :
- Pour remplacer des cellules existantes par les cellules que vous collez, sélectionnez une série de cellules existantes dont la mise en forme est la même que celle des cellules du Presse-papiers. (Par exemple, si vous avez copié ou coupé un bloc de 3 x 2 cellules, vous pouvez sélectionner un autre bloc de 3 x 2 cellules pour le remplacer par les cellules collées.)
- Pour coller une ligne entière de cellules au-dessus d’une cellule spécifique, cliquez à l’intérieur de cette dernière.
- Pour coller une colonne entière de cellules à gauche d’une cellule spécifique, cliquez à l’intérieur de cette dernière.
Remarque :

si vous avez placé moins d’une ligne ou d’une colonne entière dans le Presse-papiers, que vous cliquez dans une cellule puis collez les cellules figurant dans le Presse-papiers, il se peut que la cellule dans laquelle vous avez cliqué et les cellules voisines (selon leur emplacement dans le tableau) soient remplacées par les cellules collées.
- Pour créer un nouveau tableau à partir des cellules collées, placez le point d’insertion en dehors du tableau.
Choisissez Edition > Coller.

Si vous collez des lignes ou des colonnes entières dans un tableau existant, celles-ci s’ajoutent au tableau. Si vous ne collez qu’une seule cellule, le contenu de la cellule sélectionnée est remplacé. Si vous collez le contenu du Presse-papiers en dehors d’un tableau, les lignes, colonnes ou cellules que vous collez sont utilisées pour définir un nouveau tableau.

Suppression du contenu d’une cellule en conservant les cellules intactes

Sélectionnez une ou plusieurs cellules.

Remarque :

veillez à ce que la sélection ne comprenne pas de lignes ou de colonnes entières.
Appuyez sur Supprimer.

Remarque :

si seules des lignes ou des colonnes entières sont sélectionnées lorsque vous choisissez Edition > Effacer ou que vous appuyez sur Suppr, les lignes ou les colonnes entières (pas seulement leurs contenus) sont supprimées du tableau.

Suppression de lignes ou de colonnes contenant des cellules fusionnées

Sélectionnez une ligne ou une colonne.
Choisissez Modifier > Tableau > Supprimer la ligne ou Modifier > Tableau > Supprimer la colonne.

Imbrication de tableaux

Un tableau imbriqué est un tableau à l’intérieur d’une cellule d’un autre tableau. Vous pouvez le mettre en forme comme n’importe quel tableau, mais sa largeur est limitée par la largeur de la cellule dans laquelle il se trouve.

Cliquez dans une cellule du tableau.
Sélectionnez Insérer > Tableau, définissez les options Tableau, puis cliquez sur OK.

Tri de tableaux

Vous pouvez trier les lignes d’un tableau selon le contenu d’une seule colonne. Vous pouvez également effectuer un tri plus complexe, selon le contenu de deux colonnes.

Vous ne pouvez pas appliquer de tri aux tableaux contenant des attributs colspan ou rowspan, c’est-à-dire les tableaux qui contiennent des cellules fusionnées.

Sélectionnez le tableau ou cliquez dans une cellule.
Sélectionnez Modifier > Tableau > Trier le tableau, définissez les options souhaitées dans la boîte de dialogue, puis cliquez sur OK.

Trier par

Détermine la colonne dont les valeurs seront utilisées pour trier les lignes du tableau.

Ordre

Détermine comment la colonne doit être triée (ordre alphabétique ou numérique) et si elle doit être triée par ordre croissant (de A à Z, du chiffre le plus bas au plus élevé) ou par ordre décroissant.

Lorsque le contenu d’une colonne est constitué de chiffres, choisissez Numérique. Un tri par ordre alphabétique appliqué à une liste de nombres à un ou deux chiffres a pour effet de trier les nombres comme s’il s’agissait de mots (ayant pour résultat un ordre du type 1, 10, 2, 20, 3, 30) plutôt que comme des nombres (ayant pour résultat un ordre du type 1, 2, 3, 10, 20, 30).

Puis par/Ordre

Détermine l’ordre de tri du tri secondaire sur une colonne différente. Indiquez la colonne de tri secondaire dans le menu contextuel Puis et l’ordre de tri secondaire dans les menus contextuels Ordre.

Inclure la première ligne dans le tri

Indique que la première ligne du tableau doit être incluse dans le tri. Si la première ligne correspond à un titre à ne pas déplacer, n’activez pas cette option.

Trier les lignes d’en-tête

Indique que toutes les lignes de la section thead du tableau (si elle existe) doivent être triées en utilisant les mêmes critères que pour les lignes de la section body. (Les lignes thead restent dans la section thead et apparaissent encore en haut du tableau, même après le tri). Pour plus d’informations sur la balise thead, consultez le panneau Référence (choisissez Aide > Référence).

Trier les lignes de pied de page

Indique que toutes les lignes de la section thead du tableau (si elle existe) doivent être triées en utilisant les mêmes critères que pour les lignes de la section body. (Les lignes tfoot restent dans la section tfoot et apparaissent encore en bas du tableau, même après le tri). Pour plus d’informations sur la balise tfoot, consultez le panneau Référence (choisissez Aide > Référence).

Conserver les couleurs des lignes après le tri

Spécifie que les attributs des lignes du tableau (tels que la couleur) doivent rester associés au même contenu après le tri. Si les lignes de votre tableau sont mises en forme avec deux couleurs alternées, n’activez pas cette option pour vous assurer que les lignes du tableau trié s’affichent toujours avec des couleurs alternées. Si les attributs de ligne sont spécifiques au contenu de chaque ligne, sélectionnez cette option pour vous assurer que ces attributs restent associés aux lignes appropriées dans le tableau trié.

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?