Create an HTML Table from Google Sheets Data with n8n

What You Will Learn

In this guide you will learn, step by step, how to use an n8n workflow template to:

• Trigger a workflow with a webhook using an HTTP GET request
• Read live data from a Google Sheets document using the Google Sheets node
• Convert that data into a dynamic HTML table
• Apply Bootstrap 5 styling to make the table responsive and clean
• Return the generated HTML as the response to the webhook request

By the end, you will understand how each n8n node in the workflow contributes to the final result and how to adapt it to your own spreadsheets.

Concept Overview

What This n8n Workflow Does

This n8n workflow template turns a Google Sheets spreadsheet into a ready-to-use HTML page that contains a styled table. The process looks like this:

1. You send an HTTP GET request to a webhook URL.
2. n8n reads data from a specific sheet in your Google Sheets document.
3. A Function node builds an HTML string that includes a Bootstrap 5 table.
4. The workflow returns the HTML as the response, which can be viewed directly in a browser or consumed by another system.

Key Nodes in the Workflow

• Webhook – Starts the workflow when it receives an HTTP GET request.
• Read from Google Sheets – Connects to Google Sheets using OAuth2 and fetches the sheet data.
• Build HTML (Function node) – Converts the sheet data into a Bootstrap-styled HTML table.
• Respond to Webhook – Sends the generated HTML back to the caller with the correct content type.

Why Use This Approach

• Dynamic columns – The workflow automatically detects column names from the first row of your data and uses them as table headers.
• Responsive layout – Bootstrap 5 ensures the table looks good on desktop and mobile devices.
• Live data – Every time you call the webhook, it fetches the latest values from Google Sheets.
• Simple access – You only need the webhook URL to get an HTML view of your spreadsheet.

How the Workflow Works in Detail

1. Webhook Trigger

The workflow starts with a Webhook node configured to accept an HTTP GET request. When someone visits the webhook URL in a browser or sends a GET request from an HTTP client, this node triggers the rest of the workflow.

2. Reading Data from Google Sheets

The Read from Google Sheets node is responsible for pulling data from your spreadsheet. It uses your Google OAuth2 credentials to authorize access to the Google Sheets API.

In this node you configure:

• Spreadsheet ID (or Sheet ID) for the document you want to read
• The specific sheet or range you want to fetch data from

The node outputs the sheet data as an array of items, where each item represents a row and each field represents a column.

3. Building the HTML Table

The Build HTML node is a Function node that receives the data from Google Sheets. It uses JavaScript to:

• Identify the column names
• Create table headers (<th>) for each column
• Create table rows (<tr>) and cells (<td>) for each item
• Wrap everything inside a complete HTML document structure

The node also includes a link to the Bootstrap 5 CSS so the table is styled and responsive.

4. Responding to the Webhook

Finally, the Respond to Webhook node sends the generated HTML back to the client that made the request. It sets the response body to the HTML string and uses the correct content type so that browsers render the page as HTML.

This means that when you open the webhook URL in a browser, you will see your Google Sheets data displayed as a nicely formatted Bootstrap table.

Step-by-Step Setup Guide

Step 1 – Prepare Google Sheets Access

1. In n8n, make sure you have valid Google Sheets OAuth2 credentials set up.
2. Test the credentials in any Google Sheets node to confirm that authorization works.

Step 2 – Configure the Google Sheets Node

1. Open the Read from Google Sheets node in the template.
2. Replace the existing Sheet ID or Spreadsheet ID with the ID of your own Google Sheet if you want to use your data.
3. Check the sheet or range configuration to ensure it points to the correct tab and data range.

Step 3 – Review the HTML Builder Logic

The Build HTML node contains JavaScript that generates the HTML. You can keep it as is or adjust the title, heading, or Bootstrap classes to match your needs. Here is the example code used in the node:

const columns = Object.keys(items[0].json);

const html = `
<!doctype html>
<html lang="en">  <head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <title>HTML Table Example</title>  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet">  </head>  <body>  <div class="container">  <h1>HTML Table Example</h1>  <table class="table">  <thead>  <tr>  ${columns.map(e => '<th scope="col">' + e + '</th>').join('\n')}  </tr>  </thead>  <tbody>  ${items.map(e => '<tr>' + columns.map(ee => '<td>' + e.json[ee] + '</td>').join('\n') + '</tr>').join('\n')}  </tbody>  </table>  </div>  </body>
</html>
`;

return [{ json: { html: html } }];

Key points in this code:

• const columns = Object.keys(items[0].json); gets the list of column names from the first row.
• ${columns.map(...) builds the table header cells using those column names.
• ${items.map(...) loops over each row from Google Sheets and creates a table row with cells for each column.
• The final result is stored in json.html, which is then used by the response node.

Step 4 – Configure the Webhook and Response

1. In the Webhook node, check that the HTTP method is set to GET.
2. In the Respond to Webhook node, ensure it uses the HTML string from the html field as the response body and that the content type is set to HTML or text/html.

Step 5 – Trigger the Workflow

1. Copy the Webhook URL from the Webhook node.
2. Paste it into your browser address bar or call it using an HTTP client as a GET request.
3. When the request runs, n8n will:
   • Read your Google Sheets data
   • Generate the HTML table with Bootstrap styling
   • Return the HTML page
4. View the resulting HTML table in your browser.

Recap

This n8n workflow template gives you a quick way to transform Google Sheets data into a fully formatted HTML table:

• The Webhook node listens for GET requests.
• The Read from Google Sheets node fetches live spreadsheet data using OAuth2.
• The Build HTML node dynamically creates a Bootstrap 5 table with automatic column headers.
• The Respond to Webhook node returns the HTML so it can be displayed directly in a browser or embedded in other applications.

You can reuse this pattern for reporting dashboards, internal tools, or any automation where you want a quick HTML view of spreadsheet data.

Frequently Asked Questions

Can I change the table styling?

Yes. You can modify the classes in the <table class="table"> tag or add additional Bootstrap classes such as table-striped or table-hover. You can also add custom CSS if needed.

How are the column headers determined?

The workflow uses Object.keys(items[0].json) to get the keys from the first row of data returned by the Google Sheets node. These keys become the column headers in the HTML table.

Do I need to change the HTML code?

You can use the provided HTML code as is. However, you are free to change the page title, heading text, Bootstrap version, or layout to better fit your use case.

Can I use a different HTTP method?

This template is designed for an HTTP GET request, which is convenient for viewing in a browser. If you need POST or another method, you can adjust the Webhook node configuration accordingly.

Try the Template

Use this n8n workflow to instantly convert your Google Sheets data into a responsive HTML table that you can open in any browser or integrate into your web applications.

Start exploring more powerful automations with n8n and Google Sheets today.