Procédure pas à pas : modification de tableaux HTML dans Visual Web Developer

Mise à jour : novembre 2007

La modification de tableaux est importante dans de nombreuses pages Web, car les tableaux sont utilisés pour créer la présentation de la page. Cette procédure pas à pas illustre les fonctionnalités de modification de tableaux de l'éditeur HTML dans Microsoft Visual Studio. Vous utiliserez des tableaux pour créer la présentation d'un formulaire d'entrée simple sur la page.

Remarque :
Les fonctionnalités de modification de tableaux décrites dans cette procédure pas à pas concernent les tableaux HTML et non le contrôle serveur Web Table (le contrôle <asp:Table> et ses contrôles enfants).

Cette procédure pas à pas illustre les tâches suivantes :

• Ajout d'un tableau

• Sélection de tableau, de lignes et de colonnes.

• Redimensionnement d'éléments.

• Ajout et suppression d'éléments du tableau.

• Définition des caractéristiques de cellule telles que la couleur d'arrière-plan et l'alignement.

Composants requis

Pour exécuter cette procédure pas à pas, vous avez besoin de :

• Visual Web Developer et le .NET Framework.

Création du site Web

Si vous avez déjà créé un site Web dans Visual Studio (par exemple, en suivant les étapes dans Procédure pas à pas : création d'une page Web de base dans Visual Web Developer), vous pouvez utiliser ce site Web et passer à la section suivante, « Création de la présentation de la page avec un tableau ». Sinon, créez un site et une page Web en suivant ces étapes.

Pour créer un site Web de système de fichiers

1. Ouvrez Visual Web Developer.

2. Dans le menu Fichier, cliquez sur Nouveausite Web.

3. Sous Modèles Visual Studio installés, cliquez sur Site Web ASP.NET.

4. Dans la zone Emplacement, entrez le nom du dossier dans lequel vous souhaitez conserver les pages de votre site Web.

   Par exemple, tapez le nom du dossier C:\SitesWeb.

5. Dans la liste Langage, cliquez sur le langage de programmation que vous préférez utiliser.

6. Cliquez sur OK.

   Visual Web Developer crée le dossier et une page nommée Default.aspx.

Création de la présentation de la page avec un tableau

Vous commencerez en ajoutant un tableau qui définit la présentation générale de la page.

Pour ajouter un tableau pour la présentation de la page

1. Si vous n'avez pas déjà de page ouverte dans le concepteur, ajoutez une page au site Web.

2. Basculez en mode Design.

3. Dans le menu Disposition, cliquez sur Insérer un tableau.

   La boîte de dialogue Insérer un tableau s'affiche.

4. Sélectionnez Modèle.

   Les modèles de tableau sont des présentations de tableaux prédéfinies.

5. Dans la liste Modèle, sélectionnez En-tête et encadré.

6. Cliquez sur OK.

   Un tableau à deux colonnes, qui occupe la hauteur et la largeur entières de la page, est ajouté à la page. Une cellule unique s'étend sur les colonnes en haut, fournissant un endroit auquel mettre un en-tête. La cellule gauche au-dessous de l'en-tête est destinée aux informations de navigation ou secondaires. La cellule droite au-dessous de l'en-tête est la zone d'affichage principale de la page.

   Remarque :
   Les bordures autour des cellules du tableau sont affichées par défaut au moment du design pour vous aider dans la modification. Sauf si vous affectez explicitement une bordure au tableau ou aux cellules, aucune bordure n'apparaît lorsque le tableau est restitué dans le navigateur.

Création d'une présentation de formulaire avec un tableau

Vous pouvez également utiliser des tableaux HTML pour disposer les contrôles dans un formulaire. Vous allez maintenant créer un deuxième tableau à l'intérieur du premier. Vous utiliserez ultérieurement la deuxième table pour créer la disposition de certains contrôles dans un formulaire.

Pour ajouter un tableau pour la présentation du formulaire

1. À partir du groupe HTML de Boîte à outils, faites glisser un élément Table dans la cellule droite (principale).

   Lorsque vous faites glisser un tableau à partir de la Boîte à outils, Visual Web Developer crée un tableau vide à trois colonnes et trois lignes. Vous avez besoin uniquement de deux colonnes ; plus tard, vous supprimerez l'une de ces colonnes.

   Remarque :
   Vous pouvez créer des tableaux en utilisant la commande Insérer un tableau, comme vous l'avez fait précédemment ou en faisant glisser un élément Table à partir de la Boîte à outils.

2. Déplacez le pointeur de la souris sur le tableau jusqu'à ce que le pointeur se transforme en un curseur de déplacement (flèche à quatre pointes), puis cliquez pour sélectionner le tableau.

3. Faites glisser le bord droit du tableau pour élargir le tableau jusqu'à ce qu'il occupe la majeure partie de la largeur de la page.

   Pendant que vous faites glisser, le tableau affiche ses dimensions actuelles.

4. Cliquez avec le bouton droit dans l'une des cellules de la colonne la plus à gauche. Dans le sous-menu Supprimer, cliquez sur Colonnes pour supprimer la colonne de la cellule sélectionnée.

   La colonne a été supprimée du tableau.

   Remarque :
   Si vous voyez une option Supprimer qui n'a pas de sous-menu, cela indique que le focus n'est pas dans une cellule. Cliquez avec le bouton droit à l'intérieur d'une cellule dans la colonne gauche.

5. Cliquez dans la cellule droite inférieure puis appuyez sur la touche TAB pour ajouter une quatrième ligne au tableau.

   Vous avez maintenant un tableau à deux colonnes et quatre lignes qui peut être le conteneur des contrôles de votre formulaire.

Définition des caractéristiques du tableau de présentation de la page

Maintenant que vous avez un tableau de présentation de formulaire à l'intérieur du tableau de la page, vous pouvez finir de présenter la page en modifiant le tableau de présentation de la page.

Pour définir des caractéristiques du tableau de présentation de la page

1. Dans le tableau de présentation de la page, cliquez dans la cellule supérieure.

   La bordure plus épaisse autour de la cellule indique qu'elle est sélectionnée et en mode édition de contenu.

2. Dans la fenêtre Propriétés, cliquez sur le bouton dans la zone Style.

   La boîte de dialogue Générateur de styles s'affiche.

3. Dans l'onglet Texte, dans la liste Horizontal, cliquez sur Centré.

4. Sur l'onglet Arrière-plan, dans la liste Couleur, sélectionnez une couleur que vous aimez. Vous pouvez également cliquer sur le bouton en regard de la zone Couleur pour afficher la boîte de dialogue Sélecteur de couleurs et sélectionner des couleurs supplémentaires.

   Les paramètres que vous avez configurés définissent le style de la cellule en haut du tableau de présentation.

5. Tapez Site Web Contoso en tant que titre.

6. Sélectionnez le texte et dans la liste Format du bloc dans la barre d'outils Mise en forme, cliquez sur Heading 1 <H1>.

7. Répétez les étapes 1 à 6 pour la cellule la plus à gauche du tableau, avec ces modifications :

   • Remplacez le texte par Ce site est géré par Contoso, Incorporated.

   • Ne mettez pas en forme le texte comme un Titre 1.

   • Dans l'onglet Texte de la boîte de dialogue Générateur de styles, dans la liste Vertical, cliquez sur bas.

   Dans une page Web de production, la cellule latérale serait probablement occupée par un menu de liens ou un autre contenu. Toutefois, le contenu que la cellule contient importe peu pour cette procédure pas à pas.

Génération du formulaire

Vous pouvez à présent générer le formulaire.

Pour ajouter du texte et des contrôles au tableau de présentation du formulaire

1. Dans le tableau de présentation du formulaire (le tableau à l'intérieur du tableau de présentation de la page), cliquez dans la cellule supérieure gauche et tapez Nom :.

2. Cliquez dans la cellule gauche de la deuxième ligne et tapez Année de naissance :.

3. À partir du groupe Standard de la Boîte à outils, faites glisser un contrôle TextBox dans la cellule supérieure droite.

4. Affectez textName à la propriété ID du contrôle TextBox.

5. Faites glisser une autre Zone de texte dans la cellule droite de la deuxième ligne et affectez textBirthYear à sa propriété ID.

6. Faites glisser un contrôle Button dans la troisième cellule à droite et affectez Envoyer à sa propriété Text.

7. Faites glisser un contrôle Label dans la cellule inférieure droite, affectez labelDisplay à sa propriété ID et effacez sa propriété Text.

8. Placez le curseur de souris sur la colonne gauche jusqu'à ce que vous voyiez un symbole de sélection (un petit carré) en haut de la colonne, puis cliquez sur le symbole.

   La colonne gauche est sélectionnée.

9. Dans la fenêtre Propriétés, cliquez sur le bouton dans la zone Style pour afficher la boîte de dialogue Générateur de styles.

10. Dans l'onglet Texte, dans la liste Horizontal, cliquez sur Droite.

    Les légendes de texte dans le formulaire sont alignées à droite.

11. Cliquez sur OK pour fermer le générateur de styles.

12. Sélectionnez de nouveau la colonne gauche, puis faites glisser son bord droit pour réduire la colonne jusqu'à ce qu'elle soit juste assez large pour le texte de légende.

13. Cliquez avec le bouton droit dans la cellule du tableau de présentation à l'extérieur du tableau de présentation du formulaire, puis cliquez sur Style.

    Le menu contextuel offre une autre solution pour afficher la boîte de dialogue Générateur de styles.

14. Dans l'onglet Texte, dans la liste Vertical, cliquez sur haut.

    Le tableau de présentation du formulaire est aligné en haut de la cellule.

Programmation des contrôles de formulaire

Vous pouvez maintenant programmer les contrôles de formulaire. Le formulaire affiche l'âge que l'utilisateur aura cette année.

Pour programmer les contrôles de formulaire

1. Double-cliquez sur le contrôle Button dans le formulaire.

   L'éditeur crée un gestionnaire d'événements Click.

2. Ajoutez le code mis en surbrillance ci-dessous.

   Protected Sub Button1_Click(ByVal sender As Object, _
       ByVal e As System.EventArgs) _
       Handles Button1.Click 
       Dim age As Integer    age = DateTime.Now.Year - CInt(textBirthYear.Text)    labelDisplay.Text = Server.HtmlEncode(textName.Text) & _        ", this year you are " & Server.HtmlEncode(age.ToString())
   End Sub
   

   protected void Button1_Click(Object sender, EventArgs e)
   {
       int age = DateTime.Now.Year - Int32.Parse(textBirthYear.Text);    labelDisplay.Text = Server.HtmlEncode(textName.Text) +     ", this year you are " + Server.HtmlEncode(age.ToString());
   }
   

Test de la page

Vous pouvez à présent tester la page.

Pour tester la page

1. Appuyez sur CTRL+F5 pour exécuter la page.

   Lorsque la page est affichée dans le navigateur, notez la présentation que vous avez créée. Étant donné que vous n'avez pas spécifié explicitement de bordures de tableau, il n'y a aucune ligne dans le formulaire.

2. Dans la zone Nom, tapez votre nom.

3. Dans la zone Année de naissance, tapez l'année de votre naissance, puis cliquez sur le bouton Envoyer.

   Le calcul de l''âge est affiché dans le formulaire à l'emplacement que vous avez créé avec le tableau du formulaire.

Étapes suivantes

Dans cette procédure pas à pas, vous avez testé quelques-unes des fonctions de l'éditeur de tableaux visuels en mode Design. Vous avez ajouté des tableaux de deux manières, redimensionné un tableau, ajouté une ligne, supprimé une colonne, défini des styles de cellule et ajouté du texte et des contrôles comme contenu de la cellule. Voici quelques suggestions pour une exploration plus approfondie :

• Apprenez d'autres façons d'utiliser les tableaux. Pour plus d'informations, consultez :

  • Comment : ajouter et supprimer des éléments de tableau HTML dans Visual Web Developer

  • Comment : sélectionner des éléments et du contenu de tableau HTML dans Visual Web Developer

  • Comment : redimensionner des éléments de tableau HTML dans Visual Web Developer

• Découvrez des conseils pour modifier les tableaux à la fois en mode Design et en mode Source. Pour plus d'informations, consultez Conseils relatifs à la modification des tableaux HTML dans Visual Web Developer.

• Ajoutez des contrôles de validation à la zone de texte Année de naissance afin que les utilisateurs puissent entrer uniquement des années valides. Pour plus d'informations, consultez Validation des entrées d'utilisateur dans des pages Web ASP.NET.

Voir aussi

Tâches

Procédure pas à pas : création et utilisation de pages maîtres ASP.NET dans Visual Web Developer

Concepts

Navigation de balises dans l'éditeur HTML de Visual Web Developer

Mise en forme d'éléments dans l'éditeur HTML de Visual Web Developer