How to Embed Excel in HTML and in WordPress

Businesses and industries of all types, view Excel spreadsheets as one of the key tools for effective management. Different departments, such as CRM, marketing, sales, or HR, use it to store, show, and manage relevant data.

There are so many situations where you’d need to add an Excel sheet to a web page, that it would be silly if you couldn’t.

Luckily, there are some ways in which you can add that precious data from your Excel file directly into a HTML web page or a WordPress site.

In this article created by our team at wpDataTables (the best WordPress table plugin), we will give you step-by-step instructions on how you could be embedding Excel in HTML.

Why embed Embed Excel in HTML – Advantages

First, let us review the four main advantages of using and embedding Excel in HTML or WordPress:

Create Superb Charts

Multitudes of columns and rows are not the best way to present data. You can sort and filter all the data within the Excel sheet and present it in an easy-to-navigate manner.

Attractive charts can make your reports or marketing materials come to life and add more power to tedious statistics.

To make it effortless, the program will suggest the most appropriate type of chart for the information you wish to display in your Excel file.

Use Personalized Formatting

To highlight the most important data, you can control the format of your Excel spreadsheet.

You can use different colors and shades, as well as a bold or italic font in your Microsoft Excel file. You may use this feature to focus on the most important portion of information, such as the pre-tax profit or the balance carried forward in your accounting presentation.

Use the Quick Analysis button and the Formatting tab to choose the most suitable coloring scheme for your Excel spreadsheet.

Pinpoint Trends

Another great functionality of Excel charts and graphs is that you can display average lines. Averages will help you and your audience to identify the main trends contained in the data. This ensures you have presented the key points.

Moreover, you have the option of extending the trend lines beyond the charts. Creating these predictions will help your business build clear and effective long-term strategies.

Accumulate Information

Microsoft Excel is a practical tool for gathering data from different archives in one place. You can accumulate information from other Excel sheets, import text, and images, and insert other objects.

Embedding an Excel Sheet In Your WordPress Site

The first thing you need to do is to upload the file you wish to embed in your WordPress website or post.

WordPress identifies many types of files, among them Excel files. The steps are straightforward using the WordPress dashboard or administration page.

Follow these step by step instructions:

  • Open your preferred web browser.
  • Go to “YourWebsite.com/wp-admin” (“YourWebsite.com” is your WordPress domain).
  • Sign in using your username and password.

  • In the menu on the left click on “Media” and then choose “Add New” and “Select Files.”
  • Using the file browser that has popped up find the Excel sheet you wish to upload.
  • Type in the title, caption, and description in the respective boxes.
  • Make a note or copy and save the URL in the File URL box (it is necessary to insert the spreadsheet in your posts).
  • Click on “Save All Changes”.
  • Create a new post by clicking on “New Post” on the left of the page.

  • Insert the URL link to the Excel document you have uploaded in your post.

 

Looking to create data tables in WordPress?

wpDataTables can do that for you. There’s a good reason why it’s the #1 WordPress plugin for creating responsive tables and charts.

An actual example of wpDataTables in the wild

And it’s really easy to do something like this:

  1. You provide the table data
  2. Configure and customize it
  3. Publish it in a post or page

And it’s not just pretty, but also practical. You can make large tables with up to millions of rows, or you can use advanced filters and search, or you can go wild and make it editable.

“Yeah, but I just like Excel too much and there’s nothing like that on websites”. Yeah, there is. You can use conditional formatting like in Excel or Google Sheets.

Did I tell you you can create charts too with your data? And that’s only a small part. There are lots of other features for you.

Embedding an Excel Sheet from OneDrive

Embedding Excel spreadsheets from OneDrive into your blog is doable.

This will allow visitors to sort, filter, and calculate data directly in the post. When you update the workbook on OneDrive, the changes will also be reflected in the embedded spreadsheet in your post.

