Easy Embedded Tables for Your Website or Blog: Part 2

Lori Halley 26 May 2008 5 comments

In the first part of this article, we talked about various ways to show data in tables on your website or blog -- their strengths and their limitations.  Here, we'll take a closer look at how to use Zoho Sheet, Google  Spreadsheets, or DabbleDB to create a searchable, interactive table that you can easily embed in your web page, and update as easily as you update the original spreadsheet.

Here are a few real-world examples of how this can work:

  • The Iberia Parish Library in New Iberia, Louisiana, shares its weekly work schedule with staff through a simple link on the staff blog. The spreadsheet is hosted at Google Docs, where any administrator can make changes on the fly and those updates will instantly be shared with viewers.
  • The Green Mountain Baseball League in Vermont publicizes its 2008 season schedule as a Google Doc spreadsheet embedded into a page on its website. If a game is rained out, they tell the world simply by editing the original spreadsheet.
  • Andre Banen's Portfolio test page takes it to the next level, with a dynamic embedded spreadsheet that updates his stock market information every 20 minutes.

Using a web-based application such as Zoho Sheet, Google Spreadsheets, or DabbleDB, embedding a searchable table becomes a simple matter. Import a spreadsheet or create a new one,  then copy and past a snippet of HTML code into your web page or blog entry. Any web page that will accept the <iframe> code is a candidate for an interactive embedded spreadsheet table.

Note that some blogging platforms will strip out any <iframe> code for security reasons, but you can always host your spreadsheet on a static page or link to it from your blog. That just means one more click for your website visitors, but they will benefit from your ability to present complex information in an easy-to-read table form and to update it in a timely manner. That's not a bad trade-off.
 
Updating the table is easy, too. Make changes to your Zoho, Google, or DabbleBD spreadsheet and those changes are reflected on your web site. And any member of your team who has editing privileges for that original spreadsheet can collaborate on keeping the information up to date.

How to Embed a Table with Zoho Sheet

1. Sign in to your Zoho account and and go to Zoho Sheet  to create or import your spreadsheet.

2. Click on Publish and then "Embed to Blog/Website" - this will make your spreadsheet public so it can be viewed by anyone online.  




If you want to publish only a certain range of cells in the table, you can do that just as easily: select the range, name it, then choose "Publish Range" from the dropdown menu. Published ranges can be edited later on, as well as the full spreadsheet.


3. "Select Snippet" and copy the code.

4. Edit your website page or blog to insert the HTML snippet. Some editors will have an "insert HTML snippet" button; in others you will need to "view code" to place the HTML. Paste the snippet into your page, and save the page.

5. Now you have a searchable spreadsheet embedded on your web page. If you want to update the table, sign in to Zoho Sheet and edit your spreadsheet. The updated information is displayed automatically on your web page.

 

How to Embed a Table with Google Docs Spreadsheets

1. Sign in to Google Docs and create or import your spreadsheet.

2. Click on "Publish" to make your spreadsheet public so it can be viewed by anyone online, and to get a link to the URL that you can share with others. To embed the table in a web page, click on "More publishing options" and select "HTML to embed in a webpage" from the drop-down menu.


If you want to embed only a certain group of cells in your page, rather than the whole table, enter the cell range you want to use. For example, A1:D6 means that all the cells in rows 1 to 6, columns A through D, will be included.

3. Click "Generate URL" then highlight the HTML code snippet and copy it.

4. Edit your website page or blog to insert the HTML snippet. Some editors will have an "insert HTML snippet" button; in others you will need to "view code" to place the HTML. Paste the snippet into your page, and save the page.

5. Now you have a searchable spreadsheet embedded on your web page.  If you want to update the table, sign in to Google Docs and make the changes on your spreadsheet. Re-publish the document, and the updated information will be shown automatically on your web page.


How to Embed a Table with DabbleDB

The process for DabbleDB is more complex because its spreadsheet application is considerably more powerful and sophisticated than either Zoho or Google.

1. Sign in to your DabbleDB account and create or import your spreadsheet.

2. When the spreadsheet appears as you'd like it, click on "Unsaved View" to name and save what you see. Note that the "Locked View" option will let you share the table with others who don't have a DabbleDB account, but only you or another user with administrator privileges can make changes to it.

