Table Shortcode

Last Updated on

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.

x
Note: To learn more about HTML tables, read this article.

In this article


Displaying the Table Shortcode

To add the shortcode:

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

Table shortcode - visual composer screen

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

Table shortcode - add element

4
When 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

5
Configure the settings as required. More settings are explained in the next sections.
SettingDescription
Title Adds a title for the table.
6
Click 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 Content Add 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.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket