Table of Contents
CREATE YOUR FIRST TABLE WITH TABLESOME
Tablesome makes creating tables in WordPress a breeze.
You can install and Activate the Tablesome plugin here.
It’s time to add your first table once you’ve installed and activated the Tablesome plugin.
Add a New Table
All you have to do is head to your WordPress dashboard. The ‘Tablesome’ menu would be found in the admin sidebar. Simply select that and choose the ‘Create New Table’ option from the drop-down menu.
Clicking on that will take you to our table builder page.
Now give a name to your table and start building your first table.
Initially you will see a simple table with a single row and single column.
With Tablesome, you don’t have to set the number of rows and columns at the start, instead you can add new rows and columns as you go!
Add Rows and Columns
Just hover your mouse near the rows and you will see + and – symbols to Add and delete rows. + symbol will allow you to add rows. You can add any number of rows you wish and – symbol will delete the rows that you have added. In the same way, you can create new columns by using the + symbol near the header.
This allows you to create news rows and columns anywhere on the table, even in between rows and columns.
To give a name for your column, just click the Column header. By default, it would have “Column Name” in it. You can give any name you wish as per your content.
If you click the column header, you will also see many options (as seen in the screenshot above) to configure your table columns. Let’s see those options one by one:
i) Format Type: Depending on the content type that you want to add in the table, you can choose the format type. We will see a more detailed explanation on these in the next section.
ii) Sort Ascending/Descending: When you are having a huge list of data, sorting will help you to analyse your data effectively. You can sort text and numerical data in ascending or descending.
iii) Insert Left: This will add a new column to the left of the column that you are currently in. This allows you to add a new column anywhere even in between the existing columns.
iv) Insert Right: This will add a new column to the right of the column that you are currently in.
v) Duplicate: You can also duplicate the previously created columns.
vi) Delete: Delete any column that you want.
You can also use some basic keyboard shortcuts for quick accessibility.
- To go to the right cell : ‘Tab’ Key.
- To go to the left cell : ‘Shift + Tab’ Key.
- To go to the cell below: ‘Enter’ Key.
- Create a new row from the Last row: ‘Enter’ Key.
Adding Content To Your Table
Once you have added the rows and columns, now it’s time to add contents to your table.
As of now, Tablesome allows 8 different format types (more will be added), which means you can add 8 different types of data to your table:
- Rich Text
Adding Text in the Table
By default, the table would be in “Text” format type. However, if you want to select it, just click the Column header. Mouse over the format type which would open a list of format types. Select “Text” format type in it.
You can add a text by just clicking the cell
Adding Text with Images (And more formatting options) in the Table
If you are looking for more formatting options for your content, you can use our Rich Text Format type. Say, you want to add an Image along with the Text in the table, then the “Rich Text” is your go-to option.
To use this, click the Column header, and change the format type to Rich Text.
This would give you multiple formatting options like adding a Bolded text, italics, underlined, adding an image, ordered, unordered list, alignment, etc..
To Add a text with an image in it
- Select the Rich Text format type.
- Add any text by just clicking the cell
- “Shift + Enter” will take you to the next line in the same cell.
- Now, select the image icon in the cell and upload the file.
Adding Numbers in the table
To add numbers in your table, just select the Number format type. Click the Column header, and change the format type to Number.
Adding Dates in the table
You can add date columns to your tables. It’ll be very helpful when you’re creating an events table with a date.
Just click the column header, mouse hover to the Format type and Select the Date type in it.
Adding Images in the table
You can insert images in the table and also add links to the images using our Image format type.
- Click the column header, mouse hover to the Format type and Select Image in it.
- Once the format type is changed, go to the cell where you want to add your image and just click the cell once.
- It would open a Popup that allows you to add an image and link.
- Click the + button that would open the WordPress media library. You can upload your images here and add them to the tables
- Below that, you will have an option to add a link for that image (optional). You can include a link for your images if you wish to. This makes it a clickable image, where users can select the image that would take them the URL you have pointed it to.
Adding EMail in the table
Tablesome allows you to add email data to table columns using the email format type. It tags the data with a “mailto” tag, allowing you to send emails with only one click.
Just click the column header, mouse hover to the Format type and Select the EMail type in it.
Adding Links in the table
You can add URLs in the table and also add links to the text using the “URL” format type.
- Click the column header, mouse hover to the Format type and Select URL in it.
- Once the format type is changed, go to the cell where you want to add your link and just click the cell once.
- It would open a popup with two options.
- In the “Add a Link” option, you can add the URL that you wish, and in the “Add a Text to the Link” you can add the text for the link.
No Follow/Open in New Tab/ Sponsored:
Once you have selected the URL format type, click the column header and you will see more advanced options for links like:
i) Link default text: You can add a Default Link Text once and it will be automatically added to all the clickable texts in the column
ii) No follow: You can select this option if you want your links to be a No follow link. This will add rel=”no follow” to your link.
iii) Open in New Tab: Selecting this will open your link in a new tab for users. Otherwise, it would open the link in the same tab for your users.
iv) Sponsored (Pro): You can add sponsored tags (rel=”sponsored”) to links in the PRO version. To identify links that are specifically the result of paid placement, utilize the sponsored tag.
Adding Buttons in the Table (PRO)
You can add call to action buttons to tables. Button columns come with options to change the button color and font color.
- Click the column header, mouse hover to the Format type and Select Button in it.
- Once the format type is changed, go to the cell where you want to add your button and just click the cell once.
- It would open a popup with two options. You can add button text and button link in it.
You can change the button text color, button background color and the default text of the button.
i) Button default text: You can add a Default Button Text once and it will be automatically added to all buttons in the column.
ii) Text Color: This would add the color for your button text.
iii) Background Color: This would add the color for your button background.
iv) No follow: You can select this option if you want your button links to be a No follow link. This will add rel=”no follow” to your link.
v) Open in New Tab: Selecting this will open your button link in a new tab for users. Otherwise, it would open in the same tab.
vi) Sponsored: You can add sponsored tags (rel=”sponsored”) to button links in the PRO. To identify links that are specifically the result of paid placement, utilize the sponsored tag.
This is how you add different content types to your table using our WordPress Tablesome plugin.
Publish Table In WordPress Post or Page
Once you have created the table and added all your contents in it, drag down and Click “Save Table”.(Make sure you’ve added a table name. You can save the table only when it has a name).
Now, it’s time to publish it in your WordPress post or page.
Once you have saved the table, a shortcode would be generated below the table title. Just Copy and paste this shortcode in any page or post to display the Table.
- Just click the “Copy Shortcode” that appears on the right of the shortcode.
- Go to any page or post and paste this shortcode.
- That’s it. Now your table would be displayed on the front-end.
I hope this tutorial assisted you in creating your first WordPress table and publishing it on any WordPress post or page.
TABLE SHORTCODE BUILDER
Tablesome comes with a Shortcode builder to customize table options for each table. Instead of manually entering the shortcodes, you can just use our shortcode builder that would bring in the shortcodes automatically.
It allows you to apply custom settings such as:
- Hide unnecessary columns in the frontend
- Change the pagination limit, and
- Enable/disable sorting and filtering
Shortcode Builder in Classic Editor
If you are using Classic Editor, Go to any page or post and you will see an option called “Add Tablesome Shortcode” in the top bar above the content editor near the “Add Media” button.
Once you select that button, it will open a popup with various options listed below:
- Enter the Tablesome Table ID : Enter the ID of the table that you want to display. You can find the Table ID by going to Tablesome -> All Tables. You will see the list of all tables that you created, In the Shortcode column, you can find the ID of each table. Just copy that ID and use it in the shortcode builder.
- Search: If you want your users to search the content in the table, you can enable this. The datatable search is fast and accurate and can also find special characters
- Hide Table Header: If you want to display tables without headers, you can switch off this setting. Note: Table sorting will not work for tables without headers.
- Sorting: If you want to allow your user to sort the table in ascending/descending format, you can enable this option.
- Filters: Tablesome gives you advanced filtering options to create filterable tables. You can quickly filter the relevant information using the table filter, especially when you have a large table with thousands of table records
- Number of Records per Page: You can choose the number of records that you want to display per page. Value should between 1-100
- Exclude Columns: This option will allow you to hide unnecessary columns in the front-end. Once you have entered the table ID in the first text box, this option would bring all the columns of that table. You can choose to hide any number of columns that you wish to hide.
Once done, select the “Insert Shortcode” option below. This will bring the shortcode according to your enabled options.
You can publish this shortcode in any post/post where you want to display this table.
Shortcode Builder in Gutenberg Block
Gutenberg block editor users can make use of this shortcode builder using the block named “Add Tablesome Shortcode”.
In the Add new block section, search for Tablesome and you will find the block named “Add Tablesome Shortcode”. Inside that, click the “Add Tablesome Shortcode” button which will open all the options that we have discussed in the previous section.