Table Element

08/10/2019

With the Table Element, Avada gives you an easy to use interface to create tables, so you can display various kinds of content to your viewers. Choose from 2 styles, unlimited columns and a visual table interface that makes it easy and fun to create tables. Read below to discover more about this useful element.

Column 1 Column 2 Column 3
Item #1 Description Discount:
Item #2 Description Discount:
Item #3 Description Discount:
All Items Description Your Total:
Column 1 Column 2 Column 3
Item #1 Description Discount:
Item #2 Description Discount:
Item #3 Description Discount:
All Items Description Your Total:
View more examples!

How To Use The Table Element

The Table Element allows you to add customised tables anywhere on your site.

Step 1 – Create a new page or edit an existing one.

Step 2 – Add a container then select your desired column layout.

Step 3 – Click the ‘+ Element’ button to bring up the Elements window. Locate the ‘Table’ element and click it to add it to the column to bring up its options window.

Step 4 – Firstly, choose from table style 1 or 2. Be sure to visit the Element Demo Page to see what’s possible with this element.

Step 5 – Then, choose how many columns and rows you want your table to have. You can choose up to 25 for each.

Step 6 – This updates the table into the editor, directly below in the Table option editor. You can customize the headings and column content directly in the visual Editor, or if preferred, you can go into the Text Editor and work directly with the html. This is not particularly difficult.

Step 6 – Once you have completed customizing your table, click Save. You will be returned to the edit page. You can preview the page to view the table, and you can always edit the element again to make changes.

Read below for a detailed description of all element options.

Table Element Example 2

Element Options

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.

General Tab

  • Type – Select the table style. Choose from the two predefined table styles Style 1 and Style 2.

  • Number of Columns – Select how many columns to display. Choose from 1 – 25.

  • Number of Rows – Select how many rows to display. Choose from 1 – 25.

  • Table – Once you have selected your preferred number of columns, the Table markup will be displayed here.

  • Element Visibility – Allows you to control the column’s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.

  • CSS Class – Allows you to add a class for the column.

  • CSS ID – Allows you to add an ID for the column.

View The Options Screen

Extras Tab

  • Animation Type – Controls the column’s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, or Zoom.

  • Direction of Animation – Controls the direction of animation on the column. Choose between Top, Right, Bottom, Left, or Static.

  • Speed of Animation – Controls the speed of animation on the column. Choose between 0.1 to 1.

  • Offset of Animation – Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.

View The Options Screen

Global Options

There are no Global Elements for the Table Element.

Raw Element Parameters

Copy to Clipboard
  • fusion_table_type – Can be one of these values: 1, or 2. Sets the design style of the table.
  • fusion_table_rows – The number of rows to be in the table.

  • fusion_table_columns – The number of columns to be in the table.

  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • class – Add a custom class to the wrapping HTML element for further CSS customization.

  • id – Add a custom id to the wrapping HTML element for further CSS customization.
  • animation_type – Choose from none, bounce, fade, flash, rubberBand, shake, slide, or zoom. Sets the animation to use on the element.
  • animation_direction – Choose from down, right, left, up, or static. Sets the animation’s incoming direction.
  • animation_speed – Accepts a numerical value from .1 (fastest), to 1, (slowest).
  • animation_offset – Choose from default, top-into-view, top-mid-of-view, or bottom-in-view. Sets when the animation starts.
  • custom content – The actual table markup is created between the
    Copy to Clipboard
    tags.