Tables

Table of Contents

In WordPress, you can create tables from scratch or import tables from external sources.

Note: You can find instructions for styling and formatting tables in the Style guide.

There are three table tools available:

  • Supsystic
    • Create a new table.
    • Import a table from Google Sheets that updates with sheet changes.
  • TablePress
    • Create a new table.
  • Elementor
    • Import a static table from Google Sheets.

With Supsystic, you can create a new table or import a table from Google Sheets.

Note: When you import a table from Google Sheets, any changes made to the Google Sheet will update the table in WordPress.

Create a new table

There are two steps to creating a new table:

  1. Clone a table.
  2. Edit the new table.

Clone a table

To clone a table:

  1. On the Dashboard, select Tables by Supsystic.
  2. In the table list, select the Clone this table table.
  3. On the Clone this table screen, select Clone.
  4. In the Clone Table dialog box, type the name of the new table, select Clone, and then select Open cloned table.

Edit a table

To edit a table:

  1. On the Dashboard, select Tables by Supsystic.
  2. In the table list, select the table you want to edit.
  3. On the table screen, complete one or more of the following steps:
    1. Select Editor, and then use the toolbar to make the necessary edits.

      Tip: You can copy a table elsewhere and paste it into the table.

    2. Select Settings, and then select either MainFeaturesAppearance, or Text to locate the setting you want to change.

      Note: The cloned table is already appropriately styled and formattted, so change settings carefully.

    3. Select CSS, and then type the CSS you want to add to the table.
  4. When you’ve finished editing, select Save.

Format a table

Supsystic tables provide limited formatting options—especially for cell content.

Supsystic table formatting options:

Add line breaks in a cell

There are two ways to add line breaks within a Supsystic table:

  • Enable Paragraph Mode.
  • Manually add line breaks using HTML.

Paragraph Mode

If you enable Paragraph Mode, you can add breaks within a cell with Command+Return (Mac) or Ctrl+Enter (Windows).

Note: If you cloned your table from the Clone this table table, then Paragraph Mode should already be enabled.

To enable Paragraph Mode in a table:

  1. When creating or editing a table, select Settings.
  2. In the Settings submenu, select Appearance.
  3. Under Appearance, select Paragraph Mode.
  4. Select Editor to return to editing your table.

To add a line break using Paragraph Mode:

  1. When adding or editing text in a cell, at the end of the line of text, press Command+Return (Mac) or Alt+Enter (Windows).
  2. Type your next line of text.

Inline HTML

You can use inline HTML to add line breaks and blank lines between two lines of text.

Note: If you want to add line breaks using inline HTML, make sure Paragraph Mode isn’t enabled.

To add a line break using HTML:

  1. When adding or editing text in a cell, at the end of the line of text, type <br> and then press Command+Return (Mac) or Alt+Enter (Windows).
  2. Type your next line of text.

    Example:
    First line of text.<br>
    Second line of text.

To add a blank line between two lines of text:

  1. When adding or editing text in a cell, at the end of the line of text, press Command+Return (Mac) or Alt+Enter (Windows).
  2. Type <br> and then press Command+Return (Mac) or Alt+Return (Windows).
  3. Type <br> and then press Command+Return (Mac) or Alt+Return (Windows).
  4. Type your next line of text.

    Example:
    First line of text.
    <br>
    <br>
    Second line of text.

Add a table to a post

To add a table to a post:

  1. On the Dashboard, select Tables by Supsystic.
  2. In the table list, select the table you want to add.
  3. At the top of the table screen, in the table dropdown, select Table Shortcode, and then copy the shortcode to the right.
  4. Navigate to hover over the post you want to add the table, and then select Edit (classic editor).
  5. On the post screen, paste the shortcode in the post content where you want to display the table, and then select Update.

    Note: If the table doesn’t display correctly, delete the shortcode, select Text to switch to the Text editor, and then paste the shortcode in the appropriate place.

Import a table from Google sheets

When you import a table from Google Sheets, the table will update based on changes made to the Google Sheet.

