2 min read
How to Embed a Google Sheet in HTML (Step-by-Step Guide)
Paul
Published in Google Sheets
Introduction
Embedding a Google Sheet into your website is a quick way to display real-time data without building a full database. Whether you're showing a public price list, a directory, or a live dashboard, Google Sheets + HTML is a powerful combo.
1. Publish Your Google Sheet to the Web
Before embedding, you need to make the sheet public:
GleanWise
Transform Your Google Sheets into Portals
Gleanwise lets you transform your Google Sheets into portals. Make them public or private to share with clients or team.
- Open your Google Sheet
- Click on File > Share > Publish to the web
- Choose the specific sheet or entire document
- Copy the generated iframe code or the link
2. Embed with an <iframe> (Basic)
Paste the iframe code into your HTML like this:
<iframe
src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQxxxxxx/pubhtml?gid=0&single=true&widget=true&headers=false"
width="100%"
height="500">
</iframe>
Pros:
- Super simple
- Updates automatically
Cons:
- Limited styling/customization
- Not mobile-friendly by default
3. Embed with JavaScript for More Control
If you need to custom-style or filter the data, consider using the Google Sheets API or a tool like Tabletop.js or PapaParse.
Example with Tabletop:
GleanWise
Ready to Create Your Own Portal?
Turn your Google Sheets into professional portals in minutes with Gleanwise.
<script src="https://unpkg.com/[email protected]/tabletop.js"></script>
<script>
window.addEventListener('DOMContentLoaded', function() {
Tabletop.init({
key: 'https://docs.google.com/spreadsheets/d/YOUR_SHEET_ID/pubhtml',
callback: function(data) {
console.log(data); // You can now render it with JS
},
simpleSheet: true
});
});
</script>
4. Use Tools like Gleanwise or Sheet2Site
If you're not a developer or want a faster solution, platforms like Gleanwise.com allow you to turn Google Sheets into beautiful, embeddable web portals with minimal effort—no coding needed.
5. Styling Tips
To make your embedded sheet look more professional:
- Wrap the iframe in a responsive container
- Add CSS to hide scrollbars or adjust padding
- Customize your sheet’s design inside Google Sheets
Conclusion
Whether you go the DIY route with raw HTML and JavaScript, or use a no-code tool like Gleanwise, embedding Google Sheets gives you a fast, scalable way to share data online.
Let me know if you want me to write this as a polished article, or if you'd like to tailor it to a specific audience (developers, marketers, educators, etc.).
GleanWise
Start Building Your Portal Today
Join others who are already using Gleanwise to share their data beautifully.
Related Posts
