How to use the Drag and Drop Tools in your Website Content Pages

Add a Table to Your Blog

Navigate to the Blog Editor

1. Login to TheWebConsole

2. From the left side menu click Blog and choose Blog posts.

3. From the blog post list either "Add Post" or click "Edit" on the desired blog.

Note: Information on How to Add or Edit a Blog can be found in more depth within separate knowledgebase articles.

 

Adding a Table

1. Once the blog editor has loaded you will be given the option to add different content modules to the page. Click and drag the “Table” content module into the page, you will notice a blue highlighted box appear on the page wherever it is possible to add the module.

 

Editing a Table

1. Once a Table module has been added to the blog, you will have the ability to edit the button and its formatting. This can be done by clicking on the table module on the page and clicking the edit button. (The edit button appears as a pencil icon in the top right of the section)

2. Once the edit button has been clicked the edit window will appear, there are numerous options across multiple tabs, you can find an overview of the primary settings below:

  • Table

    • Properties: This will allow you to choose how the table will display with the options for:
      - Condensed
      - Responsive
      - Auto Width
      - Top Row as Header
      - Last Row as Header

    • Caption: This will allow you to add a caption to the table.

    • Caption Position: This will allow you to have the caption display on either the Top or the Bottom.

    • Container Class: This area is to allow our designers to add custom styling to the table.

  • Rows

    • Container Class: This area is to allow our designers to add custom styling to the table.

  • Columns

    • Container Class: This area is to allow our designers to add custom styling to the table.

  • Style

    • Container: This will allow you to choose styles to apply to the table container.

              - Border: This will allow you to create a border around the table container.

              - Padding: This will allow you to add space between the table container.

              - Margin: This will allow you to add margins between the table container.

              - Background: This will allow you to choose if a background will be displayed within the table container.

              - Background Color: This will allow you to choose a background color or image for your table container.

    • Caption: This will allow you to choose the styles to apply to the table caption.

              - Border: This will allow you to create a border around the table caption.

              - Padding: This will allow you to add space between the table caption.

              - Margin: This will allow you to add margins between the table caption.

              - Background: This will allow you to choose if a background will display within the table caption.

              - Background Color: This will allow you to choose a background color or image for your table caption.

    • Header: This will allow you to choose the styles to apply to the table header.

              - Border: This will allow you to create a border around the table header.

              - Padding: This will allow you to add space between the table header.

              - Margin: This will allow you to add margins between the table header.

              - Background: This will allow you to choose if a background will be displayed within the table header.

              - Background Color: This will allow you to choose a background color or image for your table header.

    • Body: This will allow you to choose the styles to apply to the table body.

              - Border: This will allow you to create a border around the table body.

              - Padding: This will allow you to add space between the table body.

              - Margin: This will allow you to add margins between the table body.

              - Background: This will allow you to choose if a background will display within the table body.

              - Background Color: This will allow you to choose a background color or image for your table body.

    • Footer: This will allow you to choose the styles to apply to the table footer.

              - Border: This will allow you to create a border around the table footer.

              - Padding: This will allow you to add space between the table footer.

              - Margin: This will allow you to add margins between the table footer.

              - Background: This will allow you to choose if a background will be displayed within the table footer.

              - Background Color: This will allow you to choose a background color or image for the table footer.

3. Once you have applied the section settings click the “Save” button to save the table changes and close the edit window.

4. Once you have added your table and applied the settings click the “Save” button located at the bottom of the side menu, this will save your page.

Note: Always remember to follow the final point and save the page itself, or the hard work you have done will not be applied.

Last Modified: 14 September 2023
In This Article