Table Shortcode

Updated on September 11, 2017

The table shortcode is one of the Jupiter shortcodes that allows you to create a table with four columns. You can select one of two styles for your table.

In this article, we’ll explain how to configure the table shortcode.

To see the table shortcode in action, check out the demo page.


Displaying the Table Shortcode

To add the shortcode:

1Add a new page or edit an existing page.
2From the Visual Composer screen, click on the + button.

Table shortcode - visual composer screen

3In the Add Element pop-up screen, search for Table and click on it to be added to the page.

Table shortcode - add element

4When the shortcode is added, a new pop-up screen called Table Settings will open that allows you to configure the shortcode settings.

Table shortcode - Table settings

5Configure the settings as required. More settings are explained in the next sections.
SettingDescription

TitleAdds a title for the table.
6Click on Save Changes and publish or update the page to check the result.

Configuring the Table Settings

After you’ve added the table shortcode, a pop-up window will appear where you can configure the options. Below is a detailed description of each option for the table shortcode.

Creating a Table

To create a table you can either use the sample and enter the data you need, or you can create your own table.

Setting Description

Table HTML ContentAdd content to the table by editing a sample or create your own table via the HTML editor.

Table shortcode - table content

Configuring the Table Styling

There is only one setting to style the table.

SettingDescription

Style Sets the table style. Only two options are available: Style 1 and Style 2.

Configuring the Visibility for Devices

The Visibility For Devices field in the settings pop-up allows you to configure the visibility of the shortcode on different devices.

You can read the Configuring the visibility for devices article for further explanation.

Adding an Extra Class Name

The Extra Class Name field in the settings pop-up allows you to add an extra class name to the shortcode. It’s useful when you need to target the shortcode in a style sheet or JavaScript file.

You can read the Adding a custom CSS class to a shortcode article for any further explanation.

Did this answer your question?