Ajouter une table à un éditeur HTML

Ajouter et formater un exemple detable à un article de la base de connaissances à l’aide de contrôles de champ HTML.

Avant de commencer

Rôle requis : admin

Pourquoi et quand exécuter cette tâche

Dans cette tâche, vous créez et formatez une table dans htmlArea ou TinyMCE v6.8.3. Les tables résultantes doivent ressembler à l’une des images suivantes.

Figure 1. Exemple de tableau en htmlArea

Figure 2. Exemple de tableau dans TinyMCE v6.8.3

Si vous entrez d’autres valeurs pour des aspects tels que la largeur, l’espacement des cellules, le remplissage des cellules, la bordure et l’alignement, la table résultante diffère des exemples donnés.

Procédure

1. Accédez à la Tous > Base de connaissances > Modifier et sélectionnez l’article de la base de connaissances que vous souhaitez modifier.
2. Dans le champ HTML, positionnez le curseur à l’emplacement où vous souhaitez ajouter la table.
3. Sélectionnez l’icône de table, sélectionnez Insérer une table, puis sélectionnez le nombre de lignes et de colonnes.
4. Indiqueles propriétés de la table.
   1. Positionnez votre curseur dans la table, sélectionnez l’icône de table, puis sélectionnez les propriétés de la table.
   2. Entrez les valeurs suivantes dans l’onglet Général .
      • Largeur : 75 %
      • Espacement des cellules : 3
      • Remplissage des cellules : 3
      • Bordure : 1
      • Alignement : gauche
   3. Dans l’onglet Avancé , sélectionnez le champ de texte en regard de Couleur de la bordure et entrez Gris.
      La zone de sélection de couleurs devient grise pour indiquer la couleur que vous avez saisie. Vous pouvez également sélectionner la zone et sélectionner les couleurs dans la palette.
   4. Sélectionnez OK.
5. Mettezà jour la ligne de table d’en-tête.
   1. Sélectionnez les cellules de la première ligne de tableau, sélectionnez l’icône de tableau, puis sélectionnez Ligne > Propriétés des lignes.
   2. Entrez les valeurs suivantes dans l’onglet Général .
      • Type de ligne : en-tête
      • Alignement : centre
   3. Sous l’onglet Avancé, entrez #87cefa dans la zone de texte à côté de Couleur d’arrière-plan pour la définir sur un bleu clair.
   4. Sélectionnez OK.
6. Définissez les propriétés de la cellule de table.
   1. Sélectionnez toutes les cellules de table de la première colonne, à l’exception des cellules de la ligne d’en-tête.
   2. Sélectionnezl’icône de table et sélectionnez Cellule > Propriétés des cellules.
   3. Entrez les valeurs suivantes dans l’ongletGénéral :
      • Alignement H : Gauche
      • Aligner en V : haut
   4. Sélectionnez OK.
   5. Répétez ces étapes pour les cellules de table de la deuxième colonne.
7. Définissezla couleur d’arrière-plan de la ligne du milieu.
   1. Positionnez votre curseur sur la ligne du milieu du tableau, sélectionnez l’icône du tableau, puis sélectionnez Ligne > Propriétés des lignes.
   2. Dans l’onglet Avancé, entrez Argent dans la zone de texte à côté de Couleur d’arrière-plan pour la définir sur la couleur #c0c0c0.
   3. Sélectionnez OK.
   4. Répétez cette procédure pour une ligne de table sur deux.
8. Sdéfinit la largeur de la colonnes.
   1. Sélectionnez la première colonne de la table, sélectionnez l’icône de table, puis sélectionnez Cellule > Propriétés des cellules.
   2. Dans l’onglet Général , saisissez 30 % dans le champ de texte Largeur .
   3. Sélectionnez OK.
9. Sélectionnez et maintenez enfoncé (ou cliquez avec le bouton droit de la souris) l'en-tête du formulaire, puis sélectionnez Enregistrer.
10. Saisissez les données dans les cellules du tableau, puis enregistrez l’article.