Ajouter une table à un éditeur HTML

  • Rversion finale: Xanadu
  • Mis à jour 1 août 2024
  • 2 minutes de lecture
  • Ajoutez et formatez unexemple de table n dans un article de la base de connaissances à l’aide des contrôles de champ HTML.

    Avant de commencer

    Rôle requis : administrateur

    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 dans htmlArea
    Exemple de table html
    Figure 2. Exemple de tableau dans TinyMCE v6.8.3
    Exemple de tableau 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, le tableau obtenu diffère des exemples donnés.

    Procédure

    1. Accédez à la Tout > 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 Tableau, sélectionnez Insérer un tableau, puis sélectionnez le nombre de lignes et de colonnes.
    4. Edit les propriétés de la table.
      1. Positionnez votre curseur dans la table, sélectionnez l’icône de la table, puis sélectionnez les propriétés de la table.
      2. Dans l’onglet Général , entrez les valeurs suivantes.
        • 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 du sélecteur de couleurs devient grise pour indiquer la couleur que vous avez entrée. Vous pouvez également sélectionner la case et sélectionner les couleurs dans la palette.
      4. Sélectionnez OK.
    5. Update la ligne de table d’en-tête.
      1. Sélectionnez les cellules de la première ligne du tableau, sélectionnez l’icône du tableau, puis sélectionnez Ligne > Propriétés de la ligne.
      2. Dans l’onglet Général , entrez les valeurs suivantes.
        • Type de ligne : En-tête
        • Alignement : Centre
      3. Dans l’onglet Avancé, saisissez #87cefa dans la zone de texte à côté de Couleur d’arrière-plan pour le définir sur bleu clair.
      4. Sélectionnez OK.
    6. Définit les propriétés des cellules dutableau.
      1. Sélectionnez toutes les cellules du tableau dans la première colonne, à l’exception des cellules de la ligne d’en-tête.
      2. Sélectionnez l’icône detable et sélectionnez Cellule > Propriétés des cellules.
      3. Dans l’onglet Général, entrez les valeurs suivantes :
        • Alignement H : Gauche
        • Alignement en V : Haut
      4. Sélectionnez OK.
      5. Répétez ces étapes pour les cellules du tableau dans la deuxième colonne.
    7. Définitla couleur d’arrière-plan de la ligne du milieu.
      1. Positionnez votre curseur sur la ligne centrale du tableau, sélectionnez l’icône du tableau, puis sélectionnez Ligne > Propriétés de la ligne.
      2. Dans l’onglet Avancé, saisissez Argent dans la zone de texte à côté de Couleur d’arrière-plan pour définir la couleur #c0c0c0.
      3. Sélectionnez OK.
      4. Répétez cette procédure toutes les deux lignes de table.
    8. Sdéfinit la largeur de la colonnes.
      1. Sélectionnez la première colonne du tableau, sélectionnez l’icône du tableau, 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.