Note: Always check access and permissions to a Google Sheet before importing it.

To import a table from Google Sheets:

Important: You need to clone a table and set up the new table to have something to import the Google Sheets table to.

  1. On the Dashboard, select Tables by Supsystic.
  2. In the table list, select the Clone this table table.
  3. On the Clone this table screen, select Clone.
  4. In the Clone Table dialog box, type the name of the new table, select Clone, and then select Open cloned table.
  5. On the table screen, select Import.
  6. In the Import Data to the Table dialog box, complete the following steps:
    1. Under File Type, select Google Spreadsheets.
    2. Under Import Settings, in the Google Spreadsheet Url box, paste the Google Sheet’s sharable link.

      Note: The sharable link must be open to editing.

    3. Select any options you want to apply to the import.
    4. Select Import.

View the desktop, tablet, and mobile versions of a table

When creating a table you can see what it looks like on different devices.

To view different versions of a table:

  1. On the Dashboard, select Tables by Supsystic.
  2. In the table list, select the table you want to view.
  3. On the table screen, select the table version you want to view: DesktopTablet, or Mobile.

You can use TablePress to create tables in WordPress. TablePress is nice because of all of the features and options it provides. For instance, you have access to a decent text editor when editing text in a table cell. 

Important: The table styles are already set globally.

Create a table using TablePress

To create a table using TablePress:

  1. On the Dashboard, select TablePress > Add New Table.
  2. On the Add New tab, in the Table Name box, type the name of your table.

    Note: This title is for you to locate your table. The title doesn’t appear on your page or table.

  3. In the Number of Rows box, type the number of rows your table needs (including the header row).
  4. In the Number of Columns box, type the number of columns your table needs.
  5. Select Add Table.

Add content to a table

To add content to a table:

  1. In the Table Content section, select a cell, and then type or paste content.
  2. Repeat step 1 for every cell that needs content.

Manipulate a table or individual cells

To manipulate a table or individual cells:

Note: Below step 5, Figure 1 shows the option selections for a basic table with functionality allowing users to filter the table’s data.

  1. In the Table Manipulation section, select the option you want to use, and then select the cell you want to manipulate.

    Note: For the Selected rows and Selected columns options, you need to select the row or column before selecting the option. You will get a pop-up message if you do it in the incorrect order.

  2. To open a cell in a text editor, select Advanced Editor, and then, select the cell you want to open in the editor.
  3. In the Table Options section, select the options you want to apply to your table.
  4. In the Features of the DataTables JavaScript library section, select the options you want to apply to your table.

    Note: You must unselect Use the following features of the DataTable JavaScript library with this table if you want to use the Combine cells options in the Table Manipulation section.

  5. Select Save Changes.

Note: At the top of the screen, select Preview to view your table.


Figure 1: Basic TablePress option selections.

Add a table to a post

TablePress allows you to add a table to a post by:

  • Using the TablePress icon in the Classic Editor.
  • Pasting a shortcode in a post.

Add a table using the TablePress icon

To add a table using the TablePress icon:

  1. Open the post you want to add the table to in the Classic Editor.
  2. In your post content, put your cursor where you want to add the table.
  3. In the toolbar, select Insert a Table from TablePress .
  4. In the List of Tables < TablePress dialog box, navigate to the table you want to insert, and then select Insert Shortcode.
  5. Select Update to save your changes.

    Note: In the editor, you’ll only see the Shortcode. After saving your changes, open the post or select Preview Changes to preview the table.

Add a table to a post using a shortcode

To add a table to a post using a shortcode:

  1. In the Table Information section, copy the code in the Shortcode box.
  2. Navigate to the post you want to add the table to and paste the Shortcode in the post where you want it to appear.
  3. Select Update to save your changes.

    Note: In the editor, you’ll only see the Shortcode. After saving your changes, open the post or select Preview Changes to preview the table.

Edit an existing TablePress table

