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.