3. There are three ways that you can share your spreadsheet with others:

Export:  Click on the Export button just below the name of your saved view. The export window will open showing you a list of options: to export as RSS, CSV, comma-separated TXT, or JSON formats. If your table includes date and time fields, you should also see an ICAL (calendar format) option in the list.
 
All of these give permanent links by which you and others can view the data. To make an exported spreadsheet public, click on Sharing > Users, and ensure that the checkbox for "Allow public access to exports" is selected.

Print: Click on the Print button to create a printable PDF file of your spreadsheet, in  either landscape or portrait orientation, in your choice of 5 paper sizes. You can print the whole table or just individual entries.

Embed: To embed the table in a web page, simply click on the Share button just below the name of your saved view, and select "New page." You don't need to worry about embedding only a certain group of cells, because DabbleDB doesn't add in extra columns to the spreadsheet. As you create a table at DabbleDB, it is given only as many rows and columns as are needed; and you can refine this further by showing or hiding elements of the table as you go along.
 
An options window will open, giving you both a page URL that you can pass along as a link, and a snippet of HTML code to copy into your web page. 

4. Edit your website page or blog to insert the HTML snippet. Some editors will have an "insert HTML snippet" button; in others you will need to "view code" to place the HTML. Paste the snippet into your page, and save the page.

5. Now you have a searchable spreadsheet embedded on your web page. If you want to update the table, simply return to the saved view of your DabbleDB spreadsheet and click the Share button again. The name of your shared page will appear in the drop down menu. Select it, and edit to make your needed changes. Preview your changes, save, and the updated information will be shown on your web page.

Note that DabbleDB also lets you add a form to your embedded spreadsheet page, so you can allow users to add their own entries. This might be a usable survey tool, or a way to collect membership information, as alternative to the Google Forms email data collection method we've discussed in an earlier article.

If you'd like to learn more about DabbleDB, see Soha's review (Wild Apricot blog, August 2007). DabbleDB still offers a free 30-day trial, but now they've also added a free option that allows up to 5 users, if the full paid plans happen to be a bit beyond your group's budget. 

 
How could an embedded spreadsheet be most useful to your organization?
Can you suggest another web application to do the job?
Please feel free to share your ideas and experiences in the comments section below.

Get a Special Report on Simplifying Membership Management

Enter your email and receive this special report in your inbox.
Lori Halley [Engaging Apricot] Lori Halley [Engaging Apricot]

Posted by Lori Halley [Engaging Apricot]

Published Monday, 26 May 2008 at 8:04 PM

Get a Special Report on Simplifying Membership Management

Enter your email and receive this special report in your inbox.

Comments

  • Easy Embedded Tables for Your Website or Blog: Part 2 said:

    Monday, 26 May 2008 at 12:44 PM
  • Dan said:

    Saturday, 19 July 2008 at 8:58 AM

    Hi Rebecca,

    Great article. I have used the Google Spreadsheet on our site now. However, if you do make any type of change it is not automatically updated to your web site. Rather, you first need to select the Re-publish Document button over on the right.

    But, that is just a minor thing which is actually good so you can play with the file before you actually want someone to see it.

    Thanks, again!

    Dan

  • Lori Halley [Engaging Apricot] Lori Halley [Engaging Apricot]

    Lori Halley [Engaging Apricot] said:

    Monday, 21 July 2008 at 6:11 PM

    Thanks very much for catching my omission there, Dan! I'll edit the post to reflect this, just to make sure the information is clear.

  • Ray said:

    Sunday, 10 August 2008 at 10:35 PM

    Very helpful, thank you!

  • ioffersearch001 said:

    Saturday, 07 March 2009 at 2:59 AM

    Hii

    Great article. I have used the Google Spreadsheet on our site now. However, if you do make any type of change it is not automatically updated to your web site. Rather, you first need to select the Re-publish Document button over on the right.

    <a href="http://ioffersearch.com">Ioffersearch.com Blogs - Just another Ioffersearch.com weblog</a>

Sorry, this blog post is closed for further comments.

Search: WildApricot.com 

About results ( seconds) Sort by: 
Sorry, an error occured when performing search.