How to do it? Follow these simple steps:

  • Go to the Microsoft OneDrive
  • In your OneDrive, right-click on the workbook and select “Embed”.

  • Click on “Generate” and then “Customize” to choose the way you want the embedded spreadsheet to be displayed in your post.
  • In the “What to show” box, you can select what you want to display (the entire workbook, a chart, a named range, a PivotTable, or a table).
  • Select the options you like in the “Appearance” section.
  • In the “Interaction” section you set the visitor permissions for your workbook. The “Sorting and filtering” option allows the visitors to sort, filter, expand, or collapse the tables or PivotTables. The “Typing” option allows visitors to type in the cells. Take note that these changes will not be saved in your original workbook. The mortgage calculator is a great example of the usefulness of this option. You can embed this calculator in your post and allow visitors to type in different variables such as the loan length or amount.

  • Check the “Always start with this cell selected” box and choose a specific cell in the preview. This is beneficial if you want to have a particular cell selected every time a reader visits your blog.
  • To specify the size of the Excel sheet displayed use the “Dimensions” section to type in the width and height in pixels. To preview the way your visitors will see it, click on “View actual size”.

(The minimum size is 200×100 pixels and the maximum – 640×655 pixels. You can then make the embedded Excel spreadsheet smaller or bigger by changing the code after you have pasted it into your post).

Upon completion click on “Copy” (you may need to allow access to the Click board).

  • Create or edit a page or blog post and paste the embed code into the Text Editor. If you are using the block editor, use a Custom HTML block to insert the code.
  • When you update your page or blog post, the embed code will be automatically converted into a shortcode.

Embedding Google Sheets in WordPress with Google Drive

Google Sheets can be a great option for invoicing, data analysis, employee time tracking, timesheet apps (as an alternative to Excel timesheets), schedules, calendars, and more.

It is a straightforward process to add Google Sheets to your web page or blog. All you need is the embed code added to your website. These are the steps to do it:

Publish Google Sheets

Ensuring everyone is allowed to see your Google Sheets will require you to publish the file. Go to your Google Drive, open the desired document, click on “File” and then “Publish to the Web.”

It is necessary to select the Embed tab and to choose between publishing the whole document or only selected pages.

When you edit your original spreadsheet, the changes will be automatically republished on the website. You can easily change that by unchecking the “Automatically republish when changes are made” (located in the “Publish Content” and “Settings” tabs).

Click on “Publish” and obtain the shareable link.

Embed Google Sheets URL

In WordPress: Copy the iframe code, then on your admin dashboard click on “Select Pages” and “Add New”, and paste the link.

In Gutenberg: Add the Custom HTML block to your page and paste the link in the HTML field.

To change the size of the spreadsheet, you can edit the iframe code. Below is an example of the code if you wanted the width to be 400 pixels and the height – 700 pixels:

<iframe src=”https://docs.google.com/spreadsheets/d/e/2PACX-1vSz3eSCF1FeAWxjwwkcCprTRCIwUxHnNFPtIsOeAFZyBX_MdhSiIGPwxSHbZUfedUV_XQW6j33AyPKg/pubhtml?widget=true&amp;headers=false” width=”400″ height=”700″></iframe>

The best way to embed an Excel file in HTML and WordPress

The most classy way for embedding Excel in WordPress is through wpDataTables, the best WordPress plugin for tables and charts.

Here’s how easy it is to import Excel in WordPress:

And you can get more info about the process through our documentation page for importing data from Excel, CSV, or Google Spreadsheets.

Ending thoughts on why to embed Excel in HTML and WordPress

The main advantage of embedding Google or Excel sheets in WordPress is that you do not have to create new spreadsheets or charts on your website or blog.

Moreover, you can customize the way others see the embedded spreadsheet. Follow the steps above and you can get it done effortlessly in a short amount of time.

If you enjoyed reading this article on embedding Excel in HTML, you should check out this one about how to add meta tags in WordPress without a plugin.

We also wrote about a few related subjects like how to hide a featured image in a WordPress post, how to tell if a site is WordPress, how to uninstall WordPress from cPanel, how to embed a pdf in WordPress, how to optimize CSS delivery in WordPress and how to create a website like Amazon.


Milan Jovanovic
Milan Jovanovic

Product Lead

Articles: 208