The length of the title alone suggests this post is a little more niche than many of the posts I write on this blog. Please bear with me.
On a recent client project, we needed to get tables that contained links from Excel or Word into the excellent TablePress plugin. However, this was easier said than done. After a half-mistake turned into an “aha!” moment, I realized that I don’t think anyone has shared this tip, so I’m using my blog to do so.
For anyone familiar with using the WordPress editor to generate HTML for use in text widgets, this may be pretty familiar.
The Setup
My client wanted to import a two-column table, but the left-column would contain links to different organization’s websites. Sound simple? It wasn’t.
Background
Tables used to be one of the primary features in web design in the 90s. They were used to lay out a page, organize photos, build menus, and more. You name it, someone was doing it with a table.
Those days are luckily behind us—CSS has replaced tables as the primary technique for laying out a web page—but tables are still important in modern web design for showing data (which is what they were intended for all along!). Today, the only appropriate use for a table on the web is something that would also make sense in a spreadsheet.
However, you can’t just copy and paste a table from Excel into the WordPress editor and expect anything good to happen. Trust me, I’ve tried.
This leads us to TablePress. TablePress is an excellent WordPress plugin that allows for entering basic data into a grid-format interface in the WordPress admin. Using TablePress comes with two main advantages:
- A single table can be reused throughout a site.
- The table output from the plugin is standardized across the site so all tables look the same.
The Problem
This is all great until you have a table in Excel that you need to import. TablePress has a wonderful CSV import function, ((CSV stands for “comma separated values.” If you ever open a CSV file in a text editor, you’ll see all your cells separated by commas. This format lead to my favorite conference website of all time: http://csvconf.com.)) but CSV doesn’t support formatting, including links. TablePress also has an Excel importer, though it’s a beta and didn’t work for me.
Finally, TablePress can import HTML tables, but the HTML files saved out of some versions of Excel are sometimes too garbled to import successfully.
The Solution
Frustrated by the failed imports, my client tried to just copy and paste the Excel table into WordPress. This appeared to work, but the behind-the-scenes code in the editor was nasty. On narrow screens, the table would just pop out of the body. This wasn’t going to work.
However, I realized they were on to something. The code in the editor was good enough to import into TablePress. Here’s the whole process from start to finish.
Bring into WordPress
- Start by making your table in Excel. Just focus on the values that go in the cells. We’ll format in a moment.
- Copy the cells in Excel.
- Open a new page in WordPress.
- Make sure you are using the “Visual Editor.”
- Open the “Paste from Word” tool in the editor. (In WordPress 3.9+, you can paste straight into the editor.)
- Paste the table into the pop-up window. (Skip this step in WordPress 3.9+)
- Click “Insert.”
Now you should see the table in WordPress. It’s still a little gross (that’s the technical term, not), code-wise, but it’s good enough.
Use the WordPress editor to add links, bold, and italic as needed to the table.
Manual Input HTML Import
Now it’s time to take it to TablePress. If you haven’t installed TablePress yet, do that first!
- On the WordPress page containing your table, switch to using the “Text Editor.”
- Select the entire editor contents and copy it. (PC: CTRL + A, CTRL + C. Mac: CMD + A, CMD + C).
- Go to TablePress > Import.
- Select the “Manual Input” import option (instead of uploading a file).
- Paste the code you copied in Step 2 into the text box that now appears.
- Select “HTML” from the “Import Format” drop down just below the text box.
- Click “Import.”
You should now see the table AND it should contain the HTML required to add links, bold, and italic where you placed them.
At this point you’ll need to give your table a name, description, and appropriate settings (make sure to pay close attention to the first two checkboxes regarding the table header and footer) and you’re ready to put the table anywhere on your WordPress site!
TablePress is quite powerful, so visit their site for more thorough documentation.
OMG! It realy WORK ! ! !
Thank you, you are just magic, bro!
Glad you found this useful :) Spread the word!
Thank you very much. You solved my problem of listing products and prices in a way that looks good.
That’s great, @brewsic! It’s always nice to hear when a post helps someone out of a tough spot.
This problem has since been resolved with an Automatic URL conversion Extension. Simply download the extension from https://tablepress.org/extensions/automatic-url-conversion/ , install and activate it; you are partly there. If your table is [table id=4 /], then replace it with [table id=4 automatic_url_conversion=true /]. If for any reason you want the links to open in a new tab, then your code should look like this: [table id=4 automatic_url_conversion=true automatic_url_conversion_new_window=true /]. Good luck.
Thanks for the update, Eman. This may well solve the issue for a lot of people!
At least in our case, we didn’t want plain URLs but rather linked text, so I think the above method is still preferred.
Hi Mark – Thank you so much. This has really been helpful (especially after having spent 3 hours trying to find an anser to this very question). I just have additional question: I have done everything that you mentioned here and have my table ready to go. However, I want the links to open in a new tab after i import it into Tablepress. Any startightforward way to achieve that?
Hi @shashankflorida. I’m glad this was helpful! Links that open in a new tab/window are rarely a good idea for usability. You do it by adding an HTML attribute to the link, and I don’t know anyway to do that without editing by hand.