Conseils relatifs à la modification des tableaux HTML dans Visual Web Developer

Mise à jour : novembre 2007

L'éditeur de tableaux de HTML Visual Studio est un outil puissant pour manipuler des tableaux HTML afin de définir la disposition de vos pages Web et d'afficher le contenu sous forme de colonne. Les conseils suivants vous aideront à utiliser au mieux l'éditeur de tableaux HTML.

Modification de tableaux HTML

Les points suivants décrivent le comportement général du mode de modification de tableaux :

• L'éditeur de tableaux HTML permet de modifier visuellement des éléments de tableau HTML, tels que les éléments table, tr et td. Bien que l'éditeur de tableaux HTML offre un moyen commode de modifier ces éléments, il ne peut pas pour autant permettre de travailler sur les fonctionnalités non prises en charge par les tableaux HTML.

• L'éditeur de tableaux fonctionne avec les tableaux HTML (éléments table et leurs éléments enfants), mais pas avec le contrôle ASP.NET Table (élément asp:table). Le contrôle ASP.NET Table est surtout conçu pour être utilisé par programme plutôt que pour gérer une disposition statique, ce qui est souvent le cas des tableaux HTML.

• Le mode Design rend le tableau avec une apparence semblable à celle qu'il aura dans un navigateur. Il le fait en interprétant les éléments HTML du tableau de façon très comparable au fonctionnement d'un navigateur. Pour plus d'informations, consultez la section « Comportement de dimensionnement et de redimensionnement », plus loin dans cette rubrique.

Portée des modifications

Il est utile de comprendre comment les modifications effectuées en mode Design s'appliquent aux éléments de tableau. Notez les points suivants :

• Chaque cellule du tableau est considérée comme un membre de la ligne ou de la colonne dans laquelle elle commence, comme le montre le mode Design. Une opération sur une ligne ou une colonne affecte tous les membres de cette ligne ou de cette colonne. Mapper une cellule en mode Design à un élément td correspondant en mode Source peut ne pas toujours fonctionner comme prévu si les cellules contiennent des attributs colspan ou rowspan.

• Les opérations sur une ligne affectent chacun des éléments td de cette ligne. Elles n'affectent pas l'élément tr.

• La sélection et la modification d'une colonne affectent tous les éléments th de la colonne.

Comportement de dimensionnement et de redimensionnement

L'éditeur de tableaux peut parfois réagir de manière inattendue lorsque vous spécifiez les dimensions initiales d'un tableau, d'une ligne ou d'une colonne, ou lorsque vous redimensionnez ces éléments. Le comportement des dimensions des éléments de tableau reflète le comportement que le tableau aura dans le navigateur. Par exemple, les colonnes dépourvues de paramètre spécifique de largeur grandiront ou diminueront en fonction de la largeur totale du tableau, de la largeur des autres colonnes du tableau et du contenu de la totalité des colonnes.

Priorité au contenu

En général, la taille du contenu d'une cellule a priorité sur les paramètres de largeur ou de hauteur des cellules ou des lignes. Par exemple, si une cellule de tableau contient un élément graphique ou img, la taille du graphique a priorité sur la largeur de la cellule ou même du tableau. Cela est également vrai pour des contrôles dans des cellules de tableau.

Si les cellules contiennent du texte et si l'attribut nowrap de la cellule n'est pas défini, le texte se verra appliquer un retour à la ligne dans le cadre de la largeur de la cellule. Toutefois, si le texte ne contient pas d'espace blanc, comme des espaces ou des signes de ponctuation, il n'y aura aucune place pour renvoyer le texte à la ligne et la largeur de la cellule sera modifiée pour s'adapter au texte.

Le contenu a également priorité sur la hauteur de ligne. Si le texte est renvoyé à la ligne dans une cellule, il peut arriver qu'une ligne soit plus haute que le réglage height spécifié pour l'élément tr qui représente la ligne.

Indications pour le dimensionnement et le redimensionnement

De par la conception même du HTML, il est possible d'assigner à un tableau et aux éléments qu'il contient des paramètres de dimension incompatibles entre eux. Une largeur de 100 % peut, par exemple, être assignée à un tableau à deux colonnes, mais les deux colonnes peuvent se voir assigner une largeur de 100 pixels chacune.

Le tableau suivant résume la façon dont le dimensionnement est géré dans l'éditeur de tableaux. Dans tous les cas, la largeur du contenu est prioritaire.

Dimensions spécifiées	Comportement
La largeur est spécifiée pour le tableau et pour toutes ses colonnes, ou la hauteur est spécifiée pour le tableau et toutes ses lignes.	Les dimensions du tableau sont prioritaires ; le tableau calcule proportionnellement la taille des colonnes ou des lignes.
La largeur est spécifiée pour le tableau et pour certaines de ses colonnes, ou la hauteur est spécifiée pour le tableau et certaines de ses lignes.	Les éléments dimensionnés sont rendus avec leurs dimensions exactes et les éléments restants sont redimensionnés pour remplir les dimensions totales du tableau. Remarque : L'éditeur de tableaux affiche sous la forme "auto" la largeur des éléments de tableau non dimensionnés.
La largeur est spécifiée pour chacune des colonnes du tableau mais pas pour le tableau lui-même, ou la hauteur est spécifiée pour chacune des lignes du tableau mais pas pour le tableau lui-même.	La largeur ou la hauteur du tableau est calculée en additionnant la largeur de toutes ses colonnes ou la hauteur de toutes ses lignes.
Aucune largeur ni hauteur n'est spécifiée pour le tableau ni pour ses éléments.	La largeur ou la hauteur est calculée uniquement à partir du contenu de la cellule et de l'espace requis pour les bordures.

Remarque :
Si vous redimensionnez une ligne ou une colonne et si les éléments td utilisent des unités de hauteur ou de largeur différentes, l'éditeur de tableaux convertit ces unités en pixels.

Voir aussi

Concepts

Introduction à la modification de tableaux HTML dans Visual Web Developer

Comment : créer et modifier des tableaux HTML en mode Design