EDITS.WS

Tag: tablepress

  • Divi Product Highlight: TablePress Styler

    TablePress Styler is a third-party plugin for Divi that adds lots of styling options to TablePress, a popular table-making plugin for WordPress. TablePress Styler not only gives you styling options but also makes TablePress easier to use with Divi. In this post, we’ll look at TablePress Styler to see how it works with TablePress to help you decide if it’s the right product for your needs.

    Create TablePress Table for TablePress Styler

    First, you’ll need to create the tables that you’ll use with TablePress Styler. TablePress Styler doesn’t create tables. Instead, it styles tables that were created in TablePress. It requires the TablePress plugin and works as a Divi addon to TablePress. Once you’ve made your tables in TablePress, use TablePress Styler to customize the styles of those tables with the Divi Builder.

    In this example, I’ve created a sample table using labels from the free Email Marketing Layout Pack.

    Create TablePress Table for TablePress Styler

    I’ll use the styles from the landing page of that layout pack to create my examples.

    Create TablePress Table for TablePress Styler

    TablePress Styler Divi Module

    TablePress Styler adds a new module to the Divi Builder. Normally, tables in TablePress are added with shortcodes. With TablePress Styler, you won’t need to add the table separately. This module adds it for you. This makes the tables easier to use with the Divi Builder.

    TablePress Styler Divi Module

    The first option in the TablePress Styler settings includes a dropdown box where you can select your table. Opening the dropdown box shows all the tables you’ve created in TablePress. Select the table you want to display.

    TablePress Styler Divi Module

    The table displays exactly the way you created it in the TablePress editor.

    Table ID

    Table ID

    You have full control over the design of the table. You can make design adjustments without having to go back to the TablePress editor. Adjust the setup, elements, columns, rows, parameters, buttons, and more. Some of the settings require TablePress Pro (or Max) or a TablePress extension. We’ll look at the features that work with the free version of TablePress.

    Table ID

    Setup

    Setup adjusts the headers, footer, and row header. You can enable or disable them in any combination. You can also enable sorting and scrolling. I’ve enabled all of them in this example. I’ll leave them enabled throughout these examples to show the module’s options.

    Setup

    Elements

    Elements let you move or disable the table name and description. You can also enable search, information, pagination, and a selector. If you enable pagination, you can specify the number of entries to show on each page. The header and footer are not counted in the number of entries. I’ve enabled them all in this example, changed pagination to 2, and moved the name below the table and the description above the table.

    Elements

    Columns

    Columns let you set the width of each column. Specify the width in pixels, percentages, etc. You can also specify columns to hide or show. I’ve hidden rows 2 and 5 in this example. I’ve moved the title back to the top and left the description in its new location under the title.

    Columns

    Rows

    Rows let you specify which rows you’d like to show or hide. I’ve hidden row 3 in this example.

    Rows

    TablePress Pro Options

    In the TablePress Styler plugin, Parameters is an advanced feature that requires knowledge of table parameters. The features that require TablePress Pro (or Max) include buttons, responsive tables, counter columns, fixed rows, fixed columns, row order, row filtering, column filtering, and column filter dropdowns. Auto URL conversion requires the TablePress Automatic URL Conversion extension.

    TablePress Pro Options

    TablePress Styler Design Settings

    Every element includes independent design settings, allowing you to customize the TablePress tables with the Divi Builder. I’ll customize the table using design queues from the layout pack.

    TablePress Styler Design Settings

    TablePress Styler Name

    Aside from header levels, the table name settings include all of the standard text settings. In this example, I’ve changed the font, font weight, color, and size. It now matches the H2 settings used in this layout pack.

    TablePress Styler Name

    TablePress Styler Description

    The description includes the same options as the name text. In the example below, I’ve styled the description to match the blurbs in the row above the table. I’ve changed the font, weight, and color.

    TablePress Styler Description

    TablePress Styler Elements

    Elements also include the standard font options. I’ve adjusted the font, weight, and color for this example. The search, pagination, and similar text now match the secondary headings from the layout pack.

    TablePress Styler Elements

    Spacing

    Spacing allows you to adjust the gaps of all the elements including the name, description, search, information, pagination, and pagination selector. I’ve adjusted all of the settings in this example to spread the text apart a little further.

    Spacing

    Cells

    Cells let you change the horizontal and vertical alignment, padding, and background color of the cells. I’ve added padding and changed the background color to black. This background color will be easier to read once I change the font colors.

    Cells

    Text

    The text settings control the text within the cells. I’ve made the text style match the description text.

    Text

    Header

    The header settings include the background and font settings. I’ve adjusted the background color, font color, and text alignment in this example.

    Header

    Footer

    The footer settings follow the header settings and include the background and font colors. I’ve adjusted the background color, font color, and alignment in this example.

    Footer

    Row Header

    The row header also includes the settings for the background and font colors, alignment, etc. I’ve adjusted the background color and font color in this example.

    Row Header

    Icons

    You can also add icons to your table. Add them to the cells in the TablePress editor. The TablePress Styler sales page includes a link to the icons you can use and includes the shortcodes for each icon.

    Icons

    Select the icons and adjust their sizes and colors within the TablePress Styler Module. I’ve increased the size of the icons and changed their color to black.

    Icon settings

    Buttons

    Add buttons to the TablePress cells with the button shortcode. You can also add a custom link to the shortcode. I’ve added them to the footer in my example.

    Buttons

    Once you have buttons in your table, you can customize them with the module’s button settings. Adjust the background, text, border colors, border radius, padding, margin, shadow, and lots more. I’ve adjusted most of these settings in the example.

    Button styling

    Colors

    Colors let you adjust the color or tint of the alternating rows. You can also disable the alternating color if you want all the rows to show the same color. Adjust the options of the row, hover, and sorting separately. This example shows the tint options. I’ve adjusted the tint for the alternating rows.

    Table Colors

    For colors, you can have them multiply or not. If you choose to use multiply, as seen in the example below, to create grey backgrounds, the colors blend.

    TablePress color multiply

    Borders

    Borders let you specify horizontal and vertical borders, choose inner or outer borders, and adjust the width, color, and style. This example shows all borders disabled for both horizontal and vertical.

    Borders

    The example below includes an inner vertical border. I’ve disabled the horizontal border. I’ve also increased the width, changed the color to white, and selected Groove for the style. This creates a set of cards that could be used for pricing tables, stats, etc.

    Border styles

    TablePress Styler Design Results

    Here’s how the table looks within the Divi layout. This is only a small portion of the layout to keep the image smaller. I was able to get the styles I wanted with no trouble. Everything was intuitive. It works well with both TablePress and Divi.

    TablePress design example

    As an added bonus, here are a couple more styling examples based on Divi Layout Packs. The first one is styled to match the Attorney Layout Pack for Divi:

    Attorney Layout Pack for Divi

    Finally, here is an example of a table made to look like an event list using the Music Venue Layout Pack for Divi.

    Music Venue TablePress example

    Where to Purchase TablePress Styler

    TablePress Styler is available in the Divi Marketplace for $39. It includes unlimited usage, one year of support and updates, and a 30-day money-back guarantee.

    Ending Thoughts on TablePress Styler

    That’s our look at TablePress Styler for TablePress and Divi. TablePress Styler works well to bring all three together. The design settings give you lots of control over the table designs and customizations. All of the settings are as intuitive as any Divi Module. If you use TablePress and Divi, TablePress Styler is a must-own plugin for your Divi toolbox.

    We want to hear from you. Have you tried TablePress Styler? Let us know what you think about it in the comments.

    The post Divi Product Highlight: TablePress Styler appeared first on Elegant Themes Blog.

  • How to Add Tables in WordPress Posts and Pages (No HTML Required)

    Do you want to add tables to WordPress posts and pages?

    Tables are a great way to display data in an understandable format. WordPress offers easy ways to content inside tables with some formatting and design options.

    In this article, we will show you how to create tables in WordPress posts and pages without using a plugin or any HTML code. We will also cover how to create advanced tables in WordPress with sorting and search features.

    Adding tables in WordPress without writing code

    Video Tutorial

    If you prefer written instructions, then just keep reading.

    Creating Tables in the WordPress Block Editor

    WordPress makes it super easy to add tables using the default WordPress block editor.

    Simply create a new post or page, or edit an existing one. Once inside the content editor, click the ‘+’ symbol to add a new block, then select the Table block.

    You can find it under the ‘Text’ section, or you can type ‘Table’ into the search bar.

    Add table block

    Next, you will be prompted to choose how many columns and rows you want for your table. Both figures default to 2.

    Don’t worry if you are not 100% sure about the exact number because you can always add/remove table columns and rows later.

    Table columns and rows

    Simply enter the number of rows and columns and click the ‘Create Table’ button.

    The block will then generate your table and display it on the screen.

    Table preview

    You can type in the table cells, and they will automatically resize depending on how much content is in each one.

    You can set this option on the right side if you prefer your cells to be fixed-width. Here, you can also add a table header or footer section.

    Table options panel

    From the settings panel, you can also switch to the Style tab.

    Your WordPress theme may offer a bunch of styles for the table block, or you can choose the background and text colors.

    Table style and colors

    If you want to add a new row or column, just click on a cell at the point in the table where you want to add it. Next, click the ‘Edit Table’ button.

    This will show a bunch of options to add or remove rows and columns to your table.

    Add or remove table rows and columns

    By default, the text in your table’s columns is aligned to the left.

    You can change this by clicking inside a column and then clicking the ‘Change Column Alignment’ button:

    Align table columns

    You can also change the alignment of your whole table within the post or page.

    Just click the ‘Change alignment’ button and select an option from the list.

    Table alignment

    Note that these options can make your table display beyond the normal boundaries of your post area.

    Some may look odd on your WordPress website, so please preview your post or page to check how the table will appear.

    Here’s our table set to ‘Wide Width’ as it appears on our demo site:

    Table live preview

    As you can see, it stretches out beyond the left and right margins of the post area.

    The table tools built into the Gutenberg editor give you a lot of flexibility over how you can display your tables. You can use the Table block to show your data to readers in an easy-to-understand format.

    However, the block doesn’t have advanced features like search filtering, custom sorting, and more. It also doesn’t let you efficiently use the same table across multiple areas of your website, such as sidebar widgets or other pages.

    To create advanced tables, you will need to use a WordPress table plugin.

    Creating Tables Using the TablePress Plugin

    TablePress is one of the best WordPress tables plugins on the market. It is a free plugin and allows you to create and manage tables easily. Plus, you can edit your table separately and even add a large number of rows.

    TablePress also becomes necessary if you are using the older classic WordPress editor, which does not come with table functionality.

    First, you need to install and activate the TablePress plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

    You will then see a TablePress menu item in your WordPress dashboard. Go to TablePress » Add New to create a new table.

    Tablepress add new

    You need to type in a name for your table and decide how many rows and columns you want. You can always add/remove table rows and columns later as well.

    Once you have added the table name, rows, and columns, go ahead and click the ‘Add Table’ button to create your table.

    Next, you will see a screen with your table’s information and an area where you can add content.

    TablePress Edit Table

    Simply type the data you want into the cells of your table.

    To add or remove rows and columns or perform sorting operations, simply right-click inside the table. This will show an options menu where you can make more changes.

    Right click table options

    There are advanced options below the ‘Table Content’ area, such as ‘Table Manipulation’.

    From here, you can do things like adding, removing, and duplicating rows.

    Table manipulation options

    In ‘Table Options’, you can add a header and/or footer row, which won’t be sorted in with the data.

    You can also decide where to show the table name and description:

    Advanced table options

    Finally, you can set various options in the ‘Table Features for Site Visitors’ section.

    These settings allow you to create responsive tables that can be filtered, searched, and sorted by your readers.

    Table features site visitors

    Once you are happy with your table, just click ‘Save Changes’.

    After that, copy the Table shortcode. You will need it in the next step.

    Now, edit the post or page where you want to display the table and add the Shortcode block to the editor.

    Add shortcode

    After that, add the shortcode you copied earlier into the Shortcode block.

    Don’t forget to update or save your changes.

    On the other hand, if you are using the classic editor, then simply add the shortcode straight into your post:

    Shortcode in classic editor

    If you want to change your table in the future, you can return to TablePress in your dashboard and make changes. Your table will be automatically updated in any posts and pages you have used it in.

    TablePress also allows you to import data from spreadsheets and CSV files. Similarly, you can also export TablePress table data to a CSV file, which you can then open with any spreadsheet program like Microsoft Excel or Google Sheets.

    We hope this article helped you learn how to add tables in WordPress posts and pages without using HTML. You might also like our guide on how to create a table of contents in WordPress and our expert picks for the best WordPress table plugins.

    If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

    The post How to Add Tables in WordPress Posts and Pages (No HTML Required) first appeared on WPBeginner.