How to Display a Google Sheet on Your Website

October 15, 2026 · 5 min read

A Google Sheet is often the easiest place to keep information that changes: a list of documents, an event schedule, a price list, a staff directory, a fundraising total. The people who know the information can edit a spreadsheet without learning your website builder or having a login.

The trick is getting that sheet onto your website so it updates by itself. This guide covers three ways to do it, from quickest to most polished.

All three start the same way: publishing the sheet. That's different from sharing it.

First: publish the sheet

Open the sheet and choose File → Share → Publish to web.
Under Link, choose the tab you want (not "Entire document", unless you mean it).
Choose the format: Web page for method 1 below, or Comma-separated values (.csv) for methods 2 and 3.
Click Publish and copy the link.

A few things worth knowing:

Published means public. Anyone with the link can see that tab, even if the sheet itself is private. Keep private columns, like emails or phone numbers, on a separate tab you don't publish.
Changes update automatically. "Automatically republish when changes are made" is on by default. Google's copy usually catches up within a few minutes, so a change won't show on your site instantly.
Stop publishing any time from the same screen.

Method 1: Embed the sheet (quickest)

In the Publish to web window, choose the Embed tab instead of Link. Google gives you an <iframe> code. Paste it into an HTML or code block on your site.

This takes two minutes and needs no code knowledge. The trade-off is that it looks like a spreadsheet: Google's fonts, gridlines and a tab bar at the bottom. It doesn't match your site, it can be cramped on phones, and visitors can't search or filter it.

You can tidy it up a little by adding options to the end of the iframe's link, for example &widget=false&headers=false&chrome=false to hide the tab bar, row numbers and title. It still won't look like the rest of your site.

Best for: internal pages, quick fixes, and data people expect to see as a spreadsheet.

Method 2: Turn the CSV into a real table (free code)

With the CSV link, a few lines of JavaScript can fetch the sheet and build an ordinary HTML table. It inherits your site's fonts and colors, works on phones, and updates whenever the sheet does.

Paste this into an HTML or code block and replace the link with your CSV link:

<div id="sheet-table">Loading…</div>
<script>
(function () {
  var CSV_URL = "https://docs.google.com/spreadsheets/d/e/YOUR-ID/pub?gid=0&single=true&output=csv";
  var box = document.getElementById("sheet-table");

  function parseCSV(text) {
    var rows = [], row = [], cell = "", quoted = false;
    for (var i = 0; i < text.length; i++) {
      var c = text[i];
      if (quoted) {
        if (c === '"' && text[i + 1] === '"') { cell += '"'; i++; }
        else if (c === '"') quoted = false;
        else cell += c;
      } else if (c === '"') quoted = true;
      else if (c === ",") { row.push(cell); cell = ""; }
      else if (c === "\n" || c === "\r") {
        if (c === "\r" && text[i + 1] === "\n") i++;
        row.push(cell); rows.push(row); row = []; cell = "";
      } else cell += c;
    }
    if (cell !== "" || row.length) { row.push(cell); rows.push(row); }
    return rows;
  }

  fetch(CSV_URL)
    .then(function (r) { if (!r.ok) throw new Error(r.status); return r.text(); })
    .then(function (text) {
      var rows = parseCSV(text);
      var table = document.createElement("table");
      rows.forEach(function (cells, n) {
        var tr = table.insertRow();
        cells.forEach(function (value) {
          var cell = document.createElement(n === 0 ? "th" : "td");
          cell.textContent = value;
          tr.appendChild(cell);
        });
      });
      box.textContent = "";
      box.appendChild(table);
    })
    .catch(function () { box.textContent = "This list isn't available right now."; });
})();
</script>
<style>
#sheet-table { overflow-x: auto; }
#sheet-table table { border-collapse: collapse; width: 100%; }
#sheet-table th, #sheet-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #ddd; }
</style>

How it works: the browser downloads the CSV from Google, splits it into rows and cells (handling commas and line breaks inside quoted cells), and builds a table with the first row as headings. It uses textContent, so nothing in the sheet can inject code into your page.

Make it yours by changing the styles at the bottom. From here you could add a search box, sort by a column, or turn rows into cards instead of a table.

Platform notes: this needs a block that runs JavaScript. On Squarespace that means a Code Block on a plan that allows JavaScript (currently Core and above). On WordPress.com it needs a plan that allows custom code; self-hosted WordPress can use a Custom HTML block. On Wix, use Embed HTML, which runs it inside a frame, so set the frame tall enough.

Best for: simple lists and tables where a tidy, readable table is enough.

Method 3: Use a ready-made component

A plain table is a start, but most real uses need more: search as you type, filters, dates handled properly, phone-friendly layouts, accessibility for keyboard and screen-reader users, and sensible behavior when the sheet has a blank row or a typo. That's where a purpose-built component saves time.

Each of these reads a published Google Sheet and is installed by pasting one snippet:

A document or resource library: Resource Finder turns a sheet of documents and links into a searchable, filterable library. See How to Add a Searchable Document Library.
An event or conference agenda: Event Schedule shows sessions with day tabs, tracks, "happening now" labels and add-to-calendar. See How to Create an Interactive Conference Agenda from Google Sheets.
A fundraising total: Goal Tracker shows a progress bar or thermometer with milestones, days left and a Give button. See How to Add a Fundraising Progress Bar.
A quiz: Lead Quiz reads its questions, answers and results from a sheet.

All are one-time purchases with no subscription, and each includes step-by-step instructions for Squarespace, WordPress, Wix and other site builders.

Troubleshooting

The page shows "Loading…" forever or an error. Check that you used the CSV link (it ends in output=csv), not the link from your browser's address bar or the Share button.
My change isn't showing. Wait a few minutes for Google to republish, then reload the page. Check that "Automatically republish" is still on.
The wrong tab shows up. Publish the specific tab rather than the whole document. Each tab has its own link (the gid= number).
It works in a private window but not while I'm editing. Many site builders don't run custom code in the editor. Check the live page.
Nothing shows on Squarespace. Check that your plan runs JavaScript in Code Blocks.