Sometimes copy-pasting a table to your website doesn’t look very professional and is a little difficult to read. It is often better to embed a Google Sheet into your site instead. You can include your functions, data, cell images, and graphs easily. Sheets will also give you the option to automatically update the data on the website when you make changes on the website.
This guide will cover everything you need to know about embedding spreadsheets from Google Sheets in websites. Read on to learn more.
Table of Contents
Before you’re able to embed Google Sheets in websites, you first need to ensure that the spreadsheet is formatted correctly.
Here are some things you should consider when you are creating or formatting a spreadsheet to embed on websites:
Most formatting issues will appear once the spreadsheet to website file is embedded. However, proper planning for the structure of your spreadsheet will save you from many problems in the future.
Templates and web scrapes in Google Sheets often have a top heading. This can cause many problems when you embed Google Sheets in a website. Make sure to delete the top row so that the headers are always shown in the first row of the spreadsheet.
Now that you know how to properly format your spreadsheet for Google Sheets embed, let’s look at how you can use the Google Sheets publish to web feature to embed Google Sheets to your website.
Here is how to embed a Google Sheet in a website:
Now that you know where you can get the code, you can embed the Google spreadsheet to a HTML website. WordPress is one of the most commonly used content management software for websites. The Google Sheets embed HTML into WordPress process is easy and only requires you to follow a few simple steps.
After viewing your embedded spreadsheet, you can publish it, or you can change the appearance of the embedded spreadsheet.
The next step to ensure that the spreadsheet is the proper size according to the webpage is to tweak the embedded spreadsheet. This can be done by making changes to the iframe Google Sheets code. To change the size, you can place height=”x” and width=”x” right after the Google Sheets “iframe” text.
After making the changes, save the draft and preview it again to see the changes. This way, you can make the spreadsheet smaller or larger depending on the contents of the page and the spreadsheet.
This method should work in most cases, but be aware that the table size will remain the same no matter the window size. This could be an issue on smaller screen sizes like mobile devices, where the table could overflow and obstruct other web page elements. One method to fix this is to use reactive CSS code in your website design.
This is one of the best parts about using Google Sheets to embed spreadsheets in a website. You can make changes to the spreadsheet, which will be updated automatically to show up on the embedded spreadsheet.
To enable automatic updates in real-time, head over to the Google Sheets page and open the publish to web window again. Here, you will see a Published content & settings section. Click on it to expand it. Here, click to enable the Automatically republish when changes are made option.
With the option enabled, feel free to return to the spreadsheet and make changes. The changes will then be updated live on the webpage where the spreadsheet was embedded. This can be a great way to show live information to your website viewers.
You can embed Google Sheets into a website in two ways. For the first method, click on File in the top menu and then click on Download. There, click on Web page (.html, zipped). This will download the spreadsheet as an HTML code. However, this method does not allow real-time updates. To do this, use the Publish to the web option.
To publish a spreadsheet, open the spreadsheet and press the File button. Click Share and then click the Publish to the web option. Here, click on Embed. Now, select the part of the spreadsheet you wish to publish. Then click the green Publish button and OK on the confirmation window. After the confirmation, in the Embed tab, highlight and copy the code in the text box. You can then paste the code into your website to embed the Google Sheet.
We discussed two simple methods for you to embed a Google Sheet. If it doesn’t work for you, try copying only the data you want to pull from a sheet to a new one and then embedding it. If you’re still having trouble, let us know in the comments, and we’ll help you out.
Related:
