Summary

  • Overview
  • Add Table
  • Add Row and Column
  • Add Elements
    • Add Button To Table Cell
    • Add IconTo Table Cell
  • Rows and Columns
    • Number of Rows and Columns
    • Move Rows and Columns
    • Resize Rows and Columns
    • Alternative Row Color
  • Table Header and Footer
  • First Column Style
  • Table Cells
    • Active Cell Style
    • Switching Cells
    • Cell Multi-Select
    • Cell Size
    • Buttons in Cells
    • Icons in Cells
    • Cell Vertical Align
  • Table in Mobile Views

Table Overview

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

table.png

Add Table

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

adding-table.png

Add Row and Column

You can add Rows and Columns by right-clicking the Context Menu or clicking 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

Add Elements

Add Button To Table Cell

You can add a Button and Hyperlinks to Cells from the Context Toolbar.

add-button-table.png

Add Icon To Table Cell

You can also add an Icon from the Context Toolbar to a Table Cell.

add-icon-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

Move 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

Resize 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

Alternative Row Color

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

alt-row.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 the designs of the Column of the Table.

first-column.png

Table Cells

Active Cell Style

You can specify the Properties of the Active Cell.

table-active.png

Switch Cells

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

switch-table-cell.gif

Multi-Select Cells

You can do the Multiselect for Table Сells to edit values for all selected Cells 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

Cell Vertical Align

You can set the Vertical Alignment for the Table Cells.

table-valign.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 - Add Table - Add Row and Column - Add Elements - Add Button To Table Cell - Add IconTo Table Cell - Rows and Columns - Number of Rows and Columns - Move Rows and Columns - Resize Rows and Columns - Alternative Row Color - Table Header and Footer - First Column Style - Table Cells - Active Cell Style - Switching Cells - Cell Multi-Select - Cell Size - Buttons in Cells - Icons in Cells - Cell Vertical Align - Table in Mobile Views ## Table Overview You can use the Table Element to add tables to your websites. !table.png! ## Add Table You can add a Table from the Add Elements list on the Top Bar. !adding-table.png! ### Add Row and Column You can add Rows and Columns by right-clicking the Context Menu or clicking 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! ## Add Elements ### Add Button To Table Cell You can add a Button and Hyperlinks to Cells from the Context Toolbar. !add-button-table.png! ### Add Icon To Table Cell You can also add an Icon from the Context Toolbar to a Table Cell. !add-icon-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! ### Move 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! ### Resize 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! ### Alternative Row Color You can alternate Row by adding the Background Color for every second Row. !alt-row.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 the designs of the Column of the Table. !first-column.png! ## Table Cells ### Active Cell Style You can specify the Properties of the Active Cell. !table-active.png! ### Switch Cells You can switch between the Table Cells by pressing the Tab and Shift+Tab Keys. !switch-table-cell.gif! ### Multi-Select Cells You can do the Multiselect for Table Сells to edit values for all selected Cells 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! ### Cell Vertical Align You can set the Vertical Alignment for the Table Cells. !table-valign.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! ##