Fonctions de table dans l’éditeur de champs HTML

  • Rversion finale: Xanadu
  • Mis à jour 1 août 2024
  • 2 minutes de lecture
  • La version 6.8.3 de TinyMCE utilise des menus et des sélections de menu pour créer et modifier des tables.

    Tableau 1. TinyMCE version 6.8.3
    Élément d'interface utilisateur Action
    Figure 1. Menu Table
    TinyMCE v6.8.3 Menu Table
    Sélectionnez l’icône de table ( Table TinyMCE v6.8.3) pour accéder au menu de table de la version 6.8.3 de TinyMCE. Utilisez le menu de la table pour :
    • Insérer ou supprimer une table
    • Modifier les propriétés de la table
    • Ajouter, déplacer ou supprimer des lignes et des colonnes
    • Modifier les propriétés de la ligne et de la colonne
    • Diviser et fusionner des cellules
    Figure 2. Grille d’insertion de table
    TinyMCE v6.8.3 Grille d’insertion de table

    Pour insérer un tableau dans le champ HTML, sélectionnez Insérer un tableau et mettez en surbrillance des carrés dans la grille pour représenter le nombre souhaité de lignes et de colonnes. Sélectionnez le dernier carré en surbrillance pour insérer le tableau.

    Une fois que vous avez inséré le tableau, vous pouvez modifier la taille en sélectionnant et en faisant glisser les poignées sur les bords du tableau.

    Figure 3. Sommaire
    TinyMCE v6.8.3 Table des matières

    Le module d’extension Table des matières génère une table des matières de base et l’insère dans l’éditeur à la position actuelle du curseur. Les entrées de table des matières sont générées à partir d’éléments d’en-tête dans le contenu.

    Figure 4. Propriétés de la table
    Propriétés de table de TinyMCE v6.8.3
    Dans le menu Table, sélectionnez le bouton Propriétés de la table pour ouvrir la boîte de dialogue Propriétés de la table. À partir de ce menu, vous pouvez effectuer l’une des actions suivantes :
    • Onglet Général :
      • Définir la largeur et la hauteur de la table
      • Définir l’espacement et le remplissage des cellules
      • Activer les bordures et les légendes
      • Définir l’alignement de la table
    • Onglet Avancé :
      • Configurer le style de tableau
      • Sélectionner la couleur de la bordure
      • Sélectionner la couleur d’arrière-plan
    Figure 5. Propriétés des cellules
    TinyMCE v6.8.3 Menu des propriétés des cellules
    Avec le curseur dans la cellule de tableau souhaitée, ouvrez le menu du tableau et sélectionnez Propriétés de la cellule. Dans ce menu, vous pouvez définir les propriétés suivantes pour les cellules de tableau :
    • Onglet Général :
      • Largeur et hauteur
      • Type et champ d’application
      • Alignement horizontal et vertical
    • Onglet Avancé :
      • Style Cell
      • Couleur de l’ordre B
      • Couleur de fond B
    Figure 6. Propriétés de la ligne
    TinyMCE v6.8.3 Menu des propriétés de la ligne
    Avec le curseur dans une cellule de tableau de la ligne souhaitée, ouvrez le menu du tableau et sélectionnez Propriétés de la ligne. Dans ce menu, vous pouvez définir les propriétés suivantes pour les lignes :
    • Onglet Général :
      • Type de ligne
      • Alignement
      • Hauteur
    • Onglet Avancé :
      • Style de flux
      • Couleur de l’ordre B
      • Couleur de fond B

    Vous pouvez également coller des tableaux dans des champs HTML à partir d’éditeurs basés sur des tables.