➕ Building a page
      Back to home
      1. Help Center
      2. Using Foleon
      3. ➕ Building a page

      Visualize data in tables

      The table element lets you quickly visualize data. It's an excellent tool for engagingly presenting your data. This article shows you how to add the element to your page and manage its settings.

      💡 Want to learn other ways to visualize your data? Read our article Working with the data elements. 

      In this article

      🎥 Click here to watch our video lesson on how to create tables in Foleon

      Thumbnail template (45)

      How to add the table element

      You can find the table element in the elements tab on the left-hand side of your screen. Drag the element into a column on your page.

      💡When you're working with the Content Builder, it's not possible to add a table element to your page. They're included in block templates in the Content - Data section.

      Screenshot 2023-05-10 at 13.17.47 (1)

      Once you've dropped the element, you'll be prompted with a pop-up that asks you to select the number of rows and columns.

      💡 Every table has a table header. This is the first row of the table with a contrasting color. The header is counted as one row in your selection. After adding the table to your page, you can style the table header in the element settings.

      ⚠️ When you create a new table, you can start with up to 8 rows and 8 columns.
      Once the table is added to your page, you can change the number of rows and columns.

      6396fd9ad425b

      You're now ready to populate the table with your data, whether numbers or text. Click on a table cell to insert data.

      Table Example

      Change the number of rows and columns

      To change the number of rows and columns, open the element settings and click on general settings. Use the input fields to set your desired number of rows and columns.

      💡 The maximum number of rows is 50. The maximum number of columns is 8.

      Change number - rows and columns

      Add, delete, or move rows and columns

      You can easily add, delete, or move rows and columns in your table.

      Hover over the top-right corner of any cell and click the three vertical dots. From the dropdown menu, choose to insert, move, or delete a row or column.

      Click the three dots to insert move delete column or row

      Style your table

      Table settings

      In the table section of the element settings, you'll find different settings that let you style your table:

      • Table color — Set the color for the table cells. This does not include the table header.

      • Header color — Set the color for the table header.

      • Header position — Decide on the position of your table header. You can choose top, top-left, left, and bottom.

      • Style alternates — Style alternating rows or columns with a different color.6396fd9ee54f1

      💡 If you want full control over a table and more editing options – such as customizing the height and width of each cell – you may consider adding your own table with the embed element.

      Brand settings

      You can set the default font for the table header and table cell in the brand settings. If you click on table header or table cell, the font selection bar will let you change the font.

      Your font selection in the brand settings will be the default font when you add a new table in your Doc.

      6396fda06b647

      Text formatting

      You can easily customize the text formatting within individual table cells to match your design.

      • Adjust text formatting in a single cell: Click inside the cell you want to edit. Use the formatting bar at the top of the screen to adjust the font, size, text color, and horizontal alignment (left, center, or right).
      • Adjust text formatting in multiple cells: Select the cells you want to style. You can do this by clicking and dragging your mouse across the desired cells or by holding shift and clicking on each cell you want to include. Once selected, use the formatting bar to adjust the font, text color, or horizontal alignment (left, center, or right) and vertical alignment (top, middle, or bottom).

      Edit table text formatting

      Other element settings

      💡 When you're working with the Content Builder, you won't see these styling element settings.

      Border

      The border option allows you to create a complete border or a border on specific sides of your element. All sides at once is selected by default, meaning that when you increase the border thickness, the same amount of border will appear on all sides simultaneously.

      When all sides at once is deselected, the option to increase the amount of the border for each side will appear. It is also possible to add more than one border. Every border will have the same color selected at the border color picker.6396fda2136c4

      Spacing

      Spacing can be increased to create more space between the element's border and the content within the element.6396fda378e25

      Animation

      You can select the entrance animation of the element in the drop-down menu. This animation will show once when the page is opened.

      6396fda4cefa7