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. It will automatically be applied to the table.
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:
Here, feel free to scroll down until you find the template you want to replace the original one with. Click on it in order to select it, and then click on "Replace Template":
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.
Add columns and rows
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.
Insert/Remove columns or rows
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:
Table Cell options
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:
While managing the cells, you can also merge them. In order to do this, first you will have to select more cells that you want to merge.
You can select more cells by holding down the left mouse button on a cell and drag it across the other cells you want to select. Once you do this, the "Merge" option will appear above the table:
You simply have to click on it and the cells that you have selected will be merged, meaning that they will become one cell.
If you want to split cells that you have previously merged, you have to click on the merged cell first. This way the "Split" option will appear above the table:
Once you click on the "Split" option the merged cell will be split into the original number of cell that they were before you have merged them together.
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.
After you have customized your table in desktop view, you can also check it in mobile view to make sure it looks mobile-friendly. In order to do this, click on the "Mobile View" option from the bottom-center part of the editor (next to the "Preview" option):
If the table you have created is not selected, then access it either by clicking on it directly or by selecting it from the breadcrumbs.
You will see that besides the options of the "Table" element that are available in desktop view, there is an additional option here, in "Mobile View".
This is the "Create mobile-responsive table" option in the "Main Options" section from the left sidebar:
Make sure that this option is checked because, just as its name says, this will make the table you have created mobile-responsive:
Checking this option will turn the headers of the table into a column and will place all the other cells in a vertical layout, instead of a horizontal one, in mobile view. This way your table will be a lot easier to view on a mobile phone:
If you leave the "Create mobile-responsive table" option unchecked, then, the table will not be mobile-responsive. This means, that although, your table will look good on a desktop, it will be difficult to view it on a mobile phone.
If people will want to see the information from every cell of the table on a mobile phone, they will have to scroll all the way through to see them. The table will look like this on mobile:
Note: The "Create mobile-responsive table" option is only available in the "Mobile View" of the "Table" element. Thus, it will not be present in the "Desktop" or in the "Tablet" view.
After you made sure the table is mobile-responsive too, you can save your work using the "Save Work" option from the bottom left part of the editor and then, preview the page to see how the table you have created will look like for the visitors of your website.
Hopefully, this article was useful for you. If so, please give it a smile below :)