Embed a Google Sheet on a Website in 2 Mins [8 Easy Steps]

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.

Formatting an Embedded Google Spreadsheet

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:

1. You can bold the text and use other forms of text formatting, as these will display on the web page with no issues.
2. Ensure all the data you wish to display is on a single spreadsheet tab.
3. Make sure to keep the spreadsheet size as compact as possible, so the user doesn’t have to scroll too much.
4. Ensure that the first row of the spreadsheet only contains the column names

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.

How to Embed a Google Sheet Using Publish to Web

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:

1. Open the spreadsheet and click on the File button in the top bar of Sheets.
2. In the dropdown menu, click on the Share button, which will open another, smaller menu.
3. There, click on the Publish to the web option. This will open a pop-up menu in the middle of the screen.

4. Here, you will be greeted with two tabs. Click on Embed as we wish to display data from Google spreadsheet on website.
5. You can select the part of the spreadsheet you wish to publish. Then click on the green Publish button.
6. A pop-up will show up asking for confirmation. Click OK there.

7. After the confirmation, in the Embed tab, highlight and copy the code in the text box.
8. You can then paste the code into your website to embed the Google Sheet.

Embed Google Sheets in WordPress

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.

To do this:

1. In WordPress, edit the page where you wish to embed the spreadsheet.
2. Select the three-dot icon towards the top right corner of the editor and select the Code editor option in the Editor tab.
3. You will be taken to a code editor window where you can paste the Google Sheets iframe code. This is the same code from the previous section. Paste the code on the page where you wish to embed it.
4. Click on the Save draft option at the top and then click on Preview to view how the page will look once it’s published.

After viewing your embedded spreadsheet, you can publish it, or you can change the appearance of the embedded spreadsheet.

Customizing 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.

Updating Embedded Sheets in Real Time

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.

Frequently Asked Questions

Is There a Way to Embed Google Sheets in a Website?

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.

How Can I Publish Google Sheets to the Web?

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.

Wrapping Up the Google Sheets Website Embedding Guide

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:

• Convert Google Sheets to Google Docs
• How to Use the IMPORTXML Function in Google Sheets
• Change Excel files to Google Sheets Spreadsheets
• How to Create a Google Sheets Dashboard