To edit an existing TablePress table:

  1. On the Dashboard, select TablePress > All Tables.
  2. On the All Tables tab, navigate to and hover over the title of your table, and then select Edit.
  3. Make the edits or changes you want to make, and then select Save Changes.

    Note: If you already have your post open, you’ll need to refresh the browser tab to see your changes take effect.

You need to complete four small processes to import data from Google Sheets into an Elementor table:

  1. Convert your Google Sheets data to a CSV file
  2. Edit your CSV file in a text editor
  3. Create a table for your data in Elementor
  4. Add data to your table

Convert your Google Sheets data to a CSV file

To convert your Google Sheets data to a CSV file:

  1. In Google Sheets, open or create a spreadsheet.
  2. On the Menu bar, select File > Download > Comma-separated values (.csv, current sheet). The CSV file appears in your Downloads folder.

Edit your CSV file in a text editor

To edit your CSV file in a text editor:

  1. On your Desktop, open Finder.
  2. In Finder, complete the following steps:
    1. Select Downloads.
    2. Navigate to the CSV file you downloaded, right-click the file name, and then select Open With > TextEdit.
  3. In TextEdit, press Command + F to open the Find and Replace dialog box.

    Note: You need to find all of the blank cells in your table, which will show up in the text editor as two commas in a row (no space in between), and add a space between the commas.

  4. In the Find and Replace dialog box, complete the following steps:
    1. In the Find search box, type ,, (comma + comma).
    2. Select Replace.
    3. In the Replace box, type , , (comma + space + comma).
    4. Select All.

      Note: Check to make sure there aren’t any single commas at the beginning or end of a row of text (most likely in header rows). If there are, repeat step 4 to find and replace the single commas with comma + space + comma.

  5. In the TextEdit menu, select File > Save.

    Note: Keep the TextEdit window open, because you will need the text in the next process.

Create a table for your data in Elementor

In WordPress, you can use Elementor to either create a table using a template that has already been styled or create a new table.

Create a table using a template

To create a table using a template:

  1. In WordPress, on the Dashboard, select Posts.
  2. On the Posts screen, navigate to and open the post you want to create the table in, and then select either Classic Editor or Block Editor.
  3. On the Edit Post screen, select Edit with Elementor.
  4. In Elementor, in the Drag widget here section at the bottom of your post content, select the Add Template icon .
  5. In the Library dialog box, complete the following steps:
    1. Select My Templates.
    2. Navigate to Table Template.
    3. Select Insert.
    4. In the Import Document Settings dialog box, select No.

Create a new table from scratch

To create a new table from scratch:

  1. In WordPress, on the Dashboard, select Posts.
  2. On the Posts screen, navigate to and open the post you want to create the table in, and then select either Classic Editor or Block Editor.
  3. On the Edit Post screen, select Edit with Elementor.
  4. In Elementor sidebar, complete the following steps:
    1. In the Search Widget box, type table.
    2. Select the Advanced Data Table widget and drag it to the Drag widget here section at the bottom of your post content.

Add data to your table

To add the CSV data to your table:

  1. On your post in Elementor, select anywhere in the table section you added.
  2. In the Edit Advanced Data Table sidebar, complete the following steps:
    1. Select Export/Import.
    2. Under Import, in the Paste CSV string box, copy and paste the text you edited in TextEdit.
    3. Select Import first row as Header.
    4. Select Import.

If your table doesn’t look right

If your table doesn’t look right in Elementor, view it in Preview.

To view your table in Preview:

  • In the bottom-left of the screen, select Preview Changes .

If your table doesn’t look right in Preview, it’s most likely due to missing blank cells or comma issues.

To fix table formatting issues:

  1. In Elementor, delete your table.
  2. Go to the table text in TextEdit, and then use the Find and Replace feature to complete one or more of the following steps:
    1. Locate the missing cell(s), and then type , , (comma + space + comma) to add the blank cell(s).

      Note: Sometimes, dollar signs ($) and quotation marks (“) can create a mess, so look for those if you’re still having formatting problems after addressing the comma issues.

  3. Repeat the Create a table using a template and Add data to your table sections.

Table of Contents