Adding a Table

Adding a Table


A table is a data structure that organizes information into rows and columns. It is commonly used for representing scheduling or contact information on the site.

Adding a table

1. To set up a table on your site, open the editor and add wireframe-series-7-contacts or wireframe-series-1-schedule block from the gallery:


Adding rows to a table

1. Hover over a row in the table and click on + Row in the bottom right corner to add a new one below:

2. Click on the three dots in the top right corner of a row to delete or duplicate it:

3. You can also move the row within the table by holding this icon and dragging it to the desired position:


Changing the layout in a table

1. Hover over the table and click on the "gear" to access the Table settings:

2. Navigate to the Layout tab to change the number of columns in your table:

Note: the maximum number of columns is 8.


3. By default, the width of the columns in the table is equal for each of them. To set a specific column width, toggle the Equal column width option:

4. Then, hover the cursor between two columns in the editor and start dragging it to adjust the width of each column:


Important: the resize changes the width of the column to the left of the cursor.


5. In the Layout tab of the Table settings you can change the Border color of your table:


6. You can also adjust paddings and content alignment there, or choose the Style options in the drop-down:


Adding a header background

1. For that, navigate to the Header tab in the Table settings:

2. Set up the color background for the header in your table:


Adding the rows background

1. For that, navigate to the Rows tab in the Table settings:

2. There you can choose the presets — basic coloring algorithms for your rows, and change the default colors. This is what your table will look like with the Color Gradation preset, which automatically generates colors for each item:

Important: there is no way to set an individual color for each row in the table yet.

Don't forget to publish your site once you have done customizing your table.


Tip: check the article Changing the design of a block to set up the background or the animation for the whole block.


    • Related Articles

    • Adding Elements

      Most blocks in our editor are fully customizable. Therefore, you can enrich the look of your blocks by adding new elements to them — for example, icons, dividers, lists, etc. Tip: see the article Adding a custom block to create your block from ...

    • Adding Google Maps

      Adding Google Maps to your site will benefit both you and your customers, providing your visitors with a detailed visual guide on how to find your company. Adding Google Maps 1. Firstly, add a block which contains a map from the Contact tab in our ...

    • Adding A logo

      Logotype is a text or graphic representation of a company name, trademark, abbreviation, etc. Adding a logo to the header or footer helps you create an authentic design for your website and become more recognizable among others. In this article, you ...

    • Adding a Countdown

      A countdown block serves for displaying backward counting to indicate the time remaining before an event that is scheduled to occur. Use countdown to announce the discount period or special offer, estimate the time left before the launch of a new ...

    • Adding a Button

      Buttons can be used for site navigation and as call-to-action. You can add a button to almost any block in the editor. Adding a button 1. To add a new button, hover over the block and click on the "plus" sign where you'd like to place it: 2. Choose ...