WordPress Table Creation and Customization Guide with FlexTable

Step 1: Creating a New Table #

1. Open FlexTable dashboard.
2. Go to your Google Sheet and copy the browser URL that contains the GID parameter.
3. Paste the copied URL into the required field.

• Click “Create New Table” to generate your table .

Step 2: Enabling the Link Import Feature #

1. Go to the “Table Customization” tab.
2. Select the “Utility” tab.
3. Check the box labeled “Import links from sheet” to enable the feature.
4. This feature retrieves all embedded data from the “Links” column.
5. Click “Fetch & Save” to update the table with the imported links.

Troubleshooting: If Links Are Not Imported #

• Navigate to the “Settings” page.
• Under the “General” tab, locate “Activate the Link Support Mechanism”.
• Set it to “With Smart Link” and click “Save”.
• Refresh the table to import the links successfully.

Step 3: Customizing the Table #

1. Use the Table Theme settings to adjust the appearance as per your preferences.
2. Once satisfied with the design, copy the generated shortcode.
3. Paste the shortcode into the page where you want the table to appear.
4. Visit the page to preview your fully customized table.

Step 4: Adding the Table to Your Page #

1. Copy the shortcode of your table.
2. Navigate to the page where you want to display the table.
3. Paste the shortcode into the content editor.
4. Click Save or Update the page.
5. Visit the page to see your fully functional table in action.

Step 5: Styling Links as Buttons #

To improve the table’s visual appeal, you can convert the links into buttons.

Identifying the Link Class #

1. Open the table page.
2. Press CTRL + Shift + I (or right-click and select “Inspect”) to open Developer Tools.
3. In the Elements panel, locate the class for the link column data.
4. The class should be .cell_div a.swptls-table-link.
5. Go to Settings > Custom CSS and add custom CSS for your table ID.

Applying Custom Button Styles #

To style the links as buttons for a specific table, use the following CSS:

.gswpts_table_15 .gswpts_tables .cell_div a.swptls-table-link {

    background: #ef4a44;

    color: #fff;

    padding: 13px 29px;

    line-height: 17px;

    font-size: 14px;

    font-weight: 700;

    border-radius: 4px;

    letter-spacing: 2px;

}

Example CSS (replace “15” with your actual table ID)

Global Styling for All Tables #

If you want the button style applied to all tables, remove the table ID:

.gswpts_tables .cell_div a.swptls-table-link {

    background: #59658b;

    color: #fff;

    padding: 12px 26px;

    line-height: 17px;

    font-size: 14px;

    font-weight: 700;

    border-radius: 4px;

    letter-spacing: 2px;

    text-decoration: none;

}

Adding Hover Effects #

To add a hover effect to the button:

.gswpts_tables .cell_div a.swptls-table-link:hover {

    background: #0e6ace;

}

Step 6: Saving Custom Styles #

1. Copy the desired CSS styles.
2. Navigate to Settings > Custom CSS tab.
3. Paste the CSS and replace .gswpts_table_15 with the actual table ID (e.g., TB_1).
4. Click “Save Settings”.
5. Refresh your page to view the changes.

Conclusion #

Your table now features beautifully styled button links! 🎉
Enjoy customizing and enhancing its appearance to fit your needs.