FROG EDUCATION
SOUTH AUSTRALIA
COMMUNITY

Table Widget

Back to All Guides

GET IN TOUCH

If you would like to get further information about Frog or help in getting it set up in your school please get in touch via the contact details below...

hello@frogeducation.com

Table Widget

The Table widget is a quick way of adding or importing tables into Frog to display on a page.

The aim of this guide is to introduce you to:

Table Widget

 

With the Table widget you can add an editable table to your Frog site page. 

When the Table widget is added to a page you will be asked to set the number of rows and column you require. This will generate a blank table within the widget. Each row and column can be resized, added to and removed.

Each table cell is controlled by the Rich text editor located in the edit panel. This can be used to format text, pictures and links added into a cell, as well as the cell's background colour.

 

table1.png

 

Generating a table

Drag and drop the Table widget into the Frog site page.

Enter the number of Rows and Columns for your table either directly into the fields or use the up & down arrows next to the field box.


Select Generate table.

A blank table will display on your site page.     

 

table2.png

 

Settings and options 

To trigger the Add row and Remove column icons, hover your mouse over the top or bottom border of the table. The Add row and Remove column icons will display. 

 

table3.png

 

To Remove row or Add column, hover your mouse over either the left or right border of the table. The Remove row and Add column icons will display. 

 

table4.png

 

Cell action menu

The Cell action menu displays when you hover your mouse over an internal cell border in the table.

Depending on whether you hover over a vertical or horizontal border, icons will display within the Cell action menu to:

  • Copy cell content to the cell above or below
  • Copy cell content to the cell on the right or left
  • Resize rows and columns
  • Insert an additional row or column.

Selecting the information icon will display popup window with a description of the other icons on the menu.

 

table5.png

 

Resizing rows and columns

The resizing of a whole row and/or column must be completed in Resize Mode. Select the Resize icon from the Cell action menu.

 

table6.png

 

The message You are in Resize mode! will display at the bottom of the table when resize mode is activated.

 

table7.png

 

To resize the height of a row or width of a column, hover your mouse over any of the cell borders within the required row or column. The cell border will highlight blue indicating it has been selected and the mouse cursor will change as shown below.

Drag the cell border to resize the row height or column width.

Select Leave resize mode once done.

 

table8.png

  
​​​​​Edit cell content

Select into a cell within the table to make that cell editable.

Editable cells will be highlighted by an inner border.

Content is typed directly into each cell and can be formatted using the Rich text editor within the edit panel as shown.

 

table9.png

 
Copying content between cells

Cell content can be copied into neighbouring cells using the Arrow icons within the Cell action menu as displayed to the right.

Hover over the cell border containing the content you want to copy to trigger the Cell action menu.

Select the required Copy ... arrow to copy the content to the neighbouring cell.

 

Importing tables​​​​​​​

Tables can be directly copied from Microsoft Excel or Word. Select on the Import table icon located within the edit panel. This will open the Import table window.

Copy your table from Word or Excel and paste it into Import table window.

Select Import.

 

Rich text editor

The Rich text editor will display in the Edit panel when you select within a cell in your table and make it active. The Rich text editor enables you to format the cell content.