Add a Table with Rich Content Editor

  • Release version: Australia
  • Updated March 12, 2026
  • 5 minutes to read

    • Add a table to your content to organize information in rows and columns.

    Before you begin

    Role required: sn_cd.content_manager

    Fill in the New content form fields. See Create rich content

    Create the page layout using modules or columns.

    Procedure

    1. Navigate to the canvas by selecting the Open editor button from the Design tab of the New content form.
    2. Drag and drop the table component into the canvas.
    3. In the Create new table window, enter the number of columns and rows.
    4. Create a table header row by navigating to Settings > Properties and selecting Enable header.
    5. To format the header title text, click the text box in the header row and configure the following settings:
      Table 1. Table header settings
      Settings field Description
      Styling
      Text style Allows you to quickly change the look of your text by selecting a pre-formatted choice. You can select different headlines or paragraph styles.

      Headline 1-6 corresponds to h1 - h6 HTML tags.
      Text color Use this drop-down to change the color of your text.
      Your choices are:
      • Primary: The primary color defined by your portal theme.
      • Muted: The color defined by your portal theme.
      • White: Changes the color of your text to white. This is useful when using a background color other than white.

      Text color assigns predefined CSS classes for text color.
      Display Configures the appearance of multiple components within the same column, such as an image and a text component.
      Note:
      This setting only applies in the case that you add another component next to the title text box.
      Select from the following options:
      • Side by side (default): Text appears with the other component next to it.
      • Top and bottom: Image appears above the other component.
      Note:
      For best results, set the same display for the components. For example, if you have an image and text components in a column and want the image to appear on the left and the text to appear at the right, change the Display settings for both components to Side by side.
      Align Determines the horizontal alignment of your text. Choose from:
      • Left justify
      • Center justify
      • Right justify
      • Justify (text is aligned with both margins)
      Advanced styling
      Padding Padding is the space between content and the border of an element. Specify the value for top, bottom, right, or left padding by entering a number.
      Margin Margin is the space between a row and another element/the canvas boundary. Specify the value for top, bottom, right, or left padding by entering a number.
      Font name Defines the font face used to render characters.

      Click the drop-down arrow to select a different font.
      Font size Sets the size of the font.
      Font weight Determines how bold or light your text appears.

      Click the drop-down arrow to select a different weight.
      Line height Sets the vertical distance between two lines of text.
      Font color Overrides the font color from your portal theme.

      To select a color, enter the hex code or click the color picker (grey square to the right of the font color) and select a color from the color palette.
    Click on a cell to configure the settings for that cell, such as the background color or border. To configure settings for a row or all the cells in the table, click the up arrow until your desired container is selected.The up arrow selects the container of the currently selected component
    1. Configure table styling settings:
      Settings options will vary, depending on if you have selected a cell, row, or the entire table.
      Table 2. Styling settings
      Settings field Description
      Styling
      Background Color Use the color picker (checkered square) to select a color or enter the color code that represents the background color you want to appear.

      All HTML colors are supported. For more information, see HTML color names.
      Align Determines the horizontal alignment of your text. Choose from:
      • Left justify
      • Center justify
      • Right justify
      • Justify (text is aligned with both margins)
      Advanced styling
      Width

      Height

      		 Adjust the width and height of the component using the Width and Height fields.
      You can also choose the unit of measure you prefer by selecting the single down arrow key to the left of the up and down arrows. The choices are:
      • auto: Size is based on the content within the tab. If you enter additional text in the tab, the width automatically increases.
      • px: Use pixels as your measurement.
      • %: Use a percentage as your measurement.
      Padding Padding is the space between content and the border of an element. Specify the value for top, bottom, right, or left padding by entering a number.
      Margin Margin is the space between a row and another element/the canvas boundary. Specify the value for top, bottom, right, or left padding by entering a number.
      Border Edit the border around the outside of the button.
      Note:
      The border is the outline around the button.

      Width: Use the up and down arrows to adjust the width of the border. Just like the width and height, you can choose the unit of measure you prefer by selecting the single down arrow key to the left of the up and down arrows.

      Style: The format of the border around the button. Select the drop-down to select the type of border you want around the button.

      Color: The color of the border around your button. Select the color of your button using the color palette and slide bars similar to how you select your background color.
      Border radius Use the up and down arrows to adjust the radius of the border. Just like the width and height, you can choose the unit of measure you prefer by selecting the single down arrow key to the left of the up and down arrows.
    2. With a cell selected, use Settings > Properties to add or delete columns or rows, merge cells, and move rows up or down.
      Select a cell to add columns or rows or merge cells
    3. Select Save or Save and Finish.
      Selecting Save saves your content and you remain on the Rich Content Editor canvas. Selecting Save and Finish saves your record and returns you to the New content form.

    What to do next

    • (Optional) Translate your content.

      Request language translation for your content. For more information, see Multilingual support in the Content Library.

      Note:
      Only translate content after you are done modifying the content. For best results, we do not recommend that you add or remove components or change the formatting after translation.

      To create rich content that is formatted differently in different languages, duplicate the content and modify the formatting as needed. Then, use Audiences to target the content to users by language. See Audiences

    • Preview your content from the Publish tab.
      Note:
      Content Preview is designed to provide a general idea of how your content looks. Content may look different once published due to variations in device resolution, theme difference, or mobile app style configuration.
    • Configure a publish plan to control where the content is delivered, the audience, and the period of time it is available: Create a publish plan for your content.