How to Use TablePress With Elementor (Widget + Shortcode)

Key Takeaways

• TablePress works with Elementor in two ways: a widget named TablePress table that TablePress 3.4 adds to the Elementor panel, and the shortcode [table id=1 /] placed in the Shortcode widget.
• The TablePress table widget in Elementor has a Table dropdown and a Configuration parameters field, and it has no Style tab.
• TablePress turns on sorting, search and pagination for visitors by default, with 10 rows per page.
• Horizontal Scrolling is off by default in TablePress, so a five-column table overflows on a 390px phone until you tick it in the table’s settings.
• For a short table that should be edited and styled inside Elementor, a table widget such as Master Addons Dynamic Table is less work than TablePress.

TablePress and Elementor work together without any bridge plugin. You build the table in TablePress, then place it on an Elementor page with the TablePress table widget or with a shortcode. The table keeps its sorting, search and pagination.

This guide covers both methods, styling and the setting that fixes wide tables on phones. It also says when a plain table widget is the better choice. Everything here was tested with TablePress 3.4 and Elementor 4.3.

Step 1: Create or import the table in TablePress

The table itself is made outside Elementor, on the TablePress screens in the WordPress dashboard.

1. Install and activate TablePress from Plugins, Add New.
2. Open TablePress in the dashboard menu.
3. To type a table, click Add New, enter a name, set the number of rows and columns, and fill in the cells.
4. To bring in a spreadsheet, click Import, choose File Upload, select the file, keep Add as new table and click Import.
5. Note the table’s ID. The first table is ID 1.

TablePress imports Excel, CSV, HTML and JSON files. We imported a six-row CSV of shipping rates, and it arrived with the first row already set as the header.

Step 2: Add it with the TablePress table widget

TablePress registers its own Elementor widget, so this method needs no shortcode.

1. Edit your page with Elementor.
2. Search the widget panel for TablePress table.
3. Drag the widget into a container.
4. Open the Table dropdown and pick your table. Tables are listed by ID and name.
5. Publish the page.

The Advanced section under the dropdown holds one field, Configuration parameters. It accepts the same parameters you would put in a shortcode, for cases where one page should show the table with different options.

Or add it with a shortcode

The shortcode does the same job and works anywhere shortcodes do.

1. Drag Elementor’s Shortcode widget into a container.
2. Type [table id=1 /], replacing 1 with your table’s ID.
3. Click Apply to load the preview.

On our test page the widget and the shortcode printed the same table. Use the widget when you can, because picking from a dropdown avoids typos in the ID.

Sorting, search and pagination

These are switched on for every new table. You change them per table, in the box named Table Features for Site Visitors on the table’s edit screen.

For a table with six rows, search and pagination are clutter. Untick them and the table shows as a plain grid.

Styling a TablePress table in Elementor

The TablePress table widget has no table styling controls in Elementor, so the look is set in three other places.

• Table Options on the table’s edit screen: which rows are the header and footer, Alternating Row Colors, Row Hover Highlighting, and an Extra CSS Classes field.
• Custom CSS for colors, fonts and borders. TablePress gives every table a class based on its ID, so you can target one table.
• The widget’s Advanced tab in Elementor for margin, padding and width around the table.

A short CSS example that restyles the header of table 1:

.tablepress-id-1 thead th {
  background: #101223;
  color: #ffffff;
}
.tablepress-id-1 tbody td {
  padding: 12px 16px;
}

Paste it into Appearance, Customize, Additional CSS, or into any custom CSS box your setup has. Elementor Pro has one per element, and the Master Addons Custom CSS extension adds one as well.

Fix the table on phones

On a 390px wide phone our five-column table ran past the right edge of the screen, and the last column could not be read.

1. Edit the table in TablePress.
2. Under Table Features for Site Visitors, tick Horizontal Scrolling.
3. Click Save Changes and reload the page on your phone.

TablePress also sells a Responsive Tables feature in its Pro plan ($89 a year when we checked), with modes that stack or collapse rows on small screens. Other ways to handle wide tables are in our guide to responsive tables in Elementor.

When a table widget is the better choice

TablePress is built for data. For a small table that is really part of the page design, it adds steps: a second admin screen, CSS in another place, and a plugin to keep updated.

Only need a small table? The Dynamic Table widget builds it in the Elementor panel, with a Style tab and rows that stack on phones.

Dynamic Table has no sorting, search or import, so use TablePress for data and the widget for layout tables such as a timetable or a spec sheet. The other options are compared in our Elementor table plugins roundup.

Frequently asked questions

Final thoughts

TablePress and Elementor fit together well for data tables: import the file, drop in the TablePress table widget, and remember to turn on Horizontal Scrolling for phones. Styling takes a little CSS because the widget has no Style tab.

For short tables that should look like part of the page, Dynamic Table keeps the cells and the styling inside Elementor.

Related reading

• How to create a table in Elementor (4 ways)
• Best table of contents plugins for WordPress