How to Embed Excel in HTML and in WordPress

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.

Technology drives commerce today and it would be almost impossible to run a business without the use of the Internet. Hence, you may need to embed Excel in HTML or in your WordPress website. In this article created by our team at wpDataTables (the best WordPress table plugin), we will give you step by step instructions on how this can be accomplished.

Why embed Embed Excel in HTML – Advantages

First, let us review the four main advantages of using and embedding Excel spreadsheets in WebPress:

Create Superb Charts

Multitudes of columns and rows are not the best way to present data. Excel enables you to sort and filter all the data within the spreadsheet 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, Excel will suggest the most appropriate type of chart for the information you wish to display.

Use Personalized Formatting

To highlight the most important data Excel allows you to control the format of your spreadsheets. You can use different colors and shades, as well as a bold or italic font. 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.

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

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

Embedding an Excel Spreadsheet In Your WordPress

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 XLS and XLSX 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 spreadsheet 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.

Embedding an Excel Spreadsheet from OneDrive

You can embed your Excel workbook from OneDrive into your blog. 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 view 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 workbook 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 spreadsheet 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 it 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 iframe (Inline Frame) 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, schedules, calendars, and more.

It is a straightforward process to add Google Sheets to your website or blog. All you need is the iframe link 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 Excel 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 Excel or Google 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 file. Follow the steps above and you can get it done effortlessly in a short amount of time.

If you enjoyed reading this article on how to embed Excel in HTML, you should read these as well:

Up Next:

How to Set WooCommerce Related Products, Up-Sells, Cross-Sells

How to Set WooCommerce Related Products, Up-Sells, Cross-Sells