How to Use the Table Element
The video above showcases in detail how you can add a table to your page using the “Table” element and then, customize it to suit your purposes.
The “Table” element allows you to add customized tables to your page by following a few easy steps. Here they are:
1. Add the “Table” element to the page
First, click on the plus sign from the right sidebar, to open the list of elements. Look for the “Table” element and when you have found it, drag & drop it to the desired place on the page:
A window will open with every template that is available for this element:
Scroll down to see all of the templates and when you found the one you want to use, click on it to select it and then, click on the “Choose Template” button.
2. Add/personalize the content of the table
Depending on which template you have chosen, do the following:
The blank template is the only one from the list of “Table Templates” that is not styled. This means that it doesn’t have a predefined style and default content in it, so you can start customizing from scratch:
After you have added it to the page, you will need to add the actual content to it as well. You can do this by clicking either in a cell or a header that you want to edit from the table.
This will open the "Text" element that is placed there and you can use it, as you normally would, to add text content to your page.
If you have chosen one of the templates that is already styled, you will see that these types of templates also have a default content added to them:
What you need to do in this case is to personalize the default content, meaning to replace it with your own.
For instance, if the content is in a “Text” element, then simply click inside the element (which is inside the table), delete the current text and write/paste in your own text.
3. Customize the table with the “Sidebar options”
Once the content of the table is ready, use the options from the left sidebar to customize your table further. Here are the options that you can use:
You can use this option if you want to change the template of table. Simply click on the name of the template from the “Template” section of this option:
This will open the window with the various templates again, and you can select another one just like you did when you first added the table to the page.
Important! Please keep in mind that whenever you change the template of a table, the content that you have previously added to the table will be lost.
Therefore, it is highly recommended to try out the different templates first, to see which one is the most suitable for you. Only start to personalize the content from the table, when you are sure that you have found the right template.
If you want to see some examples of the table templates being used, check out this blog post.
Besides the “Template Options”, you can use the “Main Options” of the table as follows:
You can easily adjust the padding of the cells from the table, either by dragging the slider under this option, or by entering a value manually in the box next to the slider:
This option allows you to align the content so that it is placed either at the top, at the middle or at the bottom of the cells. All you have to do is to click on the position you want to choose from this option:
Header & Cell color
These two options will let you change the current color of the headers or the cells. Just click on the box with the color you want to change:
In both cases, this will open the color picker with the help of which you can change the color of the headers/cells:
Select the color you want from the color picker (or enter its code in the designated field), adjust the opacity and once you’re done, click on the “Apply” button. You will see that the new color will be displayed on the headers/cells.
Make table sortable
This option allows you to make the table sortable for the users. This means, that the visitors of your website will be able to sort the content of the table, to be displayed either in an alphabetical order (in the case of texts), or in a numerical one (in the case of numbers).
If you want to make the table sortable, just check the checkbox that is next to this option:
If you want to further customize the table, first click on the “Manage Cells” button:
This will open an overlay with further options related to cells. Here you will first be able to add columns and rows to your table by simply clicking on one of these options:
Then, if you click on one of the cells, more options will be available in the overlay. You will be able to insert columns/rows before or after the cell that you have selected, as well as remove the column/row with the cell you selected:
Furthermore, when you click on one of the cells, a few other options will also open in the left sidebar. You can use these to adjust the “Column Width” as well as the “Row Height”, or choose the vertical alignment, just like before:
After you have finished using the options from the “Manage cells” section, simply click on the “Close” button. The overlay will disappear and you can continue editing the table.
The “Advanced” option of the “Table” element, will allow you to choose a different color for the even & the odd rows by clicking on the boxes with the colors in them. Then, the same color picker will open and you can select a new color, just like you did in the case of the header/cell color.
Furthermore, if you want, you can also use the “Reset widths” and “Reset heights” options from here to remove the height and the width that you have set for the cells, when managing them.
In the case of the “Blank” template, you can see some default borders, while editing the table, but these are visible only for you, to make the customizing process easier.
If you want to add borders to the table that will be displayed for the visitors of the page as well, then you will have to use the “Table Borders” option.
You can add an exterior border to the table by clicking on the little up arrow from the “Table Borders” section, or entering a value manually. The number you enter here will define the thickness of the border that is applied.
You can also change the color of the border by clicking on the box with the color in it and you can choose one out of the three patterns that are available for the border. You just have to click on the pattern you want to use:
If you wish to add an interior border to the table as well, then, activate the “Apply inner border” option from the “Table Borders” section.
This will open the “Header border” and the “Cell border” options as well, and you can use them in the same way that you used the exterior borders options. Add the borders to the headers/cells by selecting their thickness, choose a color and then, a pattern for them:
The more general options, like the “Typography”, or the “Layout & Position” options, are also available for the “Table” element, but since these are available for almost every Thrive Architect element, you will find separate tutorials on them in our Knowledge Base.
Hopefully, this article was useful for you. If so, please give it a smile below :)