Table Element

Last Update: March 30, 2024

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, and watch the video for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.

How To Use The Table Element

The Table Element allows you to add customised tables anywhere on your site. To start, add the element into your desired column.

Firstly, choose from table style 1 or 2. Be sure to visit the Element Demo Page to see what’s possible with this element. Then, choose how many columns and rows you want your table to have. You can choose up to 25 for each.

This updates the table in place. You can then 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. Read below for a description of all element options.

Table Element

How To Edit An Existing Table

If you have an existing table that you want to edit, you can simply return to the Element and change the number of rows and columns using the Number of Rows and Number of Columns sliders. With these Element Controls, it’s very easy to change your number of columns and rows and then edit the content in the editor.

If you want to understand how to edit in text view however, it’s also very easy. If you look at the table code below, you can see in the Table Body section that each Table Row has its own section (between the tr and / tr HTML tags).

To create a new row, you would simply copy a Table Row section, and paste it in below itself, as seen below. Then you could manually edit each of the Table Data (td) lines. To add a new Column, you would have to add a new Table Header line for the Title of the new column, and add a new Table Data line in each Table Row. Generally though, it’s much easier just to use the visual editor and the element controls.

Editing A Table In Text View

Element Options

General

HeadingDescription
TypeSelect the table style.
Number of RowsSelect how many rows to display.
Number of ColumnsSelect how many columns to display.
TableTable content will appear here.
MarginEnter values including any valid CSS unit, ex: 4%.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Extras

HeadingDescription
Animation TypeSelect the type of animation to use on the element.
Direction of AnimationSelect the incoming direction for the animation.
Animation ColorSelect the color of the animation
Speed of AnimationType in speed of animation in seconds (0.1 - 5).
Animation DelaySelect the delay time after the animation starts(0 - 5).
Offset of AnimationControls when the animation should start.