Summary

  • Overview
  • Adding Table
  • Rows and Columns
    • Number of Rows and Columns
    • Adding Rows and Columns
    • Moving Rows and Columns
    • Resizing Rows and Columns
  • Table Body
    • Alternating Row Color
    • Vertical Align
  • Table Header and Footer
  • First Column Style
  • Cells
    • Active Cell Style
    • Switching Cells
    • Cell Multi-Select
    • Cell Size
    • Buttons in Cells
    • Icons in Cells
  • Table in Mobile Views

Table Overview

You can use the Table Element to add tables to your websites.

table.png

Adding Table

You can add a Table from the Add Elements list on the Top Bar.

adding-table.png

Rows and Columns

Number of Rows and Columns

You can change the number of the Table's columns and rows by moving sliders for those Properties in the Property Panel.

number-rows-colums.png

Adding Rows and Columns

You can add Rows and Columns from right-click Context Menu or click the More Options "..." icon on the Toolbar or the Row pointer for the Active Cell.

add-row-columns.png

You can also add only one Column to the right by clicking the Plus icon on the Active Cell's Toolbar.

add-column-right.png

Moving Rows and Columns

You can move the Table Rows and Columns by selecting the appropriate operations in the context menu for the active Cell.

table-move-column.png

Resizing Rows and Columns

You can resize Rows and Columns by dragging the Cell Lines. You can also enter the Cell Width and Height for the Active Cell in the Property Panel.

resizing-rows-columns.gif

Table Body

Alternating Row Color

You can alternate Row by adding the Background Color for every second Row.

alt-row.png

Vertical Align

You can set the Vertical Alignment for the Table Cells.

table-valign.png

Table Header and Footer

You can also stylize the first and last Row of the Table, creating the Table Header and Footer.

header-footer-rows.png

First Column Style

You can also stylize designs the Column of the Table.

first-column.png

Cells

Active Cell Style

You can specify the Properties of the Active Cell.

table-active.png

Switching Cells

You can switch between the Table Cells by pressing the Tab and Shift+Tab Keys.

switch-table-cell.gif

Cell Multi-Select

You can do the Multiselect for Table Сells to edit values for all selected Cells a once in the Property Panel.

multiselect.gif

Cell Size

You can specify the Width and Height for a Cell, several Cells, or all selected Cells in the Property Panel.

table-cell-size.png

Buttons in Cells

You can add a Button and Hyperlinks to Cells. Add a Hyperlink to a Cell, then change this Hyperlink's Style to the Button.

table-button.png

Icons in Cells

Similarly, you can add and stylize Icons in Cells.

table-icons.png

Table in Mobile Views

The Table Width may be larger than the Screen of a Device. So, there is Horizontal Scrolling shown for the Table in the Responsive Modes. It allows seeing the Table Content while it goes beyond the Sheet Width.

horizontal-scrolling-responsive.png

## Summary - Overview - Adding Table - Rows and Columns - Number of Rows and Columns - Adding Rows and Columns - Moving Rows and Columns - Resizing Rows and Columns - Table Body - Alternating Row Color - Vertical Align - Table Header and Footer - First Column Style - Cells - Active Cell Style - Switching Cells - Cell Multi-Select - Cell Size - Buttons in Cells - Icons in Cells - Table in Mobile Views ## Table Overview You can use the Table Element to add tables to your websites. !table.png! ## Adding Table You can add a Table from the Add Elements list on the Top Bar. !adding-table.png! ## Rows and Columns ### Number of Rows and Columns You can change the number of the Table's columns and rows by moving sliders for those Properties in the Property Panel. !number-rows-colums.png! ### Adding Rows and Columns You can add Rows and Columns from right-click Context Menu or click the More Options "..." icon on the Toolbar or the Row pointer for the Active Cell. !add-row-columns.png! You can also add only one Column to the right by clicking the Plus icon on the Active Cell's Toolbar. !add-column-right.png! ### Moving Rows and Columns You can move the Table Rows and Columns by selecting the appropriate operations in the context menu for the active Cell. !table-move-column.png! ### Resizing Rows and Columns You can resize Rows and Columns by dragging the Cell Lines. You can also enter the Cell Width and Height for the Active Cell in the Property Panel. !resizing-rows-columns.gif! ## Table Body ### Alternating Row Color You can alternate Row by adding the Background Color for every second Row. !alt-row.png! ### Vertical Align You can set the Vertical Alignment for the Table Cells. !table-valign.png! ## Table Header and Footer You can also stylize the first and last Row of the Table, creating the Table Header and Footer. !header-footer-rows.png! ## First Column Style You can also stylize designs the Column of the Table. !first-column.png! ## Cells ### Active Cell Style You can specify the Properties of the Active Cell. !table-active.png! ### Switching Cells You can switch between the Table Cells by pressing the Tab and Shift+Tab Keys. !switch-table-cell.gif! ### Cell Multi-Select You can do the Multiselect for Table Сells to edit values for all selected Cells a once in the Property Panel. !multiselect.gif! ### Cell Size You can specify the Width and Height for a Cell, several Cells, or all selected Cells in the Property Panel. !table-cell-size.png! ### Buttons in Cells You can add a Button and Hyperlinks to Cells. Add a Hyperlink to a Cell, then change this Hyperlink's Style to the Button. !table-button.png! ### Icons in Cells Similarly, you can add and stylize Icons in Cells. !table-icons.png! ##Table in Mobile Views The Table Width may be larger than the Screen of a Device. So, there is Horizontal Scrolling shown for the Table in the Responsive Modes. It allows seeing the Table Content while it goes beyond the Sheet Width. !horizontal-scrolling-responsive.png! ##