Recently one of our visitors asked us how to insert a table in WordPress?
This is a feature that does not exist by default on WordPress, however our publications are not primarily composed of titles and paragraphs. Some blogs also use tables for various reasons. The problem as usual is that it is very often difficult to know which plugins to use.
To respond to a concern of one of our subscribers, I will show you in this tutorial how to add nice tables on your WordPress website thanks to the plugin TablePress.
If you do not understand a point on this tutorial, our Feedback Form is available.
Are you ready ? Let's go !
But before, if you have never installed WordPress discover How to install a WordPress blog in 7 steps et How to search, install and activate a WordPress theme on your blog
Then back to why we are here.
Installation and Configuration Plugin tablePress
Indeed, we will use the Plugin TablePress, which is well known by the way, for adding tables to WordPress posts and pages. I invite you to install it from your dashboard. You can also download it as a zip file and install it from your FTP.
Once it's done, you'll notice that a new menu is available on the left sidebar of your dashboard. Especially when it comes to configurations, you don't have to do much.
However, you can customize the overall design of the table by adding CSS code to it and defining the location of the menu « tablePress » on the left side menu of the dashboard.
How to add a new table on your blog
On the menu TablePress ", click on " Add a picture ». On the new page, you must give a name to your table, a description (optional), but especially define the number of rows and columns. Once done, click on " Add a picture ».
After adding your table, go to the edit page. On this page you will be able to modify the name and Description of the Board (until then nothing special), But also and above all, you can manipulate the table, in particular by adding text in the fields of each column.
Other additional options are available, which allow you to:
- Add an image
- Add a link
- Access the advanced code editor (HTML developer only)
- To hide or show a line
- Duplicate, insert or delete a line
- Add new empty lines
These different options apply to lines (to the left) and to the columns (to the right).
Also create price lists on your blog or website with these 8 premium WordPress plugins
The section " Table options Gives you the ability to define certain options such as to define " the first line of the table As the heading and that of defining " the last line of the table As low. You can also define other visibility options and add CSS code to them.
To make your table dynamic, you can activate the option " DataTables From the section Contents the DataTables JavaScript Library ». By default, this feature is enabled, and gives you the option to enable some other features like sorting, paging, and more.
Discover How to add a parallax effect on any WordPress theme
Once you have finished modifying your table, do not forget to save your modifications by clicking on " Save changes ».
See also How to rearrange WordPress articles into 2 methods
At the bottom of the page you will see 3 other buttons that allow you to:
- Copy table : i.e. create a new table taking inspiration from the currently modified one
- Export Table: this functionality allows to use the information of a table on another installation of " TablePress You can also make use of this feature to make backups of your table.
- Delete table : this feature is we can not anymore clear, this is the deletion of a table being edited.
How to administer the tables on your website
All the tables you create are available on the " TablePress >> All the tables ». From this location, you can perform grouped actions, including copy, delete or export tables. If you'd rather perform these actions on a particular board, hover over it and you'll see its options.
It is also from this location that you can retrieve the shortcode of the table, which you will add in an article or a page of your choice.
Make your blog popular with these 10 WordPress plugins to share your articles on social networks
No need to tell you that to make changes to a table, you must click on the name of the table.
How to import a table
TablePress gives you the possibility to export and import tables either on the same installation of WordPress, Or elsewhere. Still, you will need to access the location " TablePress >> Import a table ».
From there, you can determine the source of the table (File, Url, Public chat the server, manual entry).
How to add a table to an article or page
From the home page of Pluginyou can recover the shortcode, as I said earlier, by clicking on the link "Show the shortcut".
Copy this code and add it to the post or page visual editor.
Once that's done, publish the article (or page) and check out-the. Your pretty picture is in line with all its rows and columns (this is what I was able to achieve at home with the theme of the week).
Discover also some premium WordPress plugins
You can use other WordPress plugins to give a modern appearance and to optimize the handling of your blog or website.
We offer you here some premium WordPress plugins that will help you do that.
1. WordPress Ultimate Redirect
The "WordPress Ultimate Redirect" plugin is the one and only solution you need to manage all your redirects, 404s, site migration and / or domain change or transfer needs.
There are plugins that do what the plugin does, but not all at the same time. This plugin provides all the usual 404 redirect functionality, plus our favorite "auto-redirect to closest URL match".
Download | Demo | Web hosting
2. Bookly Custom Fields
It is important to note that this WordPress Plugin is an add-on that requires the WordPress Plugin Bookly to operate. By default, customers or visitors are usually used to filling in several fields such as name, phone number and email address before confirming a reservation.
But with this WordPress Plugin, you can ask them to fill in more fields, finally to obtain more details or any other type of information. These new fields will appear in the Upload step of the booking process, and the booking details will be added to your Bookly calendar.
Its features are, among others: the ability to create as many fields as needed, support for different types of fields, the ability to make certain fields mandatory or optional for filling, detailed documentation and much more.
Download | Demo | Web hosting
3. Elegant Tabs for Beaver Builder
Through this plugin, you can add any shortcode in multiple tabs so that users can choose which data they want to see.
As features we find: the ppossibility to customize (colors, icons, backgrounds for different sections / tabs), the iintegration of WYSIWYG, the possibility of selecting an icon for each tab from the font library available in Beaver Builder, atab alignment (10 different tab styles and plenty of variations for easy customization
Download | Demo | Web hosting
Recommended Resources
Find out about other recommended resources to help you build and manage your website.
- When and how to install WordPress in a subdirectory
- How to fix "Unable to write to disk" error on WordPress
- How to publish your articles by email on WordPress
- How to hide unnecessary items on the WordPress dashboard
Conclusion
Here! That's all for this tutorial dedicated to creating and adding a table on the pages or articles of your WordPress website thanks to TablePress. Hope you found it useful. Do not hesitate to share with your friends on your favorite social networks.
However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation.
And if you have any suggestions or remarks, leave them in our section Comments.
...
you have to insert the formulas to get the answers in the table ?????????????
No, you don't really need it.
Hello,
I can't find a Plugin that allows me to modify the values of a spreadsheet directly on the site (on a private page), but not by necessarily having to go to the Dashboard and then to the plugin.
The thank you box
Hello,
Look for a plugin that offers the Frontend option and you won't need to do that on the dashboard anymore.
Thank you so much! I did not know the term ...
On the other hand, I cannot find a free one, the FrontEnd option is always for the “Pro” versions ...
Remember and thank you for the speed of your answer.
Indeed if I click on one of your links (for example the 1st concerning the catalog) I arrive on a blank page with the mention "Sorry, no posts matched your criteria. "
But if on this same page I click on "HOME" (where everything is normal) and I come back to "CATALOG": this one appears quite normally and very quickly (I use Firefox).
On the other hand, by trying the search with Internet Explorer: BIG SURPRISE: total change of style… .. all in length, deformation of the layout, slowness in the display !!!!!
Can you explain to me the reason for these display differences?
Then, can you tell me as clearly as possible (I remind you of my inexperience with a website) how to rectify the errors you raise? and moreover, how did you detect them ????
Do you also want me to mail you the PDF documents (screenshots) that I offered to you and how can I send them?
I know, that's a lot of questions and a lot of time for one man, and I would be so very grateful if you could continue to help me in this mess.
In the meantime, again thank you and long life to this site really great!
Good morning or good evening,
Sorry for the super late response. I've been pretty busy all day, but I'll take the trouble to answer you.
- By clicking on the first link, you are supposed to access a javascript file whose content should not be readable for you. If instead, you access a page not found on your blog, then the javascript resource used by your theme (or plugin) cannot be found and therefore, the functionality that this resource is supposed to provide will not work. In your case 4 files are missing.
- The style change varies from one browser to another. If you are using FireFox and Chrome (especially the latest versions), the layout will probably be the same. Regarding Internet Explorer, the display is for the most part shifted, because this browser does not respect the standards that others do (on the other hand the Microsoft Edge browser is an improved version of Internet Explorer).
To resolve your concerns more quickly (given your experience), I invite you to request a diagnosis from your blog (it's free). At the end of this, you will be told what is missing and what to do. We may also implement certain measures which will prevent you from having to encounter this type of problem in the future.
Please contact our customer service.
https://blogpascher.com
Hello and congratulations for your tutorial.
After the departure of our "webmaster", I was appointed "IT manager" - although I am a novice in site management - and I wanted to replace a table (representing a catalog with author names, titles ...) by the new updated catalog.
I wanted to do the replacement with a "TablePress" table.
Everything went well except that the "sort" function does not work while in the "Content of the JavaScript DataTables library" EVERYTHING is checked and in particular the one concerning "sorting".
Can you tell me why? And how to solve my problem?
You can see this phenomenon by going to the site “www.bs-limoges.fr” (or “Bibliothèque Sonore de Limoges”) on the “CATALOG” page.
In advance, thank you for kindly helping me and wish you a good day.
Hello,
to help you solve your problem, can you send a capture? If it is also possible to have the link that leads to your page, then that will be a plus.
Goods.
Hello and thank you for taking my case into consideration, and especially as fast.
I took several screenshots and saved them as PDF with my comments, but how do I send them?
Can I send them as attachments in a personal message and in this case can I have an email address?
Or if not, how do you post them through this site? I tried a "copy and paste" without success… ..
As for the link that leads to my page, apart from the address: "www.bs-limoges.fr", you land directly on the page concerned with the following link:
"Http://bs-limoges.fr/catalogue/"
Thank you for your very welcome help.
Good day to you.
Hello,
After reviewing your site, I realized:
1 - There is a JavaScript error at the start of the page, because some resources are missing:
http://bs-limoges.fr/wp-content/themes/bsl/scripts/Catalog.js
http://bs-limoges.fr/wp-content/themes/bsl/scripts/Map.js
http://bs-limoges.fr/wp-content/themes/bsl/scripts/Catalog.js
http://bs-limoges.fr/wp-content/themes/bsl/scripts/Anim.js
http://bs-limoges.fr/wp-content/themes/bsl/scripts/Map.js
2 - Your table is really very long. It is rowing on my browser. You need to embed pages for the table.
You need to resolve these missing resource issues so that the array can run normally.
Hello again,
not having any more news following my answer yesterday, I realize that this one does not appear on the site. Another computer mystery for me!
So, I put it down today.
I asked you how you had access to the addresses you give me (http://bs-limoges.fr/wp-content/themes/bsl/scripts/….) And which ends up on a page where the sentence appears: “Sorry, no posts matched your criteria” ????????
Because me, when I type the address of my site, I end up on the home page and by clicking on a page (for example: "CATALOG") I am on my normal page (with my catalog) ??? And it's the same for all the pages that you quote to me: another mystery!
The catalog opens very quickly, contrary to what you are telling me.
I am working with Firefox, but I have checked with Internet Explorer and it is also fast.
So I really do not understand.
However, I noticed that with Internet Explorer, the site was totally different:
No resemblance to the one that appears with Firefox.
On Firefox: all in width on 8 columns and on Explorer: all in length on a single column. How to explain it ????
Otherwise, you ask me to "solve the problems of missing resources" and then there, for me, it is mission impossible without external help. I confessed it to you: I am a pure neophyte in maintaining a website!
So if you explained to me IN DETAIL what to do and HOW to do it, you would save me from a mess.
If you also want I can post the screenshots that I offered to you, but again you have to explain to me how to post on your site.
Here, it gives you a long reading of my problems and especially a long moment of help to plan (if you accept it!) And for all this, I renew all my gratitude to you, hoping that this time my message reaches you .
Have a good day, and maybe a “good weekend” …… ..
Hello,
while accessing the blog source code, the browser reported errors to me which I tried to explore. And by clicking on these errors, I got to your blog which is not normal as I needed to access a script (computer programming code). If I go to an error page and not a script then said resource is missing and as I said earlier the features that depend on it will not work.
Unfortunately, to resolve these missing resource issues, you will need to have even basic webmastering knowledge (so you will have to learn). But as I told you, we offer our subscribers support services, which will allow us to teach you a lot of things in webmastering (but not only), but also to solve most of your technical problems.
If you want to learn, there are a lot of online courses and even tutorials here, but I admit it will take you a little while. So it's up to you to decide and whatever you choose, you will find a solution.
Goods.
Hello and again thank you for your answers to my requests that finally crossed.
Definitely, I have a job to get there! But from the start I have been looking for solutions by reading all the tutorials I find on the Net and I am ready to consult many others if it helps me.
And that's how I found yours (great by the way ...) so for now I will continue to follow your recommendations.
So you advise me: "we offer our subscribers support services", can you tell me how to take advantage of these services?
You add in your last answer: "I invite you to request a diagnosis of your blog (it's free). », But if I click on your link (https://blogpascher.com) of course I end up on your site, but I have no information on this FREE service. I can only find PAID services!
So in the 2 cases, what to do?
Regarding the difference in presentation, I can only hope that the future "readers" of the site will work with Firefox or Chrome. In any case, thank you for this clarification that I did not know (another one !!!) but is there no possibility of getting around this new problem?
Well, come on, I've been bothering you for a long time with my problems. So I'll let you rest for this weekend and wish you a good day.
Tomorrow it will be light…..
Hello,
to access the free diagnostic, you will find the button on the home page. All information regarding support and training is also on the home page. You will also have a connected agent ready to answer all your questions.
Hello
I am using wordpress and the Tablepress table and wanted to know if it is possible to copy part of a table with its contents and paste it on another table afterwards. Let me explain :
I have an array A and an array B
Table A has 15 lines with content in each cell
Table B includes 5 lines, but I would add the 10 lines of Table A with its contents
on table B, in order to have the same tables with the same number of rows and the same content.
thank you in advance
Frédérique
Hello,
indeed it is possible. Only, you will not have an interface that will simplify the operation. You will need to have a good command of shortcodes. Because if you copy and paste a shortcode incorrectly, the table may no longer be displayed.
Hello
thank you firstly for your quick response.
I start anyway, I like the challenges.
That is the march please follow
Frédérique
You will need to export the table whose columns you want to copy. With the exported content, you will need to manipulate the resulting CSV file. This is where everything will be complicated if you do not have mastery of this type of file.
You can use this CSV file to join the columns of both tables once and import the CSV file later.
As I told you earlier, this is not an easy task.
You can also use a Duplicate Posts plugin (search for it). Hoping that this plugin will be compatible with TablePress.
Good luck.
Hello,
Is it possible to add a button that allows a visitor to add a row to this table?
Thank you
In principle yes, but it depends on the theme and plugin used.
Hello
i did change the css in the options - i want to change the color of the first header row of the table. But nothing changes ... I emptied the cache
.tablepress thead th,
.tablepress tfoot th {
Background-color: d3cec8! Important;
}
Thank you for your help …
Hello,
Your color code is wrong. The sharp # is missing
Hello Thierry,
I sincerely thank you for this tutorial which got me out of my ignorance. It's been a long time since trying to install the tables in my blog without success. But, despite your explanations, I don't always get this famous painting. I have two concerns:
1) I did download the zip file. When this download is complete, what do we do next? I don't notice anything new in the menu
Question: After the download does mean automatic plugin TablePress appearance in the menu of my blog?
2) When I choose the ion option of the plugin I unfortunately notice that my "Extension" does not have the "Add" option.
Question: Is there a solution?
NB: my blog is part of a bloggers platform (mondoblog.org). I am each time faced with the difficulty of inserting my encrypted data into a table like this scenario: http://matango.mondoblog.org/2016/05/06/cameroun-pourquoi-lopposition-est-elle-abandonnee-par-le-peuple-1/
Hello,
Sorry but we operate solely on self-hosted WordPress blogs.
Hello,
You are using a platform that is not compatible (Mondoblog). We are using WordPress for this tutorial.
Read this to understand why.
https://blogpascher.com/wordpress-2/pourquoi-devez-vous-utiliser-wordpress-pour-creer-votre-blog
Kind regards.
Hello Thierry,
Hello Herve
Indeed, I was not going to suspect it! The platform (Mondoblog) uses WordPress software. But, each blogger is free to customize their blog as they wish. This is the reason why I thought to ask for your help. I did not know that in a blog that is part of a platform using WordPress it is impossible to add plugins.
Thank you for your availability.
cordially
I'm making a website with wordpress theme with Hueman. All data in my paintings are centered. Unable to find how to align to gauche.Dans what CSS file is the control (left).
Thank you for the answer.
Hello Gilbert
Sorry for the late response, we had conferences. Regarding your request, I need a screenshot please. We can help you with the plugin, but not with the theme because we are limiting ourselves here to presenting some tools, but unfortunately we cannot provide support.
Hello,
You can use a custom CSS code:
table tr td {text-align: left} significant.
Download and activate the Header and Footer Plugin https://wordpress.org/plugins/header-footer/ And add the code for the footer.
Hello, and bravo for this tuto super nice to read.
I have two questions :
1) how can we center the text of a cell; or all cells at the same time?
2) how can you make the borders of the cells appear?
Thank you and I hope to see you soon
Hello Jean-Claude,
Sorry for the late response, we had conferences. Regarding your request, could you share screenshots?
Sincerely,
Thierry
Hello Jean-Claude,
1: You can force the alignment of all cells with custom CSS: “table td {align: center! Important; } "
2: You can also force the appearance of borders with a custom CSS code »table tr {border-top: solid 1px # 333! Important ;; border-bottom: solid 1px # 333! important ;; } table td {border-left: solid 1px # 333! important ;; border-right: solid 1px # 333! important; }
Hello,
First of all, thank you for your tutorial! I want to change the background colors of the table, but I can't. In the options, in the custom css frame, I put the example of the FAQ and saved. But the colors remain unchanged… Thanks in advance for a solution.
Hello Jmv7,
Hervé should respond to your concern very quickly. Sorry for the delay.
Hello,
I don't quite understand what you say by "I put the example from the FAQ and saved".
Meanwhile, before venturing into the changes to CSS, you first need to know CSS.
If so, you probably know that you need to get the DOM object selector (Id or class). You will need to apply the suffix "! Important" to each value if applicable, if the changes do not apply.
Hello
Thanks for this tutorial
On the other hand, it is impossible to recover the calculation formulas and functions 🙂
@+
Oh yes it's true. This is due to content blocking. We are looking for an effective solution to the problem of copying content of which we are regularly the victim.
Have a good day