How to display Google Sheet data on a website using HTML, CSS, and jQuery

- Thursday, December 18, 2025

To display Google Sheet data on a website using HTML, CSS, and jQuery, the most efficient method is to publish your sheet as a CSV and use jQuery to parse it. This avoids the complexity of the full Google Sheets API for simple read-only tasks.

How to display Google Sheet data on a website using HTML, CSS, and jQuery

1. Prepare Your Google Sheet

Open your Google Sheet.
Go to File > Share > Publish to web.
Change "Entire Document" to the specific sheet name (e.g., "Sheet1").
Change "Web page" to Comma-separated values (.csv).
Click Publish and copy the generated URL.

2. The HTML Structure

Create a simple container where your data will live.

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Google Sheets to HTML</title>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
</head>
<body>

	<h2>Project Data from Google Sheets</h2>
	<div id="data-container">
		<table id="data-table">
			<thead>
			   ...
			</thead>
			<tbody>
			   ...
			</tbody>
		</table>
	</div>

</body>
</html>

3. The CSS Styling

Add some basic styles to make the table readable.

#data-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 20px;
	font-family: Arial, sans-serif;
}

#data-table th, #data-table td {
	border: 1px solid #ddd;
	padding: 12px;
	text-align: left;
}

#data-table th {
	background-color: #4CAF50;
	color: white;
}

#data-table tr:nth-child(even) { background-color: #f2f2f2; }

4. The jQuery Logic

This script fetches the CSV, parses it using PapaParse (the gold standard for CSV-to-JSON in JS), and builds the table rows.

$(document).ready(function() {
	// Replace this with your published CSV URL
	const public_spreadsheet_url = 'YOUR_PUBLISHED_CSV_URL_HERE';

	Papa.parse(public_spreadsheet_url, {
		download: true,
		header: true,
		complete: function(results) {
			let data = results.data;
			let tableHeader = "";
			let tableBody = "";

			// Create Headers
			const headers = Object.keys(data[0]);
			tableHeader += "<tr>";
			headers.forEach(header => {
				tableHeader += `<th>${header}</th>`;
			});
			tableHeader += "</tr>";

			// Create Rows
			data.forEach(row => {
				tableBody += "<tr>";
				headers.forEach(header => {
					tableBody += `<td>${row[header] || ""}</td>`;
				});
				tableBody += "</tr>";
			});

			$('#data-table thead').append(tableHeader);
			$('#data-table tbody').append(tableBody);
		}
	});
});

Key Benefits of this Method:

Real-time updates: Whenever you update the Google Sheet and it auto-republishes (usually every few minutes), your website will reflect the changes on the next refresh.
No Backend Needed: You don't need a server-side language like PHP or Python.
Lightweight: jQuery and PapaParse are fast and handle large sets of data well.

Can we do it with JSON format instead of CSV ?

Yes, you can definitely use JSON. While Google deprecated their old "GData" JSON feed, you can still access your data in JSON format by using the Google Sheets API v4.

This method is more robust than CSV because it handles special characters and data types more cleanly. To do this without a complex backend, you will need an API Key.

1. Get an API Key

Go to the Google Cloud Console.
Create a Project and enable the Google Sheets API.
Go to Credentials > Create Credentials > API Key.
Important: Ensure your Google Sheet is shared as "Anyone with the link can view".

2. Identify Your Sheet URL

Your JSON endpoint will follow this structure: https://sheets.googleapis.com/v4/spreadsheets/{SHEET_ID}/values/{SHEET_NAME}?key={YOUR_API_KEY}

SHEET_ID: The long string of letters and numbers in your browser's address bar.
SHEET_NAME: Usually "Sheet1".

3. The jQuery Implementation

Since the API returns a nested array, we use jQuery's $.getJSON to fetch the data and map it to your HTML table.

$(document).ready(function() {
	const sheetId = 'YOUR_SHEET_ID';
	const sheetName = 'Sheet1';
	const apiKey = 'YOUR_API_KEY';
	const url = `https://sheets.googleapis.com/v4/spreadsheets/${sheetId}/values/${sheetName}?key=${apiKey}`;

	$.getJSON(url, function(data) {
		const rows = data.values;
		if (rows.length > 0) {
			let tableHeader = "<tr>";
			let tableBody = "";

			// The first row of the sheet is usually the Header
			const headers = rows[0];
			headers.forEach(header => {
				tableHeader += `<th>${header}</th>`;
			});
			tableHeader += "</tr>";

			// Loop through the rest of the rows (starting at index 1)
			for (let i = 1; i < rows.length; i++) {
				tableBody += "<tr>";
				rows[i].forEach(cell => {
					tableBody += `<td>${cell}</td>`;
				});
				tableBody += "</tr>";
			}

			$('#data-table thead').html(tableHeader);
			$('#data-table tbody').html(tableBody);
		}
	}).fail(function() {
		console.error("Error fetching Google Sheets data. Check your API Key and Sheet permissions.");
	});
});

Security Tip

When using the JSON API method in a front-end script (HTML/JS), your API Key is visible to anyone who views your page source. To protect your account:

Go to the Google Cloud Console.
Edit your API Key.
Under API restrictions, limit the key to only "Google Sheets API".
Under Application restrictions, add your website's domain so other websites can't steal your key.