CREATE A WEBSITE

How To Create Responsive Tables In WordPress – Short Course

By  | 

Most website-developers today love using WordPress when creating blogs/websites and this is mainly because WordPress features a visual post-editor with several functions but it actually lacks a function for creating tables. In fact, tables are very necessary when creating a website because tables allow for easy sorting and presentation of data. On the other hand, tables can be created manually by manually writing an HTML or CSS code within your posts but this article is intended to show you how to add responsive tables easily into your posts and pages.

Steps to follow when adding a responsive table to WordPress:

  1. Search for a plugin called “TablePress”: when it comes to adding responsive tables to your posts/pages, the first thing you will need to do is to search for a plugin called “TablePress“. So go-to Dashboard >> Plugins >> Add New and then search for the TablePress plugin as shown in the illustration below.
  2. Install and active “TablePress” plugin: after searching and finding the TablePress plugin, you will need to click on the “Install Now” button to get the plugin installed and afterwards click on the “Activate” button in order to activate TablePress plugin within WordPress as shown in the illustrations below.

Below is an illustration of where to press in order to activate the TablePress plugin:

  1. Locate the TablePress plugin under Dashboard: once you have activated the plugin, a TablePress menu-item will be added under your WordPress Dashboard as shown in the illustration below.

  1. Create a new table: you now have to click on the “Add New Table” tab in order to create a new-table. Afterwards, you will be directed to a new editing-page that will enable you give the table a name, description, choose the number of rows and columns. However, you will be capable of adding or removing any rows and columns from the table while entering data at a later stage. All in all, after filling all the required fields, you will now have to click on the “Add Table” button so that your new table can be saved as shown in the illustrations below:

 

  1. Editing the created table: after pressing on the “Add Table” button, you will be redirected to a table-editing section that enables you to manipulate or make several changes to your table. in fact, in this section you can insert links and images into the table, duplicate row/columns, hide or show selected rows and columns, delete rows/columns, access an Advanced-Editor, add rows/columns and a lot more. On top of that, there is even a “Table Options” section which enables you to select where to put the table-header and footer, change background-colors, show table name or description and a lot more. So, after setting-up your table you will now have to click on “Save Changes” in order to save and keep the created table. Below are some of the illustrations of the table-editing page;

 

Below is an illustration of your table filled with content. In fact, you will need to fill your table with content at this stage so that this data can appear in your posts/pages after inserting the table;

 

Below are other table-option that you will need to edit in order to make your table look great when inserted into your posts/pages.

  1. Add the table to your post/page: after editing and saving your table, you will need to create a new post/page or even open an existing-post and then enter the created table. So, you will need to locate a table-icon in the visual-editor of your post/page and when you press on the table-icon, a new window will pop-up showing the different created tables. afterwards, press on the “Insert Shortcode” button of any selected table and then the table-shortcode will be added to your post/page as shown in the illustrations below;

Below is an illustration of a new pop-up window that will appear after clicking on the table-icon within the post/page visual-editor. In fact, you will be able to search for any table using the integrated search-option and after click on the “Insert Shortcode” button of any chosen table within your table-list.

Below is an illustration of the inserted shortcode of your table into any give post/page.

 

  1. Manually adding the table-shortcode to your posts/pages: in case you don’t want to use the visual editor to insert table-shortcode, then consider manually inserting the table-short. So, you will need to access your Dashboard >> TablePress >> All Tables and then position the mouse over any selected table and after click on “Show shortcode“. This will actually open-up a new-window with a table shortcode and you will just need to copy that shortcode and paste it anywhere you want to insert a table within your posts/pages as shown in the illustrations below;

Below is an illustration of the pop-up window that will appear in order to enable you copy the table-shortcode and use it easily anywhere within your posts/pages;

 

  1. Previewing your active table: after adding the table-short anywhere within your post/page, you will now need to press on the “Publish” or “Update” button to save any changes within your post. however, you can first click on the “Preview” button in order to check-out how your table will look in your real posts/pages just before publishing your content as shown in the illustrations below;

Conclusion: with the TablePress plugin, you will be able to create and add tables into WordPress posts/pages easily without writing a single line of code. In fact, if you want to customize you table then there is option provided to help you do the editing. On the other hand, the TablePress plugin will even enable you to import data from different file-formats and Html-tables but you can also export all your tables in Html, CSV or JSON formats when using this plugin.

RELATED POSTS:

Vanilla Farmer, Amazon Retailer & Tech Researcher. Yosaki is my personal blog but I'm working on some big tech project back doors. I will keep on posting various topics on things I have knowledge about.

Leave a Reply

Your email address will not be published. Required fields are marked *