• Basic features
  • Essentials
  • Beyond the basic
  • Useful Plugins
  • SEO

Google Docs

Actually, spreadsheets or word documents can not be embedded into web without activeX. To embed these kinds of documents into a webpage, I suggest to use Google Docs which is a great online office tool to let people edit and share documents, presentations, and spreadsheets. Actually, Google Docs has a feature to allow people to share a document through sending a link. But we can't include the document in a web page by that method. This tutorial will reveal the only one way to embed spreadsheets or any documents into your page on web.

Instruction

You need to sign in Google if you don't have an account yet. If you have your account at google, you are ready to share your documents on your website. Please go to Google Drive: https://drive.google.com/ Then create a spreadsheet or a document. For this tutorial, I created a spreadsheet as an example below.

  • Select "File > Publish to web" on the top menu.
  • Then you will see this pop-up window below. Please, select a sheet or all sheets you want to publish. Then "Start Publishing" button. Make sure the check box (Automatically republish when changes are made) is on.
  • Whenever this document (spreadsheet) is changed, it will be automatically published.
  • Select "HTML to embed in a page" at the bottom menu.
  • Then you will see a source code you can grab in order to embed it into a web page.
  • You can select all sheets or a sheet to be shared. If you select a specific sheet, the source code will be changed.
  • As default, it will publish all cells on a sheet. But, you can also publish specific ranges of the sheet. For example, you can input the text box as "A1:C20". This setting will publish cells from A1 to C20. You can try according to your choice. I published one sheet, and typed "A2:C11". Below is the final code generated:
  • <iframe width='280' height='250' frameborder='0' src='https://spreadsheets.google.com/pub?key=0AukykkLK6WftdEpaQkZDNE1fTTFMVlFvTmY3TlNuQWc&hl=en&single=true&gid=0&range=A2%3AC11&output=html&widget=true'></iframe>
  • As you can see the demo at the top of this page, only 10 rows are visible because I filtered by typing "A2:C11". (Starting point is "A2", and the end point is "C11".) The rest cells are hidden.
  • Copy the code, and go back to iWeb.
  • Insert a HTML snippet. Then paste the code into HTML snippet box.
  • You are free to replace "width" as well as "height" to adjust the size of the spreadsheet for your page. Please click "Apply" button on the HTML snippet box.
  • Whenever you modify the document or spreadsheet on Google Docs, the embedded document will be automatically changed at the same moment. Hence you don't need to check it every time you have made changes in the document.

If you have Pro Pack, you can export your spreadsheet to "CSV" file then convert it into Smart Table for better look and SEO (Search Engine Optimization). But whenever you have made any changes, you must convert (drag & drop) into Smart Table again.