Ask a Question ?
Design & Publish Websites Faster

Table App

Table App

With this new app you will be able to create amazing tables to display any information you want on your site. A good example of this could be to list your services and the things that you include on each one of your packages, this way you can keep the information clean and organized.

What will you learn?

In this article you will learn how to use the Table app so you can display your information in an organized and clean way.

How it works

The Table app will let you add Columns and Rows so you can have your information organized into cells, displayed in the classic spreadsheet view or independent columns.

How to add a new column

In order for you to add a new column you only need to click on the Edit Content button (Pencil) and you will have to click on the option that says Add New Column.

Edit Settings button

Click on the edit Settings button in order to access the CMS panel to add a new column

You will have to type the title or the specific text you want to appear on the first cell of the column. It does not necessarily have to be text, you can also use images or videos.

Add New Column

You can type any text you want. You can also add images or videos

In order to edit the rest of the cells of the columns you only need to double click on the text, once you do it you will be able to edit the content in place.

Edit in Place cells

You can edit the cells just by double clicking on them

If you want this new column to look different than the rest, then you can check the “Feature Column” option and save.

Feature Column

Check this box in order to make this column a Featured Column

This action will let you manage specific styles for the Featured Column such as color for title cell as well as for content cells, borders, gradients, margins, padding and spacing among other options, this way you will be able to differentiate that column from the rest.

Featured Column

You will be able to differentiate featured columns from the rest by applying different colors, borders, gradients, margins, spacing and padding using the style dots

How to add a new row

In order for you to add a new rows you only need to click on the Edit content button (Pencil) and you will have to click on the option that says Add New Row.

Add a new row

Click on this option in order to add a new row. Remember that you can also use images and videos

You will have to type the title or specific text you want to appear on the first cell of the row. The same as in the columns, it does not necessarily have to be text, you can also use images or videos.

In order to modify the rest of the cells of that row you will only have to double click  on the text, easy as that.

You can also highlight specific rows, this option is really useful when you want to attract your visitor’s attention to an specific part of the table. In order to highlight a column you only need to click on the Edit Content button, then select the option that says Manage Rows, after that you will have to select the row you want to highlight and lastly you will need to check the option that says Highlight Row and save.

Highlight row

Check this option in order to highlight the selected row

Remember that you can add as many columns and rows as needed.

Extra Features

If you thought that highlighting columns and rows was the only feature of the app, I’m so sorry to tell you this but, you were wrong. There are other cool things you can do in order to change the look of your table, so keep reading.

Table Style

If you click on the Edit Settings button, the first thing you will see at the top would be the Table Style. On the dropdown menu you will find two options. The first one is Grid and the second one is Independent Columns.

Table Style

You can choose between the classic Grid view or Independent Columns view

Grid is a classic spreadsheet table style whereas Independent Columns will separate the columns so they can have different heights.

Different Views

Here’s an example of how the same table looks on the different type of views

Grid View Settings

With these settings you will be able to to decide whether to display or not the Row Title Column or the Row Title Header.

Grid Settings

You can decide either to display or not the Row Titles Column and the Row Titles Header

It is really important to mention that this settings will only apply if the Table is set to display the information on the Grid view.

Independent Columns Settings

In this option you will only be able to modify the spacing in between the independent columns. You can choose from 5px, 10px, 15px or 20px.

Spacing between columns

You can decide how much space to leave in between columns

Now you’re ready to create an amazing table! Go ahead and access your site in order to try this app.

Let us know if you have any comments or questions.

All the best,

 